JavaScript-基础

语言基础

浏览器内核

• Chrome：Blink、V8

  Node.js 是一个基于 Chrome V8 引擎 的 JavaScript 运行时。

• Firefox：Gecko、SpiderMonkey

• Safari：Webkit、JavaScriptCore

• 微软：Trident、EdgeHtml、Cha kra

ECMAScript6

ES6 正式支持了 类、模块、迭代器、生成器、箭头函数、期约、反射、代理和众多的新数据类型

script 元素

asyncs 属性：

• 可选，表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待脚本加载，只对外部脚本有效
• 不能保证标记为 anync 的脚本按照出现次序执行

defer 属性：

• 可选，表示脚本可以延迟到文档完全被解析和显示之后再执行。同样只对外部文件有效、

关键字和保留字

关键字（es6）：

    break         do            in             typeof
    case          else          instanceof     var
    catch         export        new              void
    class         extends      return          while
    const         finally      super           with
    continue     for           switch          yield
    debugger     function     this
    default      if             throw
    delete        import        try

保留字（es6）：

    始终保留：
    enum
    严格模式下保留：
    implements   package      public
    interface    protected    static
    let           private
    模块代码中保留：
    await

变量

let 和 var 和 const

let

• let 声明的范围是块作用域，var 声明的范围是函数作用域
• let 不允许同一个块作用域中出现多次声明，对多次声明的报错不会因为混用 let 和 var 而受影响
• let 每次迭代声明一个变量实例的行为适用于所有风格的 for 循环 包括 for in 和 for of

const

• const 声明限制只适用于他指向的变量引用。简单来说就是只限制简单数据类型，不限制引用类型数据的修改，只限制引用类型的引用地址不可改变
• const 不能用来声明迭代变量，因为迭代变量会自增

// 使用var
for (var i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i); // 5 5 5 5 5
  }, 0);
}

// 适用let
for (let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i); // 0 1 2 3 4
  }, 0);
}

暂时性死区

let 声明的变量不会在作用域中被提升。

在 let 声明之前的执行瞬间被称为“暂时性死区”，在此阶段引用任何后面才声明的变量都会报错。

全局声明

var 在全局作用域中声明的变量会成为 window 的属性，而 let 声明的则不会。

数据类型

简单数据类型（原始类型）：undefined，Null，Boolean，Number，String 和 Symbol（符号），以及后面 ES 标准加的 bigint。

原始值大小固定，保存在栈内存上

复杂数据类型（引用类型）：Object

引用值是对象，存储在堆内存上

typeof 操作符

会返回以下字符串之一（typeof 不能区分 object 和 null，并且不能细致区分 object）：

• undefined 表示值未定义
• boolean 表示布尔值
• string 表示字符串
• number 表示数值
• object 表示对象或者 null
• function 表示函数
• symbol 表示符号

null 被认为是一个空对象的引用，所以为 object

undefined

表示使用 var 或 let 声明了变量但是没有初始化值，就相当于给变量赋值了 undefined。

console.log(undefined == null); //true

null

任何时候，变量保存对象，而当时又没有值可以保存是，就可以用 null 来填充变量

Boolean

将一个其他类型的值转换为布尔值时，可以调用特定的 Boolean() 转型函数

Number

Number 使用 IEEE754 格式表示 整数和浮点值，双精度值。

整数值：

可以使用八进制或者十六进制字面量表示

• 八进制：第一个数必需为 0，如：070
• 十六进制：前缀为 0x，如：0x1f

浮点值：因为浮点值使用内存是整数的两倍，所以 ECMAScript 总是想法吧浮点值转成整数

//比如：
let a = 1.0;
//会被当成整数1处理;

浮点值还可以用科学计数法表示

• 3.124e7 表示 31240000
• 3.124e-7 表示 0.0000003124

值得范围： 最小为 Number.MIN_VALUE,最大为 Nunber.MAX_VALUE 超出范围会转为特殊值，征服无穷大（infinity），无法进行任何运算

NaN

特殊值，意思是不是数值。用于表示本来要返回数值的操作失败了

可以用isNaN判断是否是 NaN

数值转换

Number()转换规则：

• 布尔值：false 为 0，true 为 1
• 数值，直接返回
• null，返回 0
• undefined，返回 NaN
• 字符串，空字符串返回 0，其他只返回数字型字符串，带有正负号与小数点的都可以返回数值
• 对象，调用 valueOf()方法，在按照上述对比
• 除此之外的字符返回 NaN

valueOf()：返回各种对象的原始值

let obj = {
  name: "Yevin",
  age: 18,
};
let arr = [12, 213, 123];
console.log(obj.valueOf());
console.log(arr.valueOf());

// { name: 'Yevin', age: 18 }
// [ 12, 213, 123 ]

parseInt()转换规则：

从第一个非空格字符开始转换，如果第一个不是数字符号或者正负号，会立即返回 NaN。后续依次检测，到非数字字符则返回之前整数。parseInt()能识别十六进制八进制。第二个参数可以指定进制数。

parseFloat()与 parseInt()规则基本一直，唯一区别为前者可以检测到第一个小数点返回浮点数，但是检测到第二个小数点的时候就会无效了直接返回值。

String

字符串可以用双引号("")单引号('')或者反引号(``)标示

var s = "abc";
console.log(s[2]); // 'c'
s[2] = "a";
console.log(s); // 'abc'

var a = "abc\nedf";
var b = `abc
edf`;
console.log(a === b); //true

var c = "Yevin";
var d = "Zhi";

var e = `hello:${c},${d}`;
console.log(e); // hello:Yevin,Zhi

Symbol

更多 Symbol 详细信息见 Symbol 详细介绍

Symbol 符号的用途是确保对象属性使用唯一标识符，不会发生属性冲突的危险

Symbol()函数不能与 new 关键字一起作为构造函数使用。

var a = Symbol();
var b = Symbol();
console.log(a == b); //false

注册全局符号注册表

使用Symbol.for()注册 使用Symbol.keyFor()查看全局注册表，该方法接收符号，返回该全局符号对应的字符串键

var a = Symbol.for("yevin");
var b = Symbol.for("yevin");
console.log(a === b); //true

console.log(Symbol.keyFor(a)); / yevin

使用符号作为属性

凡是可以使用字符串或者数值作为属性的地方都可以使用符号,包括 Object.defineProperty 和 Object.defineProperties()定义的属性

var name = Symbol("name");
var obj = {
  [name]: "yevin",
};
//或者可以 obj[name]='yevin'
console.log(obj); //{ [Symbol(name)]: 'yevin' }
console.log(obj[name]); // yevin

Object.defineProperty和Object.defineProperties()

这两个方法直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

var obj = {};
//defineProperty
Object.defineProperty(object1, "property1", {
  value: 42,
  writable: false,
});

//defineProperties
Object.defineProperties(obj, {
  property2: {
    value: true,
    writable: true,
  },
  property3: {
    value: "Hello",
    writable: false,
  },
});

Object.getOwnPropertyNames() 返回对象实例的常规属性数组

Object.getOwnPropertySymbols() 返回对象实例的符号属性数组

Object.getOwnPropertyDescriptors() 返回同时包含常规和符号属性描述符的对象

Reflect.ownKeys() 返回两种类型的键

var a = Symbol("a");
var b = Symbol("b");
var obj = {
  [a]: "aaa",
  [b]: "bbb",
  c: "ccc",
};

console.log(Object.getOwnPropertyNames(obj)); //[ 'c' ]
console.log(Object.getOwnPropertySymbols(obj));
//[ Symbol(a), Symbol(b) ]
console.log(Object.getOwnPropertyDescriptors(obj));
// {
//   c: {
//     value: 'ccc',
//     writable: true,
//     enumerable: true,
//     configurable: true
//   },
//   [Symbol(a)]: {
//     value: 'aaa',
//     writable: true,
//     enumerable: true,
//     configurable: true
//   },
//   [Symbol(b)]: {
//     value: 'bbb',
//     writable: true,
//     enumerable: true,
//     configurable: true
//   }
// }
console.log(Reflect.ownKeys(obj));
//[ 'c', Symbol(a), Symbol(b) ]

Object

ECMAScript 中的对象其实就是一组数据和功能的集合。

属性和方法

• constructor：用于创建当前对象的函数
• hasOwnproperty(propertyname)：用于判断当前对象实例上是否存在给定的属性
• isPrototypeOf(object)：用于判断当前对象是否为另一个对象的原型
• propertyEnumerable(propertyname) ：用于判定给的属性是否能够使用 for-in 语句枚举
• toLocaleString()：返回对象的字符串表示，该字符串反应对象所在的本地化执行环境
• toString()：返回对象的字符串表示
• valueOf()：返回对象对应的字符串，数值或者布尔表示

操作符

位运算

按位非（~）

返回数值的补数（反码）

let num1 = 10; // 二进制 0000 0000 0000 0000 0000 0000 0000 1010
let num2 = ~num1; //二进制 1111 1111 1111 1111 1111 1111 1111 0101

console.log(num2); // -11

//类似于 对num1取负值并减1

按位与（&）

有两个操作数，将两个数的每一位对齐，只有两个位值都为 1 取 1，否则取 0 计算。

按位与（|）

有两个操作数，将两个数的每一位对齐，只要有一个位值为 1 取 1，否则取 0 计算。

按位异或（^）

有两个操作数，将两个数的每一位对齐，有且只有一个位值为 1 取 1，否则取 0 计算。（两个都为 1 或者 0 时取 0）

左移（<<）

按照指定的位数将数值所有位向左移动，移位空出位置以 0 填充

let a = 2; //二进制 10
let b = a << 5; // 二进制 1000000
console.log(b); //64

有符号右移（>>）

按照指定的位数将数值所有位向右移动，移位空出位置以 0 填充，保存符号

无符号右移

按照指定的位数将数值所有位向右移动，移位空出位置以 0 填充，不保存符号

布尔操作符

逻辑与（$$）

当操作数是布尔值：两个操作数都为真是为真

当操作数不是布尔值：

• 当第一个操作数位对象，返回第二个操作数
• 当二个操作数是对象，则只有第二个操作数求值为 true 时才会返回该对象
• 两个操作都为对象，返回第二个操作数
• 有一个操作数为 null,NaN 或者 undefined，则返回 null，NaN 或者 undefined

逻辑与（||）

当操作数是布尔值：两个操作数有一个为真则为真

当操作数不是布尔值：

• 当第一个操作数位对象，返回第一个操作数
• 当第一个操作数求值为 false，则返回第二个操作数
• 当二个操作数是对象，则返回第一个操作数
• 有一个操作数为 null,NaN或者 undefined，则返回 null，NaN 或者 undefined

关系操作符

相等操作符

语句

for-in 语句

for-in 语句是一种严格的迭代语句，用于枚举对象中的非符号键属性(对象可以是非迭代对象)

for-of 语句

for-of 语句是一种严格的迭代语句，用于遍历可迭代对象的元素

switch

var a = 76;

switch (true) {
  case a > 90:
    console.log("优秀");
    break;
  case a > 70:
    console.log("良好");
    break;
  case a > 60:
    console.log("及格");
    break;
  default:
    console.log("不及格");
}

函数

函数返回值

严格模式下对函数有一些限制

变量作用域和内存

instanceof 判断类型

var a = [1, 2, 3];
console.log(a instanceof Array); //true
console.log(a instanceof RegExp); //false

执行上下文

变量或函数的上下文决定了他们可以访问那些数据，以及他们的行为。每个上下文都有一个关联的变量对象（variable object），该上下文中定义的所有变量和函数都存在这个对象上。（该对象无法通过代码访问变量对象）

包括：全局上下文，函数上下文和块级上下文

代码执行流没进入一个新上下文，都会创建一个作用域链，用于搜索变量和函数

全局上下文

最外层的上下文，在浏览器中，全局上下文就是 window 对象（根据 ECMAScript 实现的宿主环境，便是全局上下文的对象可能不一样）。

上下文栈

• 每个函数调用都有自己的上下文
• 当代码执行流进入函数时，函数的上下文被推到一个上下文栈上
• 当函数执行完之后，上下文栈会弹出该函数上下文
• 将控制权返还给之前的执行上下文

作用域链

上下文中的代码在执行的时候，会创建变量对象的一个作用域链。该作用域链决定了各级上下文中的代码在访问变量和函数时的顺序。

作用域链增强

一些语句会导致在作用域链前端临时添加一个上下文，这个上下文在代码执行后会被删除。

• try/catch 语句的 catch 块：会创建一个新的变量对象，这个变量对象包含要抛出错误对象的声明。
• with 语句：会向作用域前端添加指定的对象

变量声明

• 使用 var 的声明变量，会被自动添加到最接近的上下文

• 在函数中，最接近的上下文就是函数上下文。

• 如果变量未经声明被初始化，会被自动添加到全局上下文

• let 声明变量，作用域是块级的（块级作用域由最近的一堆含花括号{}界定）

垃圾回收

通过自动内存管理实现内存分配和限制资源回收 基本思路：确定哪个变量不会再使用，然后释放它占用的内存,周期性，即垃圾回收程序每隔一定事件就会自动运行。

• 离开作用域的值会被自动标记为可回收，然后再垃圾回收期间被删除

标记清理

标记变量，没有被使用的，在上下文中的变量都访问不到的变量进行回收。

主流的垃圾回收算法是标记清理，即先给当前不适用的值加上标记，在回来回收他们的内存

引用计数

标记引用次数，每次被引用，标记引用次数就加 1，引用被覆盖的时候，减 1.当为 0 的时候说明，说明没有办法在访问到这个值了，就会被垃圾回收程序释放回收。

内存管理

优化内存占用

• 解除引用 不用的数据设置为null
• 通过 const 和 let 声明 提升性能
• 避免内存泄漏 意外声明全局变量

基本引用类型

引用类型：把数据和功能组织到一起的结构

Date

Date.parse()：接收表示日期的字符串参数，转换为表示该日期的毫秒数

Date.UTC()

格式化日期方法

RegExp

详情见 正则表达式

原始值包装类型

Boolean，Number 和 String

let s1 = "some text";
let s2 = s1.substring(2);

// 相当于
let s1 = new String("some text");
let s2 = s1.substring(2);
s1 = null;

以上行为可以让原始值拥有对象的行为（方法等等）。对于布尔值和数值而言，以上三步也会在后台发生，只不过使用 Boolean 和 Nunber 包装类型

// 使用new调用原始值包装类型的构造函数，与调用同名的转型函数不一样
let value = "25";
let number = Number(value); //转型函数
console.log(typeof number); //number

let obj = new Number(value); //构造函数
console.log(typeof obj); //object

Boolean

Boolean 的实例会重写 valueOf()方法，返回一个原始值 true 或者 false，toString() 方法被调用时也会被覆盖，返回字符串 true 或者 false。

let obj = new Boolean(false);
console.log(obj && true); //true

Number

Number 类型提供了几个用于将数值格式化为字符串的方法

• toFixed():返回包含指定小数点位数的数值字符串，该方法会四舍五入。位数不够会自动填充 0。
• toExponential()：与toFixed()基本一直，但是返回科学计数法表示的数值字符串，接受一个参数表示结果中小数的位数。

var num = 123.126;
console.log(num.toFixed(2)); //123.13
console.log(num.toFixed(6)); //123.126000

console.log(num.toExponential(2)); //1.23e+2
console.log(num.toExponential(6)); //1.231260e+2

Number.isInteger() （ES6 新增）：用来判断一个舒适是否保存整数

String

每个 String 对象都有一个 length 属性，表示字符串中字符的数量 JavaScript 字符串有 16 位 Code Unit 组成。每 16 位码元对应一个字符。

• charAt()：返回指定索引位置的字符。
• charCodeAt()：返回指定索引位置的字符的字符编码
• fromCharCode()：返回根据指定 UFT-16 码创建的字符串，可以接受多个数值

字符串操作方法

• concat()：拼接多个字符串
• slice()：提取子字符串，第一个参数位开始，第二个参数位结束，可以为负数（从字符串尾部往前计数）
• substring()：与slice()一致，第二个参数为负值时，将转换成 0
• substr()：提取子字符串，第一个参数位开始，第二个参数用提取的长度

以上方法都不会更改原本字符串，只会返回一个新的字符串

字符串位置方法

• indexOf()从字符串开头开始搜索传入的字符串，并返回位置，没有找到返回-1
• lastIndexOf()：从字符串末尾开始搜索传入字符串，并返回位置，没有找到返回-1

字符串包含方法（ES6 新增）

用于判断字符串中是否包含另一个字符串的方法

• startsWith()：检查开始于索引 0 的匹配项，第二个参数表示开始搜索的位置
• endsWith()：检查开始于索引(string.length -substring.length)的匹配项
• includes()：检查整个字符串，第二个参数表示开始搜索的位置

var str = "qweasd";
console.log(str.startsWith("qwe")); //true
console.log(str.startsWith("qwe", 1)); //false
console.log(str.startsWith("we", 1)); //true

console.log(str.endsWith("asd")); //true

console.log(str.includes("we", 1)); //true

去除字符串两端空格符

• trim()：去除字符串两端的空格，返回一个新的字符串
• trimLeft()：去除字符串中左边的空格
• trimRight()：去除字符串中右边的空格

字符串大小写转换

• toLowerCase()：转换小写
• toLocaleLowerCase()：转换小写
• toUpperCase()：转换大写
• toLocaleUpperCase()：转换大写

字符串正则匹配

详情见 正则方程式

其他方法

• repeat()：接受一个整数参数，将当前字符串复制多少次，并返回拼接字符串

• padStart()：接受一个整数参数，复制字符串，如果长度不够会填充字符，第二个参数为填充字符（默认为空格）

• padEnd()：与padStart()基本一致，填充字符是，一个填充在开始，一个填充在结束

• localeCompare()：两个字符串 对比字母表，字母表在前返回-1，在后返回 1，相等则返回 0

var str = "yewen";

console.log(str.padStart(10, "?")); //?????yewen
console.log(str.padEnd(10, "?")); //yewen?????

字符串迭代与解构

字符串的原型上暴露了一个迭代器方法，表示可以迭代字符串中的每个字符

可以使用 for-of 语句

字符串可以使用解构语法

let str = "abc";
console.log(...str); //a b c
console.log([...str]); //[ a , b , c ]

单例内置对象

内置对象：任何有 ECMAScritp 实现提供、与宿主环境无关，并在 ECMAScritp 程序开始执行时就存在的对象。

包括：Object，Array 和 String。以及 Global 和 Math

Global

兜底对象：所针对的是不属于任何对象的属性和方法。

前面介绍的函数，包括 isNaN()、isFinite()、parseInt()和 parseFloat()，实际上都是 Global 对象的方法

URl 编码方法

• encodeURI()：对 URL 进行编码转换有效的 UTL 不能包含的字符，比如空格
• encodeURIComponent()：编码所有非标准字符
• decodeURI()
• decodeURIComponent()

eval()方法

一个完整的 ECMAScript 解释器，接收一个参数，即一个要执行的字符串

• eval() 定义的任何变量和函数都不会被提升

Global 对象属性

window

浏览器将 window 对象实现为 Global 对象的代理，因此全局作用域中声明的变量和函数都变成了 window 属性

Math

属性

方法

舍入方法

• Math.ceil() 向上舍入取整
• Math.floor() 向上舍入取整
• Math.round() 四舍五入取整
• Math.fround() 返回数值最接近的单精度浮点值表示

random()方法：返回 0~1 范围内的随机数，包括 0 但是不包括 1

集合引用类型

Object

对象字面量{} 出现表达式上下文。表示期待返回值的上下文

语句上下文：if 等语句 {}中

Array

一组有序的数据，每个曹伟可以存储任意类型的数据

Array.from()和 Array.of()(ES6 新增方法)

• Array.from()用于将类数据结构转换成为数组实例
  • 第二个参数可以是个增强函数，
  • 第三个参数为映射增强函数的 this指向
• Array.of()用于把一组参数转成数组

数组空位

创建空位数组：let arr= [,,,,,]

数组索引：可以修改

检测数组

• value instanceof Array
• Array.isArray()

迭代器方法

• keys() 返回数组索引的迭代器
• values() 返回数组元素的迭代器
• entries() 返回索引/值对的迭代器

可以适用 ES6 中的解构操作

let arr = ["yewen", "yevin"];
for (let [index, item] of arr.entries()) {
  console.log(index);
  console.log(item);
}

复制和填充方法(ES6 新增)

• copyWithin() 批量复制
  • 第一个参数 插入位置
  • 第二个参数 复制原数组内容的开始位置
  • 第三个参数 复制原数组内容的结束位置

• fill() 填充数组
  • 第一个参数 填充的字符
  • 第二个参数 填充开始位置
  • 第三个参数 填充结束位置

//copyWithin
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(arr.copyWithin(4));
//[  1, 2, 3, 4, 1, 2, 3, 4, 5  ]
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr1.copyWithin(4, 2));
//[  1, 2, 3, 4, 3, 4, 5, 6, 7 ]
let arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr2.copyWithin(4, 2, 4));
// [ 1, 2, 3, 4, 3, 4, 7, 8, 9 ]

//fill
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr.fill(4));
//[4, 4, 4, 4, 4,4, 4, 4, 4 ]
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr1.fill(4, 2));
//[1, 2, 4, 4, 4, 4, 4, 4, 4]
let arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr2.fill(4, 2, 4));
//[(1, 2, 4, 4, 5, 6, 7, 8, 9)];

转换方法

• valueOf() 返回的还是数组本身
• toString() 返回由逗号隔开的数组值得字符串
• loLocaleString()

栈方法

• push() 接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度
• pop() 用于删除数组的最后一项，同时减少数组的 length 值，返回被删除的项

队列方法

• shift() 删除数组的第一项并返回它，然后数组长度减 1
• unshift() 数组开头添加任意多个值，然后返回新的数组长度

排序方法

• reverse() 翻转数组
• sort() 排序

操作方法

• concat() 连接多个数组
• slice() 创建一个包含原有数组中一个或多个元素的新数组，第一个参数开始索引，第二个结束索引
• splice() 第一个参数 开始位置，第二个参数删除数量，第三个参数以及后面参数为插入元素

操作和位置方法

• indexOf 返回要查找的元素在数组中的位置，如果没找到则返回-1
• lastIndexOf() 从后往前查找，返回要查找的元素在数组中的位置，如果没找到则返回-1
• includes() ECMAScript7 新增的，返回布尔值，表示是否查找到

• find() 返回第一个匹配的元素
• findIndex() 返回第一个匹配元素的索引

迭代方法

• every() 数组每一项都运行传入的函数,都返回 true 这个方法返回 true
• filter() 数组每一项都运行传入的函数，函数返回 true 的项会组成数组之后返回
• forEach() 对数组每一项都运行传入的函数，没有返回值。
• map() 对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组
• some()对数组每一项都运行传入的函数，如果有一项函数返回 true，则这个方法返回 true

归并方法

• reduce()迭代数组的所有项，并在此基础上构建一个最终返回值
• reduceRight()迭代数组的所有项，并在此基础上构建一个最终返回值,最后一项开始遍历至第一项

定型数组

定型数组（typed array）是 ECMAScript 新增的结构，目的是提升向原生库传输数据的效率

WebGL：专用于 2D 和 3D 计算机图形的子集，开发者利用它能够编写设计负责图形的应用程序，他会被兼容 WebGL 的浏览器原生解释执行。但是 JavaScript 数组与其原生数组之间不匹配，因为 JavaScript 默认是双精度浮点格式的。

于是出现了CanvasFloatArray，最终变成Float32Array

Float32Array 实际上是一种“视图”，可以允许 JavaScript 运行时访问一块名为 ArrayBuffer 的预分配内存。

ArrayBuffer

ArrayBuffer 是所有定型数组及视图引用的基本单位。

ArrayBuffer()是一个普通的 JavaScript 构造函数，可用于在内存中分配特定数量的字节空间

ArrayBuffer 创建之后不能在调整大小，但是可以使用slice()复制其全部或者部分到一个新的实例中

const buf = new ArrayBuffer(16); //在内存中分配16字节
console.log(buf.byteLength); //16

console.log(buf.slice(4, 12)); //8

对 ArrayBuffer 的读取或写入，必须通过视图实现。

DataView

DataView 允许读写 ArrayBuffer 的视图

对已有的 ArrayBuffer 读取或写入时才能创建 DataView 实例, 可以使用全部或部分 ArrayBuffer,且维护着对该缓冲实例的引用，以及视图在缓冲中开始的位置

const buf = new ArrayBuffer(16);
const fullDataView = new DataView(buf);
//const fullDataView = new DataView(buf,0,8 );
console.log(fullDataView.byteOffset); //0   //0
console.log(fullDataView.byteLength); //16   //8
console.log(fullDataView.buffer === buf); //true

ElementType

DataView 对存储在缓冲内的数据类型没有预设，它暴露的 API 强制开发者在读、写时指定一个 ElementType，然后 DataView 就会忠实地为读、写而完成相应的转换

• Int8 8 位有符号整数 -128-127
• Uint8 8 位无符号整数 0-255
• Int16 16 位有符号整数 -32768-32767
• Uint16 16 位无符号整数 0-65535
• Int32 32 位有符号整数 -2147483648-2147483647
• Uint32 32 位无符号整数 0-4294967295
• Float32 32 位 IEEE-754 浮点数 -3.4e+38 - +3.4e+38
• Float64 64 位 IEEE-754 浮点数 -1.7e+308 - +1.7e+308

定型数组

定型数组是另一种形式的 ArrayBuffer 视图。虽然概念上与 DataView 接近，但定型数组的区别在于，它特定于一种 ElementType 且遵循系统原生的字节序。相应地，定型数组提供了适用面更广的 API 和更高的性能。

创建定型数组：

创建定型数组的方式包括读取已有的缓冲、使用自有缓冲、填充可迭代结构，以及填充基于任意类型的定型数组。另外，通过<ElementType>.from()和<ElementType>.of()

• 定型数组和普通数组相似，可以使用数组的部分相关操作符方法和属性
• 定型数组同样使用数组缓存（ArrayBuffer）来存储数组，因为无法适用相关合并，复制修改数组方法
• 但是定型数组提供了两个新的方法set()和subarray()

Map

Map 可以使用任何 Javascript 数据类型作为建，数据会按照创建顺序插入到实例，Map 是一个可迭代对象

创建 Map

可以给 Map 构造函数传入一个可迭代对象，需要包含键/值对数组。

const m1 = new Map([
    ["key": "123"],
    ["key": "123"],
    ["key": "123"]
]);

相关方法属性

• size 属性，获取映射中的键值对数量
• set() 添加键值对
• get() 获取数据
• has() 查询数据
• delete() 删除数据
• clear() 清空数据

与 Object 对比

• 内存占用，在给定内存的情况下 Map 多储存键值对
• 插入性能，大量插入操作，Map 性能更加
• 查找速度，大量查找 Object 会更好

WeakMap

WeakMap 中的键只能是 Object 或者继承自 Object 的类型

const key1={id:1}
const key2={id:2}
const key3={id:3}

const m1 = new Map([
    [key1: "123"],
    [key2: "123"],
    [key3: "123"]
]);

相关属性方法与 Map 基本一致

相关方法

• set() 添加键值对
• get() 获取数据
• has() 查询数据
• delete() 删除数据

弱键

不属于正式的引用，不会阻止垃圾回收。

不可迭代键

由于 WearkMap 中的键值对任何时候都可能被销毁，所以不能进行迭代遍历。也没有clear() 方法

使用弱映射

• 可以实现真正的私有变量
• 可以保存节点元数据，当节点被删除，垃圾回收就会立即释放其内存

Set

集合类型，Set 可以包含任何 JavaScript 数据类型作为值

创建集合

const s = new Set();

const s1 = new Set(["1", "2", "3"]);

相关方法和属性

• size 返回元素数量
• value() 返回值
• add() 增加值
• has() 查询
• delete() 删除
• clear() 删除

顺序与迭代

Set 会维护值插入时的顺序，因此支持按顺序迭代

WeakSet

弱集合，所有的值必须用引用对象。同样与 WeakMap 一样不可迭代

const key1={id:1}
const key2={id:2}
const key3={id:3}

const ws = new WeakSet([key1，key2，key3]);

相关方法和属性

• add() 增加值
• has() 查询
• delete() 删除

迭代和拓展操作

ES6 新增的迭代器和拓展操作符对集合引用类型特别有用

4 中原生集合类型定义了默认迭代器：

• Array
• 所有定型数据
• Map
• Set

上述所有类型都支持顺序迭代，可以传入 for-of 循环.

同样的，上述的类型都兼容拓展操作符

let arr = [1, 2, 3];
console.log(...arr); //1,2,3

let arr2 = [...arr]; //复制数组
console.log(arr2); //[1,2,3]
console.log(arr === arr2); //false

let arr3 = [0, ...arr, 4, 5]; //[0,1,2,3,4,5]

迭代器与生成器

ES6 新增迭代器和生成器，能够更加清晰高效方便的实现迭代

迭代器

生成器

理解迭代

简单来说，迭代就是循环遍历出数据集合的每一项。

• 循环是迭代机制的基础
• 迭代会在一个有序集合上进行

在早期，执行迭代必需适用循环或者其他辅助结构，现在解决方案：迭代器模式。

迭代器模式

描述一个方案，把有些结构成为：可迭代对象。因为他们实现了真正的 Iterable 结构，可以通过迭代器获取消费

通俗来讲，可迭代对象就是数组或者集合这样的对象，包含的元素都是有遍历顺序的

迭代器

迭代器（iterator）是按需创建的一次性对象。每个迭代器都会关联一个可迭代对象，而迭代器会暴露迭代其关联可迭代对象的 API。迭代器无须了解与其关联的可迭代对象的结构，只需要知道如何取得连续的值

可迭代协议

实现 Iterable 接口（可迭代协议）需要具备两种能力：支持迭代的自我识别能力和创建实现 Iterator 接口的对象的能力。

内置类型实现 Iterable 接口：

• 字符串 String
• 数组 Array
• 映射 Map
• 集合 Set
• arguments 对象
• Nodelist 等 DOM 集合类型

检测数据类型是否实现迭代器工厂函数：

const o = {
  name: "wenbo",
};
const a = [1, 2, 3];
const s = "heihei";
const n = 2;

console.log(o[Symbol.iterator]); //undefined
console.log(a[Symbol.iterator]); //[Function: values]
console.log(s[Symbol.iterator]); //[Function: [Symbol.iterator]]
console.log(n[Symbol.iterator]); //undefined

//调用工厂函数会生成一个迭代器

console.log(a[Symbol.iterator]); //Object [Array Iterator] {}
console.log(s[Symbol.iterator]); //Object [String Iterator] {}

接收可迭代对象的原生语言特性包括：

• for-of 循环
• 数组解构
• 拓展操作符
• Array.from()
• 创建集合
• 创建映射
• Promise.all() 接收由期约组成的可迭代对象
• Promise.race() 接收由期约组成的可迭代对象
• yield *操作符，在生成器中使用

原生语言解构会在后台调用提供的可迭代对象的这个工厂函数，从而返回一个迭代器：

let arr = ["hello", "world", "heihei"];

//for of
for (const item of arr) {
  console.log(item); // hello world heihei
}

//解构
let [a, b, c] = arr;
console.log(a, b, c); // hello world heihei

let arr2 = [...arr, "yewen"];
console.log(arr2); //[ 'hello', 'world', 'heihei', 'yewen' ]

//Array.from()
let arr3 = Array.from(arr);
console.log(arr3); //[ 'hello', 'world', 'heihei' ]

let set = new Set(arr);
console.log(set); //Set(3) { 'hello', 'world', 'heihei' }

let arr4 = [
  ["yewen", 1],
  ["zhijian", 2],
  ["wenbo", 3],
];
let map = new Map(arr4);
console.log(map); //Map(3) { 'yewen' => 1, 'zhijian' => 2, 'wenbo' => 3 }

如果对象原型链上的父类实现了 Iterable 接口，那这个对象也实现了该接口：

class YewenArray extends Array {}
let wenbo = new YewenArray("1", "2", "3");
for (let item of wenbo) {
  console.log(item); // 1 2 3
}

迭代器协议

迭代器是一种一次性使用的对象，用来迭代预期关联的可迭代对象：

• 迭代器 API 使用 next()方法可以迭代对象中遍历数据

  • 返回一个 IteratorResult 对象
  • IteratorResult 对象有两个属性 done 和 value
  • done：为一个布尔值，便是是否可以再次调用 next() 获取下一个值，done: true 状态称为“耗尽”。
  • value：包含可迭代对象的下一个值

• 迭代器使用游标记录遍历可迭代对象。如果在迭代过程中对象被修改，迭代器也会反映相应的变化

let arr = ["hei", "ha", "hu"];
let iter = arr[Symbol.iterator]();
console.log(iter);
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
//Object [Array Iterator] {}
//{ value: 'hei', done: false }
//{ value: 'ha', done: false }
//{ value: 'hu', done: false }
//{ value: undefined, done: true }

//迭代过程中修改
let arr = ["123", "456"];
let iter = arr[Symbol.iterator]();

console.log(iter.next());
arr.push("789");
console.log(iter.next());
console.log(iter.next());

//{ value: '123', done: false }
//{ value: '456', done: false }
//{ value: '789', done: false }
//{ value: undefined, done: true }

自定义迭代器

class Counter {
  constructor(limit) {
    this.limit = limit;
  }
  [Symbol.iterator]() {
    (letcount = 1), (limit = this.limit);
    return {
      next() {
        if (count <= limit) {
          return { done: false, value: count++ };
        } else {
          return { done: true, value: undefined };
        }
      },
    };
  }
}
let counter = new Counter(3);
for (let i of counter) {
  console.log(i);
}
// 1
// 2
// 3

提前终止迭代器

• return()用于指定在迭代器提前关闭时执行的逻辑
• 必需返回一个有效的 IteratorResult 对象，可简单返回{done:true}

生成器

ES 6 新增一个结构，拥有在一个函数块内暂停和恢复代码执行的能力

生成器基础

生成器的形式是一个函数，函数名称前面加一个星号(*)表示。

//生成器声明

function* generatorFn() {}

//or
let generatorFn = function*() {};

//or
class Wen {
  *generatorFn() {}
}
console.log(generatorFn);

//[GeneratorFunction: generatorFn]

调用生成器函数会产生一个生成器对象：生成器对象一开始处于暂停执行（suspended）的状态。与迭代器相似，生成器对象也实现了 Iterator 接口，因此具有 next()方法。调用这个方法会让生成器开始或恢复执行。

let g = function*() {};
console.log(g);
console.log(g().next());
//[GeneratorFunction: g]
//{ value: undefined, done: true }

生成器对象实现了 Iterable 接口，他们默认的迭代器是自引用的。

通过 yield 中断执行

yield关键字可以让生成器停止和开始执行。

• 生成器函数在遇到 yield 关键字之前回正常执行。
• 遇到 yield 之后，执行回停止，函数作用域的状态会被保留。
• 只能通过在生成器对象上调用 next()

function* generatorfn() {
  yield "wenbo01";
  yield "wenbo02";
  return "returns";
}
let g = generatorfn();
console.log(g.next());
console.log(g.next());
console.log(g.next());
console.log(g.next());

//{ value: 'wenbo01', done: false }
//{ value: 'wenbo02', done: false }
//{ value: 'returns', done: true }
//{ value: undefined, done: true }

function* generatorfn() {
  yield* [1, 2, 3];
}
let g = generatorfn();
console.log(g.next());
console.log(g.next());
console.log(g.next());
console.log(g.next());
//{ value: 1, done: false }
//{ value: 2, done: false }
//{ value: 3, done: false }
//{ value: undefined, done: true }

提前终止生成器

强制生成器进入关闭状态

• return() 所有生成器都有return()方法，进入关闭无法恢复
• throw()

//return
function* generatorfn() {
  yield* [1, 2, 3];
}

let g = generatorfn();
console.log(g.next());
console.log(g.return(4));
console.log(g.next());
//{ value: 1, done: false }
//{ value: 4, done: true }
//{ value: undefined, done: true }

//throw

对象，类与面向对象编程

对象：ECMA-262 将对象定义为一组属性的无序集合

对象属性

描述对象内部特性的属性

• 数据属性：包含一个保存数据值的位置，值会从这个位置读取，也会写入到这个位置。数据属性有 4 个特性描述它们的行为。
• 访问器属性：不包括数值，只包括 getter 获取和 setter 设置函数。
  • setter：在写入访问器属性的时候调用,会调用设置函数并传入新值，这个函数必须决定对数据做出什么修改
  • getter：在读取访问器属性的时候调用

数据属性

• 「configurable」：表示属性是否可以通过delete删除并重新定义
• 「enumerable」：表示是否可以通for-in循环返回
• 「writable」：表示属性的值是否可以修改
• 「value」：包含属性实际的值
• 以上属性除了 value，默认都为true

设置数据属性

需要修改属性的默认特性，就必须使用 Object.defineProperty()方法

点击查看代码

let demo = {};
Object.defineProperty(demo, "name", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: "Yevin",
});

:::

访问器属性

• 「set」：设置函数，在写入属性时调用。默认值为 undefined
• 「get」：获取函数，在读取属性时调用。默认值为 undefined。

设置访问器属性

访问器属性不能直接定义，需要借助Object.defineProperty()

let demo = {
  _name: "wenbo",
};
console.log(demo, demo._name, demo.name);
//{_name:'wenbo'}   wenbo  undefined
let test = "";
//监听demo的name值，使其在改变和获取的时候改变和返回_name的值
//实际上，并没有直接改变或者获取demo对象上name的值，而是返回和改变demo上_name的值
Object.defineProperty(demo, "name", {
  get() {
    return this._name;
  },
  set(val) {
    this._name = val;
    test = val;
  },
});
console.log(demo, demo._name, demo.name);
//{_name:'wenbo'}   wenbo  wenbo
demo.name = "zhijian";
console.log(demo, demo.name, test);
//{_name:'zhijian'}  zhijian  zhijian

获取属性的特性

使用 Object.getOwnPropertyDescriptor()方法可以取得指定属性的属性描述符。

let demo = {};

Object.defineProperties(demo, {
  _name: {
    value: "zhijian",
    enumerable: false,
  },
  name: {
    get() {
      return this._name;
    },
    set(val) {
      this._name = val;
    },
  },
});

let test = Object.getOwnPropertyDescriptor(demo, "_name");
console.log(test.value);
console.log(test.configurable);
console.log(test.enumerable);
console.log(test.writable);
console.log(test.get);
console.log(test.set);
//zhijian
//false
//false
//false
//undefined
//undefined

let test1 = Object.getOwnPropertyDescriptor(demo, "name");
console.log(test1.value);
console.log(test1.configurable);
console.log(test1.enumerable);
console.log(test1.writable);
console.log(test1.get);
console.log(test1.set);
//undefined
//false
//false
//undefined
//[Function: get]
//[Function: set]

对象方法

合并对象

通过 ES6 新增方法 Object.assign()合并对象

方法会使用源对象上的[[Get]]取得属性的值，然后使用目标对象上的[[Set]]设置属性的值。

let a = {
  name: "yewen",
};
let b = {
  name: "zhijian",
  age: "18",
};
console.log(Object.assign(a, b), a, b);
//{ name: 'zhijian', age: '18' } { name: 'zhijian', age: '18' } { name: 'zhijian', age: '18' }

let a1 = {
  name: "yewen",
  age: "18",
};
let b1 = {
  name: "zhijian",
};
console.log(Object.assign(a1, b1), a1, b1);
//{ name: 'zhijian', age: '18' } { name: 'zhijian', age: '18' } { name: 'zhijian' }

相等判定

ECMAScript 6 规范新增了Object.is()，方法必须接收两个参数。

增强对象语法

• 属性值简写
• 可计算属性
• 方法名简写

//属性值简写
let name = "zhijian";
const obj = {
  name,
};
//可计算属性
let name = "yewen";
const obj = {
  [name]: "zhijian",
};
//方法名简写
const obj = {
  eat: function() {},
};
const obj = {
  eat() {},
};

对象解构

解构，ES6 新增语法，可以在一个语句中使用潜逃数据实现一个或者多个赋值操作

const obj = {
  a: 1,
  b: 2,
};
const { a, b } = obj;
console.log(obj, a, b); // {a:1,b:2}   1   2

let { a: c, b: d } = obj;
console.log(c, b); // 1  2

• 解构复制可以值复制需要的属性
• 如果引用的属性不存在，则该变量的值为 undefined
• 解构复制的同时也可以定义默认值，当属性不存在，变量就为默认值

对象创建

• 字面量
• 构造函数

ES6 正式开始支持类和继承

工厂模式

一种按照特定接口创建对象的方式

• 解决创建多个类似对象的问题
• 没有解决对象标识问题，新创建的对象是什么类型

function creatPerson(name, age, job) {
  let o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function() {
    console.log(this.name);
  };
  return o;
}

let person1 = creatPerson("zhijian", 18, "code");

构造函数模式

构造函数是用于构造特定类型对象。

• 按照惯例，构造函数名称的首字母要大写。

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = function() {
    console.log(this.name);
  };
}
let person1 = new Person("zhijian", 18, "code");

创建 Person 实力时，应使用 new 操作符：

• 在内存中创建一个新对象
• 这个新对象内部的[[Prototype]]特性被赋值为构造函数的 property 属性
• 构造函数内部的 this 被赋值为这个新对象（this 指向新对象）
• 执行构造函数内部的代码（给新对象添加属性）
• 如果构造函数返回非空对象，则返回该对象，否则返回刚创建的新对象

原型模式

每个函数都会创建一个 prototype 属性，这个属性是一个对象，包含应该由特定引用类型的实例共享的属性和方法

实际上，这个对象就是通过调用构造函数创建的对象的原型。使用原型对象的好处是，在它上面定义的属性和方法可以被对象实例共享。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.property.sayName = function() {
  console.log(this.name);
};

属性枚举顺序

for-in 循环、Object.keys()、Object.getOwnPropertyNames()、Object.getOwnProperty-Symbols()以及 Object.assign()在属性枚举顺序方面有很大区别。for-in 循环和 Object.keys()的枚举顺序是不确定的，取决于 JavaScript 引擎，可能因浏览器而异。

Object.getOwnPropertyNames()、Object.getOwnPropertySymbols()和 Object.assign()的枚举顺序是确定性的。先以升序枚举数值键，然后以插入顺序枚举字符串和符号键。在对象字面量中定义的键以它们逗号分隔的顺序插入。

对象迭代

ES 2017 新增两个静态方法

• Object.values() 返回对象值的数组
• Object.entries() 返回对象健值对的数组

其他原型语法

自定义 prototype 属性

function Person() {}

Person.prototype = {
  name: "zhijian",
  age: 18,
  sayName() {
    console.log(this.name);
  },
};
//注意这样设置后 prototype的constructor属性就不指向Person了，因为重写了默认的prototype对象。

//可以手动指向constructor

function Person() {}

Person.prototype = {
  constructor: Person,
  name: "zhijian",
  age: 18,
  sayName() {
    console.log(this.name);
  },
};
//注意：以这种方式恢复constructor属性会创建一个[[Enumerable]]为true的属性。而原生constructor属性默认是不可枚举的

//可以使用Object.defineProperty()方法来定义constructor属性

function Person() {}

Person.prototype = {
  constructor: Person,
  name: "zhijian",
  age: 18,
  sayName() {
    console.log(this.name);
  },
};
Object.defineProperty(Person.prototype, "constructor", {
  enumerable: false,
  value: Person,
});

原型的动态性

因为从原型上搜索值的过程是动态的，所以即使实例在修改原型之前已经存在，任何时候对原型对象所做的修改也会在实例上反映出来。

• 简单来说就是定义实例之后，在原型上添加属性，通过实例仍然能够访问到。

function Person(){}
//
let p=new Person(){}
Person.prototype.sayHi=funciton(){
 console.log('hi~)
}
p.sayHi() // hi~     能够访问到不会报错


//重写原型之前创建会报错
#
let p=new Person(){}
Person.prototype={
 constructor:Person,
 name:'zhijian',
 age:'18',
 job:'coding',
 sayName(){
  console.log(this.name)
 }
}
p.sayName() //  报错

原生对象原型

原型模式之所以重要，不仅体现在自定义类型上，而且还因为它也是实现所有原生引用类型的模式。所有原生引用类型的构造函数（包括 Object、Array、String 等）都在原型上定义了实例方法。

比如：

• Array

  • sort()

• String

  • substring()

• 同样可以该方法给原生引用类型添加自定义方法（但是不建议）

原型中存在的问题

• 多个实例共享属性

继承

很多对象语言支持两种继承：接口继承和实现继承。前者只继承方法签名，后者继承实际的方法。

实现继承是 ESMAScript 唯一支持的继承方式，主要通过原型链实现。

原型链继承

基本思想：通过原型继承多个引用类型的属性和方法

function Father() {
  this.hobby = ["coding", "eat"];
}
Father.prototype.skill = function() {
  console.log("i will javascript");
};
function Son() {}
Son.prototype = new Father();

• 注意：原型中的引用对象会被所有的实例共享
• 子类有时候需要覆盖父类的方法，或者增加父类没有的方法。为此，这些方法必须在原型赋值之后再添加到原型上

function Father() {
  this.hobby = ["coding", "eat"];
}
Father.prototype.skill = function() {
  console.log("i will javascript");
};
function Son() {}
Son.prototype = new Father();
Son.prototypr.sonSkill = function() {
  console.log("eat");
};

确定原型与实例关系

• instanceof
• isPrototypeOf() 原型链中包含改原型就返回 true

借用构造函数继承

基本思想：在子类构造函数中调用父类构造函数

• 存在问题：方法定义子在构造函数内，因此每次创建子类实例都会创建一边方法

function Father(name) {
  this.name = name;
  this.sayNmae = function() {
    return this.name;
  };
}

function Son(name, age) {
  Father.call(this, name);
  this.age = age;
}
Son.prototype = new Father();

组合继承

基本思想：综合原型链和借用构造函数继承，将两者结合起来。

function Father(name) {
  this.name = name;
}
Father.prototype.sayName = function() {
  return this.name;
};

function Son(name, age) {
  //继承属性
  Father.call(this, name);
  this.age = age;
}
//继承方法
Son.prototype = new Father();

原型式继承

//根本是对传入的对象进行一个浅复制。
function object(o){
 function F(){}
 F.prototype=o
 return New F()
}

寄生式继承

基本思想：创建一个实现继承的函数，以某种方式增强对象，然后返回这个对象。

function createAnother(o) {
  let clone = object(o);
  clone.sayHi = function() {
    console.log("hi");
  };
  return clone;
}

寄生式组合继承

//寄生组合继承
// 组合继承会导致调用两次父类构造函数
function Father(name) {
  this.name = name;
}
Father.prototype.sayName = function() {
  return this.name;
};

function Son(name, age) {
  Father.call(this, name);
  this.age = age;
}

Son.prototype = Object.create(Father.prototype);
Son.prototype.constructor = Son;

类

ES6 引入 class 关键字，具有正式定义类的能力。

定义类

//类声明
class Person {}
//类表达式
const Animal = class {};

与函数表达式类似，类表达式在它们被求值前也不能引用。不过，与函数定义不同的是，虽然函数声明可以提升，但类定义不能

另一个跟函数声明不同的地方是，函数受函数作用域限制，而类受块作用域限制

类的构成

• 构造函数方法
• 实例方法
• 获取函数方法
• 设置函数方法
• 静态类方法

//空类定义
class Foo {}

//有构造函数的类
class Bar {
  constructor() {}
}
//有获取函数的类
class Baz {
  get myBaz() {}
}

//有静态方法的类
class Qux {
  static myQux() {}
}

类构造函数

constructor 关键字用于在类定义块内部创建类的构造函数。方法名 constructor 会告诉解释器在使用 new 操作符创建类的新实例时，应该调用这个函数。

实例化

• 使用 new 操作符实例化，相当于使用 new 调用其构造函数

class Person {
  constructor(name) {
    console.log("console:", name);
    this.name = name;
  }
}
let p = new Person("zhijian"); // console:zhijian
console.log(p.name); //zhijian

默认情况下，类构造函数会在执行之后返回 this 对象，构造函数返回的对象会被用作实例化的对象。

如果返回的不是 this 对象，而是其他对象，则该对象不会通过 instanceof 操作符检测出给类有关联。

类构造函数与构造函数的区别：

• 调用构造函数必须使用 new 操作符，否则会报错
• 普通构造函数不实用 new，则会以全局的 this 作为内部对象

把类当成特殊函数

ECMAScript 类就是一种特殊函数。声明一个类之后，通过 typeof 操作符检测类标识符，表明它是一个函数

class Person{}
console.log(Person)
console.log(typeof Person) function

• 类标识符 有 prototype 属性，而这个原型也有 constructor 属性，指向自身
• 类可以使用 instanceof 操作符检查构造函数原型是否存在于实例的原型链中
• 类中定义的 constructor 方法不会被当成构造函数

实例，原型和类成员

实例成员

• 每个实例都对应一个唯一的成员对象。所有成员都不会在原型上共享 原型方法与访问器
• 为了在实例间共享方法，类定于语法把在类块中定义的方法作为原型方法。
• 在 constructor 上添加的内容会存在于不同的实例上
• 在类块中定义的所有内容都会定义在类的原型上

class Person {
  constructor() {
    this.test = () => {
      console.log("heihei");
    };
  }
  test() {
    console.log("prototype");
  }
}

let p = new Person();
p.test(); //heihei
Person.prototype.test(); //prototype

• 可以把方法定义在类构造函数中或者类块中，但是不能在类块中给原型添加原始值或者对象作为成员数据。
• 类方法等同于对象属性，因此可以使用字符串，符号（Symbol）或者计算的值作为健。
• 类定义支持获取和设置访问器

class Person {
  set name(newName) {
    this.name_ = newName;
  }
  get name() {
    return this.name_;
  }
}

静态类方法

在类上定义静态方法，静态类成员在类定义中使用 statice 关键字作为前缀。在静态成员中，this 引用类自身

class Person {
  constructor() {
    this.test = () => {
      console.log("heihei");
    };
  }
  test() {
    console.log("prototype");
  }
  static test() {
    console.log("static");
  }
}

let p = new Person();
p.test(); //heihei
Person.prototype.test(); //prototype
Person.test(); //static

非函数原型和类成员

类定义并不显式支持在原型或者类上添加成员数据，但在类定义外部，可以手动添加

迭代器和生成器方法

• 类定义语法支持在原型和类本身（static）上定义生成器方法
• 因为支持生成器方法，所以可以通过添加一个默认的迭代器，把类实例变成可迭代对象

class Person{
//在原型上定义生成器方法
 * createTestIterator(){
  yield '123'
  yield '456'
  yield '789'
 }
 //在类本身上定义生成器方法
 static *createTest2Iterator(){
  yield 'abc'
  yield 'def'
  yield 'ghi'
 }

 //添加默认迭代器
class Person{
 constructor(){
  this.nicknames=['zhijian','yewen','yevin']
 }

 *[Symbol.iterator](){
  yeild * this.nicknames.entries()
 }
}
let p=new Person()
for (let [index,nickname] of p){
 console.log(nickname)
}
//zhijian
//yewen
//yevin

继承

类继承使用的是新语法，但是背后依旧使用的是原型链

继承基础

ES6 支持单继承，使用 extends 关键字就可以继承任何拥有构造函数和原型的对象。不仅可以继承一个类，也可以继承普通的构造函数。

class Father {}
class Son extends Father {}

let s = new Son();
console.log(s instanceof Son); //true
console.log(s instanceof Father); //true

//普通构造函数

function Father() {}
class Son extends Father {}
let s = new Son();
console.log(s instanceof Son); //true
console.log(s instanceof Father); //true

super()

• 派生类：利用继承机制，新的类可以从已有的类中派生。那些用于派生的类称为这些特别派生出的类的“基类”。

super(): 派生类可以通过该关键字引用他们的原型。注意：该关键字只能在派生类中使用。而且仅限于类构造函数，实例方法和静态方法内部。 在类构造函数中使用 super 可以调用父类构造函数

class Father {
  constructor() {
    this.name = "zhijian";
  }
}
class Son extends Father {
  constructor() {
    super(); //相当于super.constructor()
  }
}

let s = new Son();
console.log(s.name); //zhijian

在静态方法中可以通过 super 调用继承的类上定义的静态方法

class Father {
  constructor() {
    this.name = "zhijian";
  }
  static test() {
    console.log("test"); //test
  }
}
class Son extends Father {
  static test1() {
    super.test();
  }
}
Son.test1(); //test

抽象基类

定义一个类，可供其他类继承，但是本身不会被实例化。

//抽象基类
class Father {
  constructor() {
    if (new.targer === Father) {
      throw new Error("Father cannot be directly instantiated");
    }
  }
}

class Son extends Father {}
new Son();
new Father(); //会报错

继承内置类型

ES6 类 为继承内置引用类型提供了顺畅的机制，开发者可以方便的扩展内置类型。

class SuperArray extends Array {
  //洗牌算法
  shuffle() {
    for (let i = this.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [this[i], this[j]] = [this[j], this[i]];
    }
  }
}

let arr = new SuperArray(1, 2, 3, 4, 5);
console.log(arr); //[1,2,3,4,5]
arr.shuffle();
console.log(arr);

类混入

JS 里的 class 和函数一样，都是高阶的，也就是它可以作为参数，也可以作为返回值

注意

很多 JavaScript 框架（特别是 React）已经抛弃混入模式，转向了组合模式（把方法提取到独立的类和辅助对象中，然后把它们组合起来，但不使用继承）。这反映了那个众所周知的软件设计原则：“组合胜过继承（compositionover inheritance）。”这个设计原则被很多人遵循，在代码设计中能提供极大的灵活性。

代理与反射

ECMAScript 6 新增的代理和反射为开发者提供了拦截并向基本操作嵌入额外行为的能力。具体地说，可以给目标对象定义一个关联的代理对象，而这个代理对象可以作为抽象的目标对象来使用。在对目标对象的各种操作影响目标对象之前，可以在代理对象中对这些操作加以控制

缺点：

• 不支持向后兼容

优点：

• 通过捕获器，可以拦截 JS 绝大部分基本操作和方法，在遵从捕获器不变式的情况下，可以修改任何基本操作。

应用场景： 通过代理，可以创造出各种编码模式，比如跟踪你属性访问，隐藏属性，阻止修改或者删除属性，函数参数验证，数据绑定。

代理基础

代理：

• 目标对象的抽象
• 目标对象既可以直接被操作，也可以通过代理来操作

创建代理

• 使用 Proxy 构造函数创建,构造函数接受两个参数：
  • 目标对象
  • 处理程序对象
• 两个参数缺一不可，不然会报错
• 如果创建空代理，可以传一个{}

创建空代理

const target = {
  id: "target",
};
const proxy = new Proxy(target, {});

console.log(target.id); // target
console.log(proxy.id); // target

target.id = "zhijian";
console.log(target.id); //zhijian
console.log(proxy.id); //zhijian

proxy.id = "yewen";
console.log(target.id); //yewen
console.log(proxy.id); //yewen

定义捕获器

捕获器：在处理程序对象中定义的基本操作拦截器

• 每个捕获器都对应一种基本操作，可以直接或者间接在代理对象上调用
• 每次在代理对象上调用这些基本操作时，代理可以在这些操作传播到目标对象之前先调用捕获器函数，从而拦截并修改响应的行为。

定义一个get()捕获器：

• 当通过代理对象执行 get 操作时，就会触发定义的 get 捕获器
• JavaScript 代码中可以通过多种形式触发并被 get 捕获器拦截到
  • proxy[property]
  • proxy.property
  • Object.create(proxy)[property]
  • 等等
    点击查看代码

const target = {
  foo: "bar",
};
const handler = {
  get() {
    return "get捕获器";
  },
};
const proxy = new Proxy(target, handler);

console.log(proxy.foo); //get捕获器
console.log(target.foo); //bar