对象、类与面向对象编程

理解对象

属性的类型

ECMA-262 使用一些内部特性来描述属性的特征。这些特性是由为 JavaScript 实现引擎的规范定义的。因此，开发者不能在 JavaScript 中直接访问这些特性。为了将某个特性标识为内部特性，规范会用两个中括号把特性的名称括起来，比如[[Enumerable]]。属性分两种：数据属性和访问器属性。

1. 数据属性
   数据属性有 4个特性描述它们的行为。
   [[Configurable]]：表示属性是否可以通过 delete 删除并重新定义，是否可以修改它的特性，以及是否可以把它改为访问器属性。默认情况下，所有直接定义在对象上的属性的这个特性都是 true
   [[Enumerable]]：表示属性是否可以通过 for-in 循环返回。默认情况下，所有直接定义在对象上的属性的这个特性都是 true
   [[Writable]]：表示属性的值是否可以被修改。默认情况下，所有直接定义在对象上的属性的这个特性都是 true
   [[Value]]：包含属性实际的值。这就是前面提到的那个读取和写入属性值的位置。这个特性的默认值为 undefined。
   即：将属性显式添加到对象之后，[[Configurable]]、[[Enumerable]]和[[Writable]]都会被设置为 true，而[[Value]]特性会被设置为指定的值。比如：

   let person = { 
   name: "Nicholas" 
   };

要修改属性的默认特性，就必须使用 Object.defineProperty()方法。这个方法接收 3 个参数：要给其添加属性的对象、属性的名称和一个描述符对象。最后一个参数，即描述符对象上的属性可以包含：configurable、enumerable、writable 和 value，跟相关特性的名称一一对应。根据要修改的特性，可以设置其中一个或多个值。比如：

let person = {}; 
Object.defineProperty(person, "name", { 
writable: false, 
value: "Nicholas" 
}); 
console.log(person.name); // "Nicholas" 
person.name = "Greg"; 
console.log(person.name); // "Nicholas"

这个例子创建了一个名为 name 的属性并给它赋予了一个只读的值"Nicholas"。这个属性的值就不能再修改了（因为：writable: false ），在非严格模式下尝试给这个属性重新赋值会被忽略。在严格模式下，尝试修改只读属性的值会抛出错误。
类似:

let person = {}; 
Object.defineProperty(person, "name", { 
configurable: false, 
value: "Nicholas" 
}); 
console.log(person.name); // "Nicholas" 
delete person.name; 
console.log(person.name); // "Nicholas"

把 configurable 设置为 false，意味着这个属性不能从对象上删除。非严格模式下对这个属性调用 delete 没有效果，严格模式下会抛出错误。此外，一个属性被定义为不可配置之后，就不能再变回可配置的了。再次调用 Object.defineProperty()并修改任何非 writable 属性会导致错误：

let person = {}; 
Object.defineProperty(person, "name", { 
configurable: false, 
value: "Nicholas" 
}); 

// 抛出错误 !!!! configurable 配置了false之后就不可以再更改了
Object.defineProperty(person, "name", { 
configurable: true, 
value: "Nicholas" 
});

2. 访问器属性

访问器属性不包含数据值。相反，它们包含一个获取（getter）函数和一个设置（setter）函数，不过这两个函数不是必需的。
访问器属性有 4 个特性描述它们的行为。
[[Configurable]]：表示属性是否可以通过 delete 删除并重新定义，是否可以修改它的特性，以及是否可以把它改为数据属性。默认情况下，所有直接定义在对象上的属性的这个特性都是 true。
[[Enumerable]]：表示属性是否可以通过 for-in 循环返回。默认情况下，所有直接定义在对象上的属性的这个特性都是 true。
[[Get]]：获取函数，在读取属性时调用。默认值为 undefined。
[[Set]]：设置函数，在写入属性时调用。默认值为 undefined。
访问器属性是不能直接定义的，必须使用 Object.defineProperty()。下面是一个例子：

// 定义一个对象，包含伪私有成员 year_和公共成员 edition 
let book = { 
year_: 2017, 
edition: 1
};

Object.defineProperty(book, "year", { 
get() { 
return this.year_; 
}, 
set(newValue) { 
if (newValue > 2017) { 
this.year_ = newValue; 
this.edition += newValue - 2017; 
} 
} 
}); 
book.year = 2018; 
console.log(book.edition); // 2

在不支持 Object.defineProperty()的浏览器中没有办法修改[[Configurable]]或[[Enumerable]]。

定义多个属性

ECMAScript 提供了 Object.defineProperties()方法。这个方法可以通过多个描述符一次性定义多个属性。它接收两个参数：要为之添加或修改属性的对象和另一个描述符对象，其属性与要添加或修改的属性一一对应。

读取属性的特性

Object.getOwnPropertyDescriptor()方法可以取得指定属性的属性描述符。这个方法接收两个参数：属性所在的对象和要取得其描述符的属性名。

let book = {}; 
Object.defineProperties(book, { 
year_: { //数据属性 year_ year_中的下划线常用来表示该属性并不希望在对象方法的外部被访问
 value: 2017 
},

edition: { 
value: 1 
},

year: { //访问器属性 year
 get() { 
return this.year_; 
},
set(newValue) { 
if (newValue > 2017) { 
this.year_ = newValue; 
this.edition += newValue - 2017; 
} 
} 
} 
});

let descriptor = Object.getOwnPropertyDescriptor(book, "year_");
console.log(descriptor) //{value: 2017, writable: false, enumerable: false, configurable: false}
let descriptor = Object.getOwnPropertyDescriptor(book, "year");
console.log(descriptor) //{enumerable: false, configurable: false, get: f, set: f}

ECMAScript 2017 新增了 Object.getOwnPropertyDescriptors()静态方法。这个方法实际上会在每个自有属性上调用 Object.getOwnPropertyDescriptor()并在一个新对象中返回它们。

合并对象

ECMAScript 6 专门为合并对象提供了 Object.assign()方法。这个方法接收一个目标对象和一个或多个源对象作为参数，然后将每个源对象中可枚举（Object.propertyIsEnumerable()返回 true）和自有（Object.hasOwnProperty()返回 true）属性复制到目标对象。以字符串和符号为键的属性会被复制。对每个符合条件的属性，这个方法会使用源对象上的[[Get]]取得属性的值，然后使用目标对象上的[[Set]]设置属性的值。

//简单复制
dest = {}; 
src = { id: 'src' }; 
result = Object.assign(dest, src);

// Object.assign 修改目标对象
// 也会返回修改后的目标对象
console.log(dest === result); // true 
console.log(dest !== src); // true 
console.log(result); // { id: src } 
console.log(dest); // { id: src }

- 多个源对象
  */

dest = {}; 
result = Object.assign(dest, { a: 'foo' }, { b: 'bar' }); 
console.log(result); // { a: foo, b: bar }

/**

- 获取函数与设置函数
  */

dest = { 
set a(val) { 
console.log(Invoked dest setter with param ${val}); 
} 
};

src = { 
get a() { 
console.log('Invoked src getter'); 
return 'foo'; 
} 
};

Object.assign(dest, src); 
// 调用 src 的获取方法
// 调用 dest 的设置方法并传入参数"foo" 
// 因为这里的设置函数不执行赋值操作
// 所以实际上并没有把值转移过来
console.log(dest); // Invoked src getter
 Invoked dest setter with param foo
 {}

Object.assign()实际上对每个源对象执行的是浅复制。如果多个源对象都有相同的属性，则使用最后一个复制的值。此外，从源对象访问器属性取得的值，比如获取函数，会作为一个静态值赋给目标对象。换句话说，不能在两个对象间转移获取函数和设置函数。

//覆盖属性

dest = { id: 'dest' }; 
result = Object.assign(dest, { id: 'src1', a: 'foo' }, { id: 'src2', b: 'bar' }); 
// Object.assign 会覆盖重复的属性
console.log(result); // { id: src2, a: foo, b: bar }

// 可以通过目标对象上的设置函数观察到覆盖的过程：
dest = { 
set id(x) { 
console.log(x); 
} 
}; 
Object.assign(dest, { id: 'first' }, { id: 'second' }, { id: 'third' }); 
// first 
// second 
// third

//对象引用 => 浅拷贝

dest = {}; 
src = { a: {} }; 
Object.assign(dest, src); 
// 浅复制意味着只会复制对象的引用
console.log(dest); // { a :{} } 
console.log(dest.a === src.a); // true

如果赋值期间出错，则操作会中止并退出，同时抛出错误。Object.assign()没有“回滚”之前赋值的概念，因此它是一个尽力而为、可能只会完成部分复制的方法。

对象标识及相等判定

在 ECMAScript 6 之前，有些特殊情况即使是===操作符也无能为力：

// 这些是===符合预期的情况
console.log(true === 1); // false 
console.log({} === {}); // false 
console.log("2" === 2); // false

// 这些情况在不同 JavaScript 引擎中表现不同，但仍被认为相等
console.log(+0 === -0); // true 
console.log(+0 === 0); // true 
console.log(-0 === 0); // true

// 要确定 NaN 的相等性，必须使用极为讨厌的 isNaN() 
console.log(NaN === NaN); // false 
console.log(isNaN(NaN)); // true

为改善这类情况，ECMAScript 6 规范新增了 Object.is()，这个方法与===很像，但同时也考虑到了上述边界情形。这个方法必须接收两个参数：

console.log(Object.is(true, 1)); // false 
console.log(Object.is({}, {})); // false 
console.log(Object.is("2", 2)); // false

// 正确的 0、-0、+0 相等/不等判定
console.log(Object.is(+0, -0)); // false 
console.log(Object.is(+0, 0)); // true 
console.log(Object.is(-0, 0)); // false

// 正确的 NaN 相等判定
console.log(Object.is(NaN, NaN)); // true

//要检查超过两个值，递归地利用相等性传递即可

function recursivelyCheckEqual(x, ...rest) { 
return Object.is(x, rest[0]) && 
(rest.length < 2 || recursivelyCheckEqual(...rest)); 
}

增强的对象语法

1. 属性值简写
   在给对象添加变量的时候，开发者经常会发现属性名和变量名是一样的。例如：

let name = 'Matt'; 
let person = { 
name: name 
}; 
console.log(person); // { name: 'Matt' }

简写属性名只要使用变量名（不用再写冒号）就会自动被解释为同名的属性键。如果没有找到同名变量，则会抛出 ReferenceError。
以下代码和之前的代码是等价的：

let name = 'Matt'; 
let person = { 
name 
}; 
console.log(person); // { name: 'Matt' }

2. 可计算属性
   在引入可计算属性之前，如果想使用变量的值作为属性，那么必须先声明对象，然后使用中括号语法来添加属性。换句话说，不能在对象字面量中直接动态命名属性。比如：

const nameKey = 'name'; 
const ageKey = 'age';
const jobKey = 'job';

let person = {}; 
person.nameKey = 'Matt'; 
person.ageKey = 27; 
person.jobKey = 'Software engineer'; 
console.log(person); // { name: 'Matt', age: 27, job: 'Software engineer' }

有了可计算属性，就可以在对象字面量中完成动态属性赋值。中括号包围的对象属性键告诉运行时将其作为 JavaScript 表达式而不是字符串来求值：

const nameKey = 'name'; 
const ageKey = 'age'; 
const jobKey = 'job'; 
let person = { 
[nameKey]: 'Matt', 
[ageKey]: 27, 
[jobKey]: 'Software engineer' 
}; 
console.log(person); // { name: 'Matt', age: 27, job: 'Software engineer' }

因为被当作 JavaScript 表达式求值，所以可计算属性本身可以是复杂的表达式，在实例化时再求值：

const nameKey = 'name'; 
const ageKey = 'age'; 
const jobKey = 'job'; 
let uniqueToken = 0; 
function getUniqueKey(key) { 
return `{key}_{uniqueToken++}`; 
} 
let person = { 
[getUniqueKey(nameKey)]: 'Matt', 
[getUniqueKey(ageKey)]: 27, 
[getUniqueKey(jobKey)]: 'Software engineer' 
}; 
console.log(person); // { name_0: 'Matt', age_1: 27, job_2: 'Software engineer' }

3. 简写方法名

对象解构

// 使用对象解构
let person = { 
name: 'Matt', 
age: 27 
};

let { name: personName, age: personAge } = person; 
console.log(personName); // Matt 
console.log(personAge); // 27

使用解构，可以在一个类似对象字面量的结构中，声明多个变量，同时执行多个赋值操作。如果想让变量直接使用属性的名称，那么可以使用简写语法，比如

let person = { 
name: 'Matt', 
age: 27 
}; 
let { name, age } = person;

console.log(name); // Matt 
console.log(age); // 27

//引用的属性不存在
let person = { 
name: 'Matt', 
age: 27 
}; 
let { name, job } = person;

console.log(name); // Matt 
console.log(job); // undefined

//解构赋值的同时定义默认值
let person = { 
name: 'Matt', 
age: 27 
}; 
let { name, job='Software engineer' } = person;

console.log(name); // Matt 
console.log(job); // Software engineer

null和 undefined 不能被解构，否则会抛出错误。

1. 嵌套解构
   解构对于引用嵌套的属性或赋值目标没有限制。为此，可以通过解构来复制对象属性：

let person = { 
name: 'Matt', 
age: 27, 
job: { 
title: 'Software engineer' 
} 
}; 
let personCopy = {};

({ 
name: personCopy.name, 
age: personCopy.age, 
job: personCopy.job 
} = person);

// 因为一个对象的引用被赋值给 personCopy，所以修改
// person.job 对象的属性也会影响 personCopy

person.job.title = 'Hacker' // 或者 personCopy.job.title = 'Hacker' 两个对象的title都会变化，对象的引用是同一个

console.log(person); 
// { name: 'Matt', age: 27, job: { title: 'Hacker' } } 
console.log(personCopy); 
// { name: 'Matt', age: 27, job: { title: 'Hacker' } }

在外层属性没有定义的情况下不能使用嵌套解构。无论源对象还是目标对象都一样

2. 部分解构
   涉及多个属性的解构赋值是一个输出无关的顺序化操作。如果一个解构表达式涉及多个赋值，开始的赋值成功而后面的赋值出错，则整个解构赋值只会完成一部分

let person = { 
name: 'Matt', 
age: 27 
}; 
let personName, personBar, personAge; 
try { 
// person.foo 是 undefined，因此会抛出错误
 ({name: personName, foo: { bar: personBar }, age: personAge} = person); 
} catch(e) {} 
console.log(personName, personBar, personAge); 
// Matt, undefined, undefined

3. 参数上下文匹配
   在函数参数列表中也可以进行解构赋值。对参数的解构赋值不会影响 arguments 对象，但可以在函数签名中声明在函数体内使用局部变量：

let person = { 
name: 'Matt', 
age: 27 
};

function printPerson(foo, {name, age}, bar) { 
console.log(arguments); 
console.log(name, age); 
}

function printPerson2(foo, {name: personName, age: personAge}, bar) { 
console.log(arguments); 
console.log(personName, personAge); 
}

printPerson('1st', person, '2nd'); 
// ['1st', { name: 'Matt', age: 27 }, '2nd'] 
// 'Matt', 27 
printPerson2('1st', person, '2nd'); 
// ['1st', { name: 'Matt', age: 27 }, '2nd'] 
// 'Matt', 27

创建对象

工厂模式

工厂模式虽然可以解决创建多个类似对象的问题，但没有解决对象标识问题（即新创建的对象是什么类型）。

构造函数模式

构造函数的主要问题在于，其定义的方法会在每个实例上都创建一遍。
因为都是做一样的事，所以没必要定义两个不同的 Function 实例。况且，this 对象可以把函数与对象的绑定推迟到运行时。
要解决这个问题，可以把函数定义转移到构造函数外部：

function Person(name, age, job){ 
this.name = name; 
this.age = age; 
this.job = job; 
this.sayName = sayName; 
}

function sayName() { //全局下的 sayName ，这样就只有一个，不是每个实例一个
 console.log(this.name); 
}

let person1 = new Person("Nicholas", 29, "Software Engineer"); 
let person2 = new Person("Greg", 27, "Doctor"); 
person1.sayName(); // Nicholas 
person2.sayName(); // Greg

但这会导致自定义类型引用的代码不能很好地聚集一起。这个新问题可以通过原型模式来解决。

原型模式

1. 理解原型
   每个函数都会创建一个 prototype 属性，这个属性是一个对象，包含应该由特定引用类型的实例共享的属性和方法。
   ECMAScript 的 Object 类型有一个方法叫 Object.getPrototypeOf()，返回参数的内部特性[[Prototype]]的值。
   Object 类型还有一个 setPrototypeOf()方法，可以向实例的私有特性[[Prototype]]写入一个新值。这样就可以重写一个对象的原型继承关系
   warn：Object.setPrototypeOf()可能会严重影响代码性能。Mozilla 文档说得很清楚：“在所有浏览器和 JavaScript 引擎中，修改继承关系的影响都是微妙且深远的。这种影响并不仅是执行 Object.setPrototypeOf()语句那么简单，而是会涉及所有访问了那些修改过[[Prototype]]的对象的代码。”
   为避免使用 Object.setPrototypeOf()可能造成的性能下降，可以通过 Object.create()来创建一个新对象，同时为其指定原型：

let biped = { 
numLegs: 2 
};

let person = Object.create(biped);

person.name = 'Matt'; 
console.log(person.name); // Matt 
console.log(person.numLegs); // 2 
console.log(Object.getPrototypeOf(person) === biped); // true

2. 原型层级
   搜索开始于对象实例本身。如果在这个实例上发现了给定的名称，则返回该名称对应的值。如果没有找到这个属性，则搜索会沿着指针进入原型对象，然后在原型对象上找到属性后，再返回对应的值。
   hasOwnProperty()方法用于确定某个属性是在实例上还是在原型对象上。这个方法是继承自 Object的，会在属性存在于调用它的对象实例上时返回 true

function Person() {} 
Person.prototype.name = "Nicholas";
Person.prototype.age = 29; 
Person.prototype.job = "Software Engineer"; 
Person.prototype.sayName = function() { 
console.log(this.name); 
};

let person1 = new Person(); 
let person2 = new Person(); 
console.log(person1.hasOwnProperty("name")); // false

person1.name = "Greg"; 
console.log(person1.name); // "Greg"，来自实例
console.log(person1.hasOwnProperty("name")); // true 
console.log(person2.name); // "Nicholas"，来自原型
console.log(person2.hasOwnProperty("name")); // false

delete person1.name; 
console.log(person1.name); // "Nicholas"，来自原型
console.log(person1.hasOwnProperty("name")); // false

3. 原型和 in 操作符
   在单独使用时，in 操作符会在可以通过对象访问指定属性时返回 true，无论该属性是在实例上还是在原型上。
   如果要确定某个属性是否存在于原型上，则可以像下面这样同时使用 hasOwnProperty()和 in 操作符：

function hasPrototypeProperty(object, name){ 
return !object.hasOwnProperty(name) && (name in object); //true 就说明是原型上的，不是实例的属性
}

在 for-in 循环中使用 in 操作符时，可以通过对象访问且可以被枚举的属性都会返回，包括实例属性和原型属性。遮蔽原型中不可枚举（[[Enumerable]]特性被设置为 false）属性的实例属性也会在 for-in 循环中返回，因为默认情况下开发者定义的属性都是可枚举的。
要获得对象上所有可枚举的实例属性，可以使用 Object.keys()方法。这个方法接收一个对象作为参数，返回包含该对象所有可枚举属性名称的字符串数组。

function Person() {} 
Person.prototype.name = "Nicholas"; 
Person.prototype.age = 29; 
Person.prototype.job = "Software Engineer"; 
Person.prototype.sayName = function() { 
console.log(this.name); 
}; 
let keys = Object.keys(Person.prototype); 
console.log(keys); // ["name", "age", "job", "sayName"]
let p1 = new Person(); 
p1.name = "Rob"; 
p1.age = 31; 
let p1keys = Object.keys(p1); 
console.log(p1keys); // ["name", "age"]

如果想列出所有实例属性，无论是否可以枚举，都可以使用 Object.getOwnPropertyNames()：

let keys = Object.getOwnPropertyNames(Person.prototype); 
console.log(keys); // ["constructor", "name", "age", "job", "sayName"]

返回的结果中包含了一个不可枚举的属性 constructor。Object.keys()和 Object. getOwnPropertyNames()在适当的时候都可用来代替 for-in 循环。
在 ECMAScript 6 新增符号类型之后，因为以符号为键的属性没有名称的概念，因此，Object.getOwnPropertySymbols()方法就出现了，这个方法与 Object.getOwnPropertyNames()类似，只是针对符号而。

4. 属性枚举顺序
   for-in 循环、Object.keys()、Object.getOwnPropertyNames()、Object.getOwnPropertySymbols()以及 Object.assign()在属性枚举顺序方面有很大区。for-in 循环和 Object.keys()的枚举顺序是不确定的，取决于 JavaScript 引擎，可能因浏览器而异。
   Object.getOwnPropertyNames()、Object.getOwnPropertySymbols()和 Object.assign()的枚举顺序是确定性的。先以升序枚举数值键，然后以插入顺序枚举字符串和符号键。在对象字面量中定义的键以它们逗号分隔的顺序插入。

let k1 = Symbol('k1'), 
k2 = Symbol('k2');

let o = { 
1: 1, 
first: 'first', 
[k1]: 'sym2', 
second: 'second', 
0: 0 
};

o[k2] = 'sym2'; 
o[3] = 3; 
o.third = 'third'; 
o[2] = 2;

console.log(Object.getOwnPropertyNames(o)); 
// ["0", "1", "2", "3", "first", "second", "third"]

console.log(Object.getOwnPropertySymbols(o)); 
// [Symbol(k1), Symbol(k2)]

对象迭代

ECMAScript 2017 新增了两个静态方法，用于将对象内容转换为序列化的——更重要的是可迭代的——格式。这两个静态方法Object.values()和 Object.entries()接收一个对象，返回它们内容的数组。Object.values()返回对象值的数组，Object.entries()返回键/值对的数组。
注意，非字符串属性会被转换为字符串输出。另外，这两个方法执行对象的浅复制，符号属性会被忽略

1. 其他原型语法

function Person() {} 
Person.prototype = { //prototype赋值是要十分注意的操作，改变constructor指向
 //constructor: Person, 如果 constructor 的值很重要，则可以像下面这样在重写原型对象时专门设置一下它的值
 name: "Nicholas", 
age: 29, 
job: "Software Engineer", 
sayName() { 
console.log(this.name); 
} 
};

该例子中：其 constructor 属性也指向了完全不同的新对象（Object 构造函数），不再指向原来的构造函数。可以自己恢复下constructor指向
但要注意，以这种方式恢复 constructor 属性会创建一个[[Enumerable]]为 true 的属性。而原生 constructor 属性默认是不可枚举的。（区别）
所以，如果要完全恢复成原始的不可枚举的constructor指向的话，如下：

function Person() {} 
Person.prototype = { 
name: "Nicholas", 
age: 29, 
job: "Software Engineer", 
sayName() { 
console.log(this.name); 
} 
}; 
// 恢复 constructor 属性
Object.defineProperty(Person.prototype, "constructor", { 
enumerable: false, //默认就是不可枚举的，修改回去  
 value: Person 
});

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

let friend = new Person(); 
Person.prototype.sayHi = function() { 
console.log("hi"); 
}; 
friend.sayHi(); // "hi"

但！

function Person() {} 
let friend = new Person(); 
Person.prototype = { 
constructor: Person, 
name: "Nicholas", 
age: 29, 
job: "Software Engineer", 
sayName() { 
console.log(this.name); 
} 
}; 
friend.sayName(); // 错误

因为：实例原型跟重写整个原型是两回事。实例的[[Prototype]]指针是在调用构造函数时自动赋值的，这个指针即使把原型修改为不同的对象也不会变。重写整个原型会切断最初原型与构造函数的联系，但实例引用的仍然是最初的原型。记住，实例只有指向原型的指针，没有指向构造函数的指针。

3. 原生对象原型
   所有原生引用类型的构造函数（包括 Object、Array、String 等）都在原型上定义了实例方法。比如，数组实例的 sort()方法就是 Array.prototype 上定义的，而字符串包装对象的 substring()方法也是在 String.prototype 上定义的，通过原生对象的原型可以取得所有默认方法的引用，也可以给原生类型的实例定义新的方法。
   warn：并不推荐在产品环境中修改原生对象原型。这样做很可能造成误会，而且可能引发命名冲突（比如一个名称在某个浏览器实现中不存在，在另一个实现中却存在）。另外还有可能意外重写原生的方法。推荐的做法是创建一个自定义的类，继承原生类型。
4. 原型的问题
   首先，它弱化了向构造函数传递初始化参数的能力，会导致所有实例默认都取得相同的属性值。
   主要问题源自它的共享特性。这对函数来说比较合适，另外包含原始值的属性也还好，真正的问题来自包含引用值的属性。来看下面的例子：

function Person() {} 
Person.prototype = { 
constructor: Person, 
name: "Nicholas", 
age: 29, 
job: "Software Engineer", 
friends: ["Shelby", "Court"],
sayName() { 
console.log(this.name); 
} 
};

let person1 = new Person(); 
let person2 = new Person(); 
person1.friends.push("Van"); 
console.log(person1.friends); // "Shelby,Court,Van" 
console.log(person2.friends); // "Shelby,Court,Van" 
console.log(person1.friends === person2.friends); // true

一般来说，不同的实例应该有属于自己的属性副本，这里不同的实例共享了引用类型的数组，这就是实际开发中通常不单独使用原型模式的原因。

继承

很多面向对象语言都支持两种继承：接口继承和实现继承。前者只继承方法签名，后者继承实际的方法。接口继承在 ECMAScript 中是不可能的，因为函数没有签名。实实现继承是 ECMAScript 唯一支持的继承方式，而这主要是通过原型链实现的。

原型链

这个原型本身有一个内部指针指向另一个原型，相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。这就是原型链的基本构想。
继承机制模拟：

function SuperType() { 
this.property = true; 
}

SuperType.prototype.getSuperValue = function() { 
return this.property; 
};

function SubType() { 
this.subproperty = false; 
}

// 继承 SuperType 
SubType.prototype = new SuperType(); //SubType 通过创建 SuperType 的实例并将其赋值给自己的原型 SubTtype.
SubType.prototype.getSubValue = function () {
 return this.subproperty; 
};

let instance = new SubType(); 
console.log(instance.getSuperValue()); // true

1. 默认原型
2. 原型与继承关系
   第一种方式是使用 instanceof 操作符。
   第二种方式是使用 isPrototypeOf()方法。
3. 关于方法
   以对象字面量方式创建原型方法会破坏之前的原型链，因为这相当于重写了原型链。下面是一个例子：

falseunction SuperType() { 
this.property = true; 
} 
SuperType.prototype.getSuperValue = function() { 
return this.property; 
}; 
function SubType() { 
this.subproperty = false; 
}
// 继承 SuperType 
SubType.prototype = new SuperType();

// 通过对象字面量添加新方法，这会导致上一行无效
SubType.prototype = { 
getSubValue() { 
return this.subproperty; 
}, 
someOtherMethod() { 
return false; 
} 
}; 
let instance = new SubType(); 
console.log(instance.getSuperValue()); // 出错！

重写整个原型会切断最初原型与构造函数的联系，例子中SubType和 SuperType 之间也没有关系了。

4. 原型链的问题
   主要问题出现在原型中包含引用值的时候。
   即：原型中包含的引用值会在所有实例间共享，这也是为什么属性通常会在构造函数中定义而不会定义在原型上的原因。
   原型链的第二个问题是，子类型在实例化时不能给父类型的构造函数传参。

   盗用构造函数

   为了解决原型包含引用值导致的继承问题，一种叫作“盗用构造函数”（constructor stealing）的技术在开发社区流行起来（这种技术有时也称作“对象伪装”或“经典继承”）。
   基本思路很简单：在子类构造函数中调用父类构造函数。

function SuperType() { 
this.colors = ["red", "blue", "green"]; 
} 
function SubType() { 
// 继承 SuperType 
SuperType.call(this); //!!!妙啊，用父类的构造函数，只是让this指向指向实例，这样每个实例都有自己的构造属性，就不是用 同一个引用值的地址了
} 
let instance1 = new SubType(); 
instance1.colors.push("black"); 
console.log(instance1.colors); // "red,blue,green,black" 
let instance2 = new SubType(); 
console.log(instance2.colors); // "red,blue,green"

通过使用 call()（或 apply()）方法，SuperType构造函数在为 SubType 的实例创建的新对象的上下文中执行了。

1. 传递参数
   相比于使用原型链，盗用构造函数的一个优点就是可以在子类构造函数中向父类构造函数传参。来看下面的例子：

function SuperType(name){ 
this.name = name; 
} 
function SubType() { 
// 继承 SuperType 并传参
 SuperType.call(this, "Nicholas"); //盗用父类构造函数的同时，还可以传参
 // 实例属性
 this.age = 29; 
} 
let instance = new SubType(); 
console.log(instance.name); // "Nicholas"; 
console.log(instance.age); // 29

2. 盗用构造函数的问题
   主要缺点：必须在构造函数中定义方法，因此函数不能重用。此外，子类也不能访问父类原型上定义的方法，因此所有类型只能使用构造函数模式。

   组合继承

   组合继承（有时候也叫伪经典继承）综合了原型链和盗用构造函数，将两者的优点集中了起来。
   基本的思路是使用原型链继承原型上的属性和方法，而通过盗用构造函数继承实例属性。这样既可以把方法定义在原型上以实现重用，又可以让每个实例都有自己的属性。来看下面的例子：

function SuperType(name){ 
this.name = name; 
this.colors = ["red", "blue", "green"]; 
}

SuperType.prototype.sayName = function() { 
console.log(this.name); 
};

function SubType(name, age){ 
// 继承属性
 SuperType.call(this, name); 
this.age = age; 
}

// 继承方法
SubType.prototype = new SuperType();

SubType.prototype.sayAge = function() { 
console.log(this.age); 
};

let instance1 = new SubType("Nicholas", 29); 
instance1.colors.push("black"); 
console.log(instance1.colors); // "red,blue,green,black" 
instance1.sayName(); // "Nicholas"; 
instance1.sayAge(); // 29 
let instance2 = new SubType("Greg", 27); 
console.log(instance2.colors); // "red,blue,green" 
instance2.sayName(); // "Greg"; 
instance2.sayAge(); // 27

组合继承弥补了原型链和盗用构造函数的不足，是 JavaScript 中使用最多的继承模式。而且组合继承也保留了 instanceof 操作符和 isPrototypeOf()方法识别合成对象的能力。

原型式继承

介绍了一种不涉及严格意义上构造函数的继承方法。他的出发点是即使不自定义类型也可以通过原型实现对象之间的信息共享

function object(o) { //这个 object()函数会创建一个临时构造函数，将传入的对象赋值给这个构造函数的原型，然后返
 function F() {} //回这个临时类型的一个实例。本质上，object()是对传入的对象执行了一次浅复制。
 F.prototype = o; 
return new F(); 
}

原型式继承非常适合不需要单独创建构造函数，但仍然需要在对象间共享信息的场合。但要记住，属性中包含的引用值始终会在相关对象间共享，跟使用原型模式是一样的。

寄生式继承

寄生式继承背后的思路类似于寄生构造函数和工厂模式：创建一个实现继承的函数，以某种方式增强对象，然后返回这个对象。基本的寄生继承模式如下：

function createAnother(original){ 
let clone = object(original); // 通过调用函数创建一个新对象
 clone.sayHi = function() { // 以某种方式增强这个对象
 console.log("hi"); 
}; 
return clone; // 返回这个对象
}

寄生式继承同样适合主要关注对象，而不在乎类型和构造函数的场景。object()函数不是寄生式继承所必需的，任何返回新对象的函数都可以在这里使用。

寄生式组合继承

组合继承其实也存在效率问题。最主要的效率问题就是父类构造函数始终会被调用两次：一次在是创建子类原型时调用，另一次是在子类构造函数中调用。
寄生式组合继承通过盗用构造函数继承属性，但使用混合式原型链继承方法。
基本思路是不通过调用父类构造函数给子类原型赋值，而是取得父类原型的一个副本：

function inheritPrototype(subType, superType) { 
let prototype = Object(superType.prototype); // 创建对象
 prototype.constructor = subType; // 增强对象 
subType.prototype = prototype; // 赋值对象
}

这个 inheritPrototype()函数实现了寄生式组合继承的核心逻辑。这个函数接收两个参数：子类构造函数和父类构造函数。在这个函数内部，第一步是创建父类原型的一个副本。然后，给返回的prototype 对象设置 constructor 属性，解决由于重写原型导致默认 constructor 丢失的问题。最后将新创建的对象赋值给子类型的原型。
调用 inheritPrototype()就可以实现前面例子中的子类型原型赋值：

function SuperType(name) { 
this.name = name; 
this.colors = ["red", "blue", "green"]; 
} 
SuperType.prototype.sayName = function() { 
console.log(this.name); 
}; 
function SubType(name, age) { 
SuperType.call(this, name);
this.age = age; 
} 
inheritPrototype(SubType, SuperType); 
SubType.prototype.sayAge = function() { 
console.log(this.age); 
};

区分组合继承和寄生式组合继承的差别：

let instance1 = new SubType('hyh1',22)
console.log(instance1)
console.log(instance1.__proto__)

let instance2 = new SuperType('hyh2')
console.log(instance2)
console.log(instance2.__proto__)

//组合继承：
SubType {name: "hyh1", colors: Array(3), age: 22}
SuperType {name: undefined, colors: Array(3), sayAge: f}
SuperType {name: "hyh2", colors: Array(3)}
{sayName: f, constructor: f}

//寄生式组合继承:
SubType {name: "hyh1", colors: Array(3), age: 22}
{sayName: f, sayAge: f, constructor: f}
SuperType {name: "hyh2", colors: Array(3)}
{sayName: f, sayAge: f, constructor: f}

寄生式组合继承只调用了一次 SuperType 构造函数，避免了 SubType.prototype 上不必要也用不到的属性，因此可以说这个例子的效率更高。而且，原型链仍然保持不变，因此 instanceof 操作符和isPrototypeOf()方法正常有效。寄生式组合继承可以算是引用类型继承的最佳模式。

类

ECMAScript 6 新引入的 class 关键字具有正式定义类的能力。类（class）是ECMAScript 中新的基础性语法糖结构，因此刚开始接触时可能会不太习惯。虽然 ECMAScript 6 类表面上看起来可以支持正式的面向对象编程，但实际上它背后使用的仍然是原型和构造函数的概念。

类定义

与函数定义不同的是，虽然函数声明可以提升，但类定义不能：

console.log(FunctionExpression); // undefined 
var FunctionExpression = function() {}; 
console.log(FunctionExpression); // function() {} 
console.log(FunctionDeclaration); // FunctionDeclaration() {} 
function FunctionDeclaration() {} 
console.log(FunctionDeclaration); // FunctionDeclaration() {} 
console.log(ClassExpression); // undefined 
var ClassExpression = class {}; 
console.log(ClassExpression); // class {} 
console.log(ClassDeclaration); // ReferenceError: ClassDeclaration is not defined 
class ClassDeclaration {} 
console.log(ClassDeclaration); // class ClassDeclaration {}

另一个跟函数声明不同的地方是，函数受函数作用域限制，而类受块作用域限制。
类的构成：
类可以包含构造函数方法、实例方法、获取函数、设置函数和静态类方法，但这些都不是必需的。空的类定义照样有效。默认情况下，类定义中的代码都在严格模式下执行。
与函数构造函数一样，多数编程风格都建议类名的首字母要大写，以区别于通过它创建的实例，如，通过 class Foo {}创建实例 foo）

类构造函数

1. 实例化
   方法名 constructor 会告诉解释器在使用 new 操作符创建类的新实例时，应该调用这个函数。构造函数的定义不是必需的，不定义构造函数相当于将构造函数定义为空函数。
   类实例化时传入的参数会用作构造函数的参数。如果不需要参数，则类名后面的括号也是可选的：

class Person { 
constructor(name) { 
console.log(arguments.length); 
this.name = name || null; 
} 
}

let p1 = new Person; // 0 
console.log(p1.name); // null

let p2 = new Person(); // 0 
console.log(p2.name); // null

let p3 = new Person('Jake'); // 1 
console.log(p3.name); // Jake

默认情况下，类构造函数会在执行之后返回 this 对象。构造函数返回的对象会被用作实例化的对象，如果没有什么引用新创建的 this 对象，那么这个对象会被销毁。不过，如果返回的不是 this 对象，而是其他对象，那么这个对象不会通过 instanceof 操作符检测出跟类有关联，因为这个对象的原型指针并没有被修改。

class Person { 
constructor(override) { 
this.foo = 'foo'; 
if (override) { 
return { //这里return了一个对象，new完之后返回新的对象，但是新对象的原型并没有被修改，之后检测原型失败
 bar: 'bar' //如果 return "bar" ，那么相当于new的结果没变，还是Person {foo: "foo"}
 }; 
} 
} 
}

let p1 = new Person(), 
p2 = new Person(true); 
console.log(p1); // Person{ foo: 'foo' } 
console.log(p1 instanceof Person); // true 
console.log(p2); // { bar: 'bar' } 
console.log(p2 instanceof Person); // false

类构造函数与构造函数的主要区别是，调用类构造函数必须使用 new 操作符。而普通构造函数如果不使用 new 调用，那么就会以全局的 this（通常是 window）作为内部对象。调用类构造函数时如果忘了使用 new 则会抛出错误。
类构造函数没有什么特殊之处，实例化之后，它会成为普通的实例方法（但作为类构造函数，仍然要使用 new 调用）。因此，实例化之后可以在实例上引用它：

class Person {} 
// 使用类创建一个新实例
let p1 = new Person(); 
p1.constructor(); 
// TypeError: Class constructor Person cannot be invoked without 'new' 
// 使用对类构造函数的引用创建一个新实例
let p2 = new p1.constructor();

2. 把类当成特殊函数
   ECMAScript 中没有正式的类这个类型。从各方面来看，ECMAScript 类就是一种特殊函数。声明一个类之后，通过 typeof 操作符检测类标识符，表明它是一个函数。
   类标识符有 prototype 属性，而这个原型也有一个 constructor 属性指向类自身，也可以使用 instanceof 操作符检查构造函数原型，就是一个特殊函数。
   重点在于，类中定义的 constructor 方法不会被当成构造函数，在对它使用instanceof 操作符时会返回 false。但是，如果在创建实例时直接将类构造函数当成普通构造函数来使用，那么 instanceof 操作符的返回值会反转：

class Person {} 
let p1 = new Person();

console.log(p1.constructor === Person); // true 
console.log(p1 instanceof Person); // true 
console.log(p1 instanceof Person.constructor); // false

let p2 = new Person.constructor(); 
console.log(p2.constructor === Person); // false 
console.log(p2 instanceof Person); // false 
console.log(p2 instanceof Person.constructor); // true

类是 JavaScript 的一等公民，因此可以像其他对象或函数引用一样把类作为参数传递：

// 类可以像函数一样在任何地方定义，比如在数组中 => 类是最自由的
let classList = [ //数组第一个参数的值是类
 class { 
constructor(id) { 
this.id_ = id; 
console.log(`instance ${this.id_}`); 
} 
} 
]; 
function createInstance(classDefinition, id) { //一个new类的函数，参数为类，类的参数 
return new classDefinition(id); 
} 
let foo = createInstance(classList[0], 3141); // instance 3141

与立即调用函数表达式相似，类也可以立即实例化：

let p = new class Foo {
 constructor(x) { 
console.log(x); 
} 
}('bar'); // bar

console.log(p); // Foo {}

实例、原型和类成员

1. 实例成员
   每个实例都对应一个唯一的成员对象，这意味着所有成员都不会在原型上共享
2. 原型方法与访问器
   为了在实例间共享方法，类定义语法把在类块中定义的方法作为原型方法。
   可以把方法定义在类构造函数中或者类块中，但不能在类块中给原型添加原始值或对象作为成员数据：

class Person { 
name: 'Jake' 
} 
// Uncaught SyntaxError: Unexpected token

类定义也支持获取和设置访问器。语法与行为跟普通对象一样：

class Person {

set name(newName) { 
this.name_ = newName; 
}

get name() { 
return this.name_; 
} 
} 
let p = new Person(); 
p.name = 'Jake'; 
console.log(p.name); // Jake

3. 静态类方法
   这些方法通常用于执行不特定于实例的操作，也不要求存在类的实例。与原型成员类似，静态成员每个类上只能有一个。
   静态类成员在类定义中使用 static 关键字作为前缀。在静态成员中，this 引用类自身。其他所有约定跟原型成员一样。
   静态类方法非常适合作为实例工厂：

class Person { 
constructor(age) { 
this.age_ = age; 
} 
sayAge() { 
console.log(this.age_); 
} 
static create() { 
// 使用随机年龄创建并返回一个 Person 实例
 return new Person(Math.floor(Math.random()*100)); 
} 
} 
console.log(Person.create()); // Person { age_: ... }

4. 非函数原型和类成员
   虽然类定义并不显式支持在原型或类上添加成员数据，但在类定义外部，可以手动添加：

class Person { 
sayName() { 
console.log(`{Person.greeting}{this.name}`); 
} 
} 
// 在类上定义数据成员
Person.greeting = 'My name is';
// 在原型上定义数据成员
Person.prototype.name = 'Jake'; 
let p = new Person(); 
p.sayName(); // My name is Jake

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

class Person { 
constructor() { 
this.nicknames = ['Jack', 'Jake', 'J-Dog']; 
} 
*[Symbol.iterator]() { 
yield *this.nicknames.entries(); 
} 
} 
let p = new Person(); 
for (let [idx, nickname] of p) { 
console.log(nickname); 
}
// Jack 
// Jake 
// J-Dog

也可以只返回迭代器实例：

class Person { 
constructor() { 
this.nicknames = ['Jack', 'Jake', 'J-Dog']; 
} 
[Symbol.iterator]() { 
return this.nicknames.entries(); 
} 
} 
let p = new Person(); 
for (let [idx, nickname] of p) { 
console.log(nickname); 
} 
// Jack 
// Jake 
// J-Dog

就是要生成器*里，才能使用 yield,不然正常返回值用return

继承

1. 继承基础
   ES6 类支持单继承。使用 extends 关键字，就可以继承任何拥有[[Construct]]和原型的对象。很大程度上，这意味着不仅可以继承一个类，也可以继承普通的构造函数（保持向后兼容）：
2. 构造函数、HomeObject 和 super()
   派生类的方法可以通过 super 关键字引用它们的原型。这个关键字只能在派生类中使用，而且仅限于类构造函数、实例方法和静态方法内部。在类构造函数中使用 super 可以调用父类构造函数。

class Vehicle { 
constructor() { 
this.hasEngine = true; 
} 
}

class Bus extends Vehicle { 
constructor() { 
// 不要在调用 super()之前引用 this，否则会抛出 ReferenceError 
super(); // 相当于 super.constructor() 
console.log(this instanceof Vehicle); // true 
console.log(this); // Bus { hasEngine: true } 
} 
} 
new Bus();

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

class Vehicle { 
static identify() { 
console.log('vehicle'); 
} 
} 
class Bus extends Vehicle { 
static identify() { 
super.identify(); //这里会去调用父类的identify输出vehicle
 console.log('hyh') //这里是子类identify方法里的后续结果
 } 
} 
Bus.identify();
// vehicle  
// hyh

tips：ES6 给类构造函数和静态方法添加了内部特性[[HomeObject]]，这个特性是一个指针，指向定义该方法的对象。这个指针是自动赋值的，而且只能在 JavaScript 引擎内部访问。super 始终会定义为[[HomeObject]]的原型。
super使用的问题：
A. super 只能在派生类构造函数（即：子类的constructor里）和静态方法（即：子类的static里）中使用
B. 不能单独引用 super 关键字，要么用它调用构造函数，要么用它引用静态方法
C. 调用 super()会调用父类构造函数，并将返回的实例赋值给 this
D. super()的行为如同调用构造函数，如果需要给父类构造函数传参，则需要手动传入

class Vehicle { 
constructor(licensePlate) { 
this.licensePlate = licensePlate; 
} 
}

class Bus extends Vehicle { 
constructor(licensePlate) { 
super(licensePlate); 
} 
}

console.log(new Bus('1337H4X')); // Bus { licensePlate: '1337H4X' }

E. 如果没有定义类构造函数，在实例化派生类时会调用 super()，而且会传入所有传给派生类的参数

class Vehicle { 
constructor(licensePlate) { 
this.licensePlate = licensePlate; 
} 
}

class Bus extends Vehicle {} //这里没有定义子类的构造函数，自动调用super()

console.log(new Bus('1337H4X')); // Bus { licensePlate: '1337H4X' }

F. 在类构造函数中，不能在调用 super()之前引用 this。

class Vehicle {} 
class Bus extends Vehicle { 
constructor() { 
console.log(this); 
} 
} 
new Bus()
//Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

G. 如果在派生类中显式定义了构造函数，则要么必须在其中调用 super()，要么必须在其中返回一个对象。

class Vehicle {}

class Car extends Vehicle {}

class Bus extends Vehicle { 
constructor() { 
super(); 
} 
}

class Van extends Vehicle { 
constructor() { 
return {}; 
} 
}

class Hyh extends Vehicle { 
constructor() { 
} 
}
console.log(new Car()); // Car {} 
console.log(new Bus()); // Bus {} 
console.log(new Van()); // {}
console.log(new Hyh()); // Uncaught ReferenceError:....

3. 抽象基类
   有时候可能需要定义这样一个类，它可供其他类继承，但本身不会被实例化。虽然 ECMAScript 没有专门支持这种类的语法 ，但通过 new.target 也很容易实现。new.target 保存通过 new 关键字调用的类或函数。通过在实例化时检测 new.target 是不是抽象基类，可以阻止对抽象基类的实例化：
   另外，通过在抽象基类构造函数中进行检查，可以要求派生类必须定义某个方法。因为原型方法在调用类构造函数之前就已经存在了，所以可以通过 this 关键字来检查相应的方法：

// 抽象基类
class Vehicle { 
constructor() { 
if (new.target === Vehicle) { //如果实例化本身，则抛出错误
 throw new Error('Vehicle cannot be directly instantiated'); 
} 
if (!this.foo) { //如果实例化对象没有foo属性，则抛出错误
 throw new Error('Inheriting class must define foo()'); 
} 
console.log('success!'); 
} 
} 
// 派生类
class Bus extends Vehicle { 
foo() {} 
} 
// 派生类
class Van extends Vehicle {} 
new Bus(); // success! 
new Van(); // Error: Inheriting class must define foo()
new Vehicle(); // Error: Vehicle cannot be directly instantiated

4. 继承内置类型
   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 a = new SuperArray(1, 2, 3, 4, 5); 
console.log(a instanceof Array); // true 
console.log(a instanceof SuperArray); // true
console.log(a); // [1, 2, 3, 4, 5] 
a.shuffle(); 
console.log(a); // [3, 1, 4, 5, 2]

有些内置类型的方法会返回新实例。默认情况下，返回实例的类型与原始实例的类型是一致的：

class SuperArray extends Array {} 
let a1 = new SuperArray(1, 2, 3, 4, 5); 
let a2 = a1.filter(x => !!(x%2)) 
console.log(a1); // [1, 2, 3, 4, 5] 
console.log(a2); // [1, 3, 5] 
console.log(a1 instanceof SuperArray); // true 
console.log(a2 instanceof SuperArray); // true

如果想覆盖这个默认行为，则可以覆盖 Symbol.species 访问器，这个访问器决定在创建返回的实例时使用的类：

class SuperArray extends Array { 
static get [Symbol.species]() { 
return Array; 
} 
}

let a1 = new SuperArray(1, 2, 3, 4, 5); 
let a2 = a1.filter(x => !!(x%2))

console.log(a1); // [1, 2, 3, 4, 5] 
console.log(a2); // [1, 3, 5] 
console.log(a1 instanceof SuperArray); // true 
console.log(a1 instanceof Array); // true 
console.log(a2 instanceof SuperArray); // false
console.log(a2 instanceof Array); // true

5. 类混入
   把不同类的行为集中到一个类是一种常见的 JavaScript 模式。虽然 ES6 没有显式支持多类继承，但通过现有特性可以轻松地模拟这种行为。
   tips：Object.assign()方法是为了混入对象行为而设计的。只有在需要混入类的行为时才有必要自己实现混入表达式。如果只是需要混入多个对象的属性，那么使用Object.assign()就可以了。
   extends 关键字后面是一个 JavaScript 表达式。任何可以解析为一个类或一个构造函数的表达式都是有效的。这个表达式会在求值类定义时被求值：

class Vehicle {} 
function getParentClass() { 
console.log('evaluated expression'); 
return Vehicle; 
} 
class Bus extends getParentClass() {} // getParentClass()解析为可求值的表达式
//evaluated expression

如果 Person 类需要组合 A、B、C，则需要某种机制实现 B 继承 A，C 继承 B，而 Person再继承 C，从而把 A、B、C 组合到这个超类中。实现这种模式有不同的策略。
一个策略是定义一组“可嵌套”的函数，每个函数分别接收一个超类作为参数，而将混入类定义为这个参数的子类，并返回这个类。这些组合函数可以连缀调用，最终组合成超类表达式：

class Vehicle {} /定义一个类
let FooMixin = (Superclass) => class extends Superclass { //A继承超类，A中有foo方法
 foo() { 
console.log('foo'); 
} 
}; 
let BarMixin = (Superclass) => class extends Superclass { //B继承超类，A中有bar方法
 bar() { 
console.log('bar'); 
} 
}; 
let BazMixin = (Superclass) => class extends Superclass { //C继承超类，A中有baz方法
 baz() { 
console.log('baz'); 
} 
}; 
class Bus extends FooMixin(BarMixin(BazMixin(Vehicle))) {} //层层继承
let b = new Bus(); //实际new的时候，沿着原型链往上爬到了空类，一步步继承过去的，一层中一个方法
b.foo(); // foo //这些方法都不在一个层里，都是沿原型链往上爬，直到找到对应的
b.bar(); // bar 
b.baz(); // baz
console.log(b) //Bus {}

通过写一个辅助函数，可以把嵌套调用展开：
//array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
total => 必需。初始值, 或者计算结束后的返回值。
currentValue => 必需。当前元素
currentIndex => 可选。当前元素的索引
arr => 可选。当前元素所属的数组对象。
initialValue => 可选。传递给函数的初始值

class Vehicle {} 
let FooMixin = (Superclass) => class extends Superclass { 
foo() { 
console.log('foo'); 
} 
}; 
let BarMixin = (Superclass) => class extends Superclass { 
bar() { 
console.log('bar'); 
} 
}; 
let BazMixin = (Superclass) => class extends Superclass { 
baz() { 
console.log('baz'); 
} 
}; 
function mix(BaseClass, ...Mixins) { 
//这里的Mixins为:[f, f, f] ,对应FooMixin, BarMixin, BazMixin这三个函数
 return Mixins.reduce((accumulator, current) => current(accumulator), BaseClass); 
} 
class Bus extends mix(Vehicle, FooMixin, BarMixin, BazMixin) {} 
let b = new Bus(); 
b.foo(); // foo 
b.bar(); // bar 
b.baz(); // baz

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

个人疑问：为什么函数参数使用扩展运算符后，打印参数是数组？
因为：ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
注意，rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。
且函数的length属性，不包括 rest 参数。

代理与反射

代理基础

代理是目标对象的抽象。从很多方面看，代理类似 C++指针，因为它可以用作目标对象的替身，但又完全独立于目标对象。目标对象既可以直接被操作，也可以通过代理来操作。但直接操作会绕过代理施予的行为。

创建空代理

代理是使用 Proxy 构造函数创建的。这个构造函数接收两个参数：目标对象和处理程序对象。缺少其中任何一个参数都会抛出 TypeError。
如下面的代码所示，在代理对象上执行的任何操作实际上都会应用到目标对象。唯一可感知的不同就是代码中操作的是代理对象。

const target = { 
id: 'target' 
};

const handler = {};

const proxy = new Proxy(target, handler);

// id 属性会访问同一个值
console.log(target.id); // target 
console.log(proxy.id); // target

// 给目标属性赋值会反映在两个对象上
// 因为两个对象访问的是同一个值
target.id = 'foo'; 
console.log(target.id); // foo 
console.log(proxy.id); // foo

// 给代理属性赋值会反映在两个对象上
// 因为这个赋值会转移到目标对象
proxy.id = 'bar'; 
console.log(target.id); // bar 
console.log(proxy.id); // bar

// hasOwnProperty()方法在两个地方
// 都会应用到目标对象
console.log(target.hasOwnProperty('id')); // true 
console.log(proxy.hasOwnProperty('id')); // true

// Proxy.prototype 是 undefined 
// 因此不能使用 instanceof 操作符
console.log(target instanceof Proxy); // TypeError: Function has non-object prototype 
'undefined' in instanceof check 
console.log(proxy instanceof Proxy); // TypeError: Function has non-object prototype 
'undefined' in instanceof check 
// 严格相等可以用来区分代理和目标
console.log(target === proxy); // false

定义捕获器

使用代理的主要目的是可以定义捕获器（trap）。捕获器就是在处理程序对象中定义的“基本操作的拦截器”。每个处理程序对象可以包含零个或多个捕获器，每个捕获器都对应一种基本操作，可以直接或间接在代理对象上调用。
例如，可以定义一个 get()捕获器，在 ECMAScript 操作以某种形式调用 get()时触发。
。当然，get()不是
ECMAScript 对象可以调用的方法。这个操作在 JavaScript 代码中可以通过多种形式触发并被 get()捕获器拦截到。proxy[property]、proxy.property 或 Object.create(proxy)[property]等操作都会触发基本的 get()操作以获取属性。因此所有这些操作只要发生在代理对象上，就会触发 get()捕获器。

const target = { 
foo: 'bar' 
}; 
const handler = { 
// 捕获器在处理程序对象中以方法名为键
 get() { 
return 'handler override'; 
} 
};

const proxy = new Proxy(target, handler);

console.log(target.foo); // bar 
console.log(proxy.foo); // handler override

console.log(target['foo']); // bar 
console.log(proxy['foo']); // handler override

console.log(Object.create(target)['foo']); // bar 
console.log(Object.create(proxy)['foo']); // handler override

捕获器参数和反射 API

所有捕获器都可以访问相应的参数，基于这些参数可以重建被捕获方法的原始行为。比如，get()捕获器会接收到目标对象、要查询的属性和代理对象三个参数
有了这些参数，就可以重建被捕获方法的原始行为

const target = { 
foo: 'bar' 
};

const handler = { 
get(trapTarget, property, receiver) { 
return trapTarget[property]; 
} 
};

const proxy = new Proxy(target, handler);

console.log(proxy.foo); // bar 
console.log(target.foo); // bar

所有捕获器都可以基于自己的参数重建原始操作，但并非所有捕获器行为都像 get()那么简单。因此，通过手动写码如法炮制的想法是不现实的。实际上，开发者并不需要手动重建原始行为，而是可以通过调用全局 Reflect 对象上（封装了原始行为）的同名方法来轻松重建。
处理程序对象中所有可以捕获的方法都有对应的反射（Reflect）API 方法。这些方法与捕获器拦截的方法具有相同的名称和函数签名，而且也具有与被拦截方法相同的行为。
即：

const target = { 
foo: 'bar' 
};

const handler = { 
get() { 
return Reflect.get(...arguments); 
} 
};

//简介版本
const handler = { 
get: Reflect.get 
};

const proxy = new Proxy(target, handler);

console.log(proxy.foo); // bar 
console.log(target.foo); // bar

事实上，如果真想创建一个可以捕获所有方法，然后将每个方法转发给对应反射 API 的空代理，那么甚至不需要定义处理程序对象：

const target = { 
foo: 'bar' 
}; 
const proxy = new Proxy(target, Reflect); 
console.log(proxy.foo); // bar 
console.log(target.foo); // bar

反射 API 为开发者准备好了样板代码，在此基础上开发者可以用最少的代码修改捕获的方法。

捕获器不变式

根据 ECMAScript 规范，每个捕获的方法都知道目标对象上下文、捕获函数签名，而捕获处理程序的行为必须遵循“捕获器不变式”（trap invariant）
比如，如果目标对象有一个不可配置且不可写的数据属性，那么在捕获器返回一个与该属性不同的值时，会抛出 TypeError：

const target = {};

Object.defineProperty(target, 'foo', { 
configurable: false, 
writable: false, 
value: 'bar' 
});

const handler = { 
get() { 
return 'qux'; 
} 
};

const proxy = new Proxy(target, handler);

console.log(proxy.foo); 
// TypeError

可撤销代理

对于使用 new Proxy()创建的普通代理来说，这种联系会在代理对象的生命周期内一直持续存在。
Proxy 也暴露了 revocable()方法，这个方法支持撤销代理对象与目标对象的关联。撤销代理的操作是不可逆的。而且，撤销函数（revoke()）是幂等的，调用多少次的结果都一样。撤销代理之后再调用代理会抛出 TypeError。

const target = { 
foo: 'bar' 
};

const handler = { 
get() { 
return 'intercepted'; 
} 
};

const { proxy, revoke } = Proxy.revocable(target, handler);

console.log(proxy.foo); // intercepted 
console.log(target.foo); // bar

revoke(); 
console.log(proxy.foo); // TypeError

实用反射 API

1. 反射 API 与对象 API
   (1) 反射 API 并不限于捕获处理程序；
   (2) 大多数反射 API 方法在 Object 类型上有对应的方法。
   通常，Object 上的方法适用于通用程序，而反射方法适用于细粒度的对象控制与操作。
2. 状态标记
   很多反射方法返回称作“状态标记”的布尔值，表示意图执行的操作是否成功。例如，可以使用反射API 对下面的代码进行重构：

// 初始代码 
const o = {}; 
try { 
Object.defineProperty(o, 'foo', 'bar'); 
console.log('success'); 
} catch(e) { 
console.log('failure'); 
}

在定义新属性时如果发生问题，Reflect.defineProperty()会返回 false，而不是抛出错误。因此使用这个反射方法可以这样重构上面的代码：

// 重构后的代码
const o = {}; 
if(Reflect.defineProperty(o, 'foo', {value: 'bar'})) { //定义新属性成功返回true
 console.log('success'); 
} else { //否则返回false
 console.log('failure'); 
}

以下反射方法都会提供状态标记：
Reflect.defineProperty()
Reflect.preventExtensions()
Reflect.setPrototypeOf()
Reflect.set()
Reflect.deleteProperty()

3. 用一等函数替代操作符
   以下反射方法提供只有通过操作符才能完成的操作。
   Reflect.get()：可以替代对象属性访问操作符。
   Reflect.set()：可以替代=赋值操作符。
   Reflect.has()：可以替代 in 操作符或 with()。 ? Reflect.deleteProperty()：可以替代 delete 操作符。
   Reflect.construct()：可以替代 new 操作符。

4. 安全地应用函数
   在通过 apply 方法调用函数时，被调用的函数可能也定义了自己的 apply 属性（虽然可能性极小）。为绕过这个问题，可以使用定义在 Function 原型上的 apply 方法，比如：Function.prototype.apply.call(myFunc, thisVal, argumentList);
   这种可怕的代码完全可以使用 Reflect.apply 来避免：Reflect.apply(myFunc, thisVal, argumentsList);

   代理另一个代理

   代理可以拦截反射 API 的操作，而这意味着完全可以创建一个代理，通过它去代理另一个代理。这样就可以在一个目标对象之上构建多层拦截网：

const target = { 
foo: 'bar' 
};

const firstProxy = new Proxy(target, { 
get() { 
console.log('first proxy'); 
return Reflect.get(...arguments); 
} 
});

const secondProxy = new Proxy(firstProxy, { 
get() { 
console.log('second proxy'); 
return Reflect.get(...arguments); 
} 
});

console.log(secondProxy.foo); 
// second proxy 
// first proxy 
// bar

代理的问题与不足

1. 代理中的 this
   代理潜在的一个问题来源是 this 值。我们知道，方法中的 this 通常指向调用这个方法的对象：

const target = { 
thisValEqualsProxy() { 
return this === proxy; 
} 
}

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

console.log(target.thisValEqualsProxy()); // false 
console.log(proxy.thisValEqualsProxy()); // true

从直觉上讲，这样完全没有问题，可是，如果目标对象依赖于对象标识，那就可能碰到意料之外的问题。

const wm = new WeakMap(); 
class User { 
constructor(userId) { 
wm.set(this, userId); 
}

set id(userId) { 
wm.set(this, userId); 
}

get id() { 
return wm.get(this); 
} 
}
//由于这个实现依赖 User 实例的对象标识，在这个实例被代理的情况下就会出问题：
const user = new User(123); 
console.log(user.id); // 123 
const userInstanceProxy = new Proxy(user, {}); 
console.log(userInstanceProxy.id); // undefined

这是因为 User 实例一开始使用目标对象作为 WeakMap 的键，代理对象却尝试从自身取得这个实例。要解决这个问题，就需要重新配置代理，把代理 User 实例改为代理 User 类本身。之后再创建代理的实例就会以代理实例作为 WeakMap 的键了：

const UserClassProxy = new Proxy(User, {}); 
const proxyUser = new UserClassProxy(456); 
console.log(proxyUser.id);

个人理解：!这里需要代理的目标target是一个类，那么把代理到的类实例化，则是获得代理到的类的实例

2. 代理与内部槽位
   代理与内置引用类型（比如 Array）的实例通常可以很好地协同，但有些 ECMAScript 内置类型可能会依赖代理无法控制的机制，结果导致在代理上调用某些方法会出错。
   一个典型的例子就是 Date 类型。根据 ECMAScript 规范，Date 类型方法的执行依赖 this 值上的内部槽位[[NumberDate]]。代理对象上不存在这个内部槽位，而且这个内部槽位的值也不能通过普通的 get()和 set()操作访问到，于是代理拦截后本应转发给目标对象的方法会抛出 TypeError：

const target = new Date(); 
const proxy = new Proxy(target, {});

console.log(proxy instanceof Date); // true

proxy.getDate(); // TypeError: 'this' is not a Date object

代理捕获器与反射方法

对于在代理对象上执行的任何一种操作，只会有一个捕获处理程序被调用。不会存在重复捕获的情况。

get()

const myTarget = {
'name' : 'hyh'
};

const proxy = new Proxy(myTarget, { 
get(target, property, receiver) { //get代理捕获本身没有返回值，需要return出去
 console.log('get()'); 
return Reflect.get(...arguments)  
 } 
}); 
proxy.name; 
// get()
// 'hyh'

实际上对应之前：

const myTarget = {
'name' : 'hyh'
};

const handle = {
 get(target, property, receiver){ //形参target对应之前Proxy中的形参myTarget，都指向同一个对象
 console.log('get()') //receiver 对应的代理对象
 console.log(target === myTarget)
 console.log(receiver)
 return Reflect.get(...arguments) 
}
}
const proxy = new Proxy(myTarget, handle); 
proxy.name;
// get()
// true
// Proxy {name: "hyh"}
// 'hyh'

1. 返回值
   返回值无限制。
2. 拦截的操作
   proxy.property
   proxy[property]
   Object.create(proxy)[property]
   Reflect.get(proxy, property, receiver)
3. 捕获器处理程序参数
   target：目标对象。
   property：引用的目标对象上的字符串键属性。
   receiver：代理对象或继承代理对象的对象。
4. 捕获器不变式
   如果 target.property 不可写且不可配置，则处理程序返回的值必须与 target.property 匹配。
   如果 target.property 不可配置且[[Get]]特性为 undefined，处理程序的返回值也必须是 undefined。

   set()

   set()捕获器会在设置属性值的操作中被调用。对应的反射 API 方法为 Reflect.set()。

const myTarget = {
 'name' :'bar'
};

const proxy = new Proxy(myTarget, {  
 set(target, property, value, receiver) { 
console.log('set()'); 
return Reflect.set(...arguments) //Reflect.set(...arguments)返回的值是true或者false
 } 
});

proxy.name = 'hyh'; 
// set()
// 'hyh'

返回 true 表示成功；返回 false 表示失败，严格模式下会抛出 TypeError。

has()

has()捕获器会在 in 操作符中被调用。对应的反射 API 方法为 Reflect.has()。

const myTarget = {}; 
const proxy = new Proxy(myTarget, {  
 has(target, property) { //has代理捕获默认返回false，用对应的反射 API 方法Reflect.has()传入剩余参数得正确结果
 console.log('has()'); 
return Reflect.has(...arguments) 
} 
}); 
'foo' in proxy;
// 'has()'
// fasle

defineProperty()

defineProperty()捕获器会在 Object.defineProperty()中被调用。对应的反射 API 方法为Reflect.defineProperty()。

const myTarget = {}; 
const proxy = new Proxy(myTarget, { 
defineProperty(target, property, descriptor) { //defineProperty()必须返回布尔值，表示属性是否成功定义。返回非布
 console.log('defineProperty()'); //尔值会被转型为布尔值。
 return Reflect.defineProperty(...arguments) //Reflect.defineProperty(...arguments)输出为true
 } 
}); 
Object.defineProperty(proxy, 'foo', { value: 'bar' }); 
// defineProperty()
// Proxy {foo: "bar"}

getOwnPropertyDescriptor()

getOwnPropertyDescriptor()捕获器会在 Object.getOwnPropertyDescriptor()中被调用。对应的反射 API 方法为 Reflect.getOwnPropertyDescriptor()。

const myTarget = {
'name' : 'hyh'
}; 
const proxy = new Proxy(myTarget, { 
getOwnPropertyDescriptor(target, property) { //getOwnPropertyDescriptor()必须返回对象，或者在属性不存在时返回 
console.log('getOwnPropertyDescriptor()'); //undefined。
 return Reflect.getOwnPropertyDescriptor(...arguments)  
 } 
}); 
Object.getOwnPropertyDescriptor(proxy, 'foo'); 
// getOwnPropertyDescriptor()
//{value: "hyh", writable: true, enumerable: true, configurable: true}

deleteProperty()

deleteProperty()捕获器会在 delete 操作符中被调用。对应的反射 API 方法为 Reflect. deleteProperty()。

const myTarget = {}; 
const proxy = new Proxy(myTarget, { 
deleteProperty(target, property) { //默认返回false，用对应的反射 API 方法Reflect.deleteProperty()传入剩余参数得正确结果
 console.log('deleteProperty()'); 
return Reflect.deleteProperty(...arguments) 
} 
}); 
delete proxy.foo

ownKeys()

ownKeys()捕获器会在 Object.keys()及类似方法中被调用。对应的反射 API 方法为 Reflect. ownKeys()。

const myTarget = {
 'name' : 'hyh'
}; 
const proxy = new Proxy(myTarget, { //必须返回包含字符串或符号的可枚举对象。
 ownKeys(target) { 
console.log('ownKeys()'); 
return Reflect.ownKeys(...arguments) //这里如果return [] ,对应结果就是：[]
 } 
}); 
Object.keys(proxy);
// ownKeys()
// ["name"]

拦截得操作
Object.getOwnPropertyNames(proxy)
Object.getOwnPropertySymbols(proxy)
Object.keys(proxy)
Reflect.ownKeys(proxy)

getPrototypeOf()

getPrototypeOf()捕获器会在 Object.getPrototypeOf()中被调用。对应的反射 API 方法为Reflect.getPrototypeOf()。

const myTarget = {}; 
const proxy = new Proxy(myTarget, { 
getPrototypeOf(target) { //getPrototypeOf()必须返回对象或 null
 console.log('getPrototypeOf()'); 
return Reflect.getPrototypeOf(...arguments) //这里如果return {} ,对应结果就是：{}
 } 
}); 
Object.getPrototypeOf(proxy); 
// getPrototypeOf()
// {constructor: f, __defineGetter__: f, __defineSetter__: f, hasOwnProperty: f, __lookupGetter__: f, …}

setPrototypeOf()

setPrototypeOf()捕获器会在 Object.setPrototypeOf()中被调用。对应的反射 API 方法为Reflect.setPrototypeOf()。

const myTarget = {}; 
const a = {'name' : 'hyh'}

const proxy = new Proxy(myTarget, { //)必须返回布尔值，表示原型赋值是否成功
 setPrototypeOf(target, prototype) { 
console.log('setPrototypeOf()'); 
return Reflect.setPrototypeOf(...arguments) //return false 会报错
 } 
});

Object.setPrototypeOf(proxy, a);

// setPrototypeOf()
// {name: "hyh"}

拦截得操作:
Object.getPrototypeOf(proxy)
Reflect.getPrototypeOf(proxy)
proxy.proto
Object.prototype.isPrototypeOf(proxy)
proxy instanceof Object

isExtensible()

检查我们是否可以向对象添加新的属性，是否目标对象可扩展
isExtensible()捕获器会在 Object.isExtensible()中被调用。对应的反射 API 方法为Reflect.isExtensible()。

const myTarget = {}
Object.preventExtensions(myTarget) //将对象设置为不可扩展对象
const proxy = new Proxy(myTarget, { 
isExtensible(target) { 
console.log('isExtensible()');
return Reflect.isExtensible(...arguments) 
} 
}); 
Object.isExtensible(proxy); 
// isExtensible()
// false

preventExtensions()

preventExtensions()捕获器会在 Object.preventExtensions()中被调用。对应的反射 API方法为 Reflect.preventExtensions()。

const myTarget = {}; 
const proxy = new Proxy(myTarget, { 
preventExtensions(target) { //必须返回布尔值，表示 target 是否已经不可扩展。与isExtensible捕获器相反结果
 console.log('preventExtensions()'); 
return Reflect.preventExtensions(...arguments) 
} 
}); 
Object.preventExtensions(proxy); 
Object.isExtensible(proxy)
// preventExtensions()
// true
// false

apply()

apply()捕获器会在调用函数时中被调用。对应的反射 API 方法为 Reflect.apply()。

const myTarget = () => {}; 
const proxy = new Proxy(myTarget, { //target 必须是一个函数对象。
 apply(target, thisArg, ...argumentsList) { //thisArg：调用函数时的 this 参数
 console.log('apply()'); //argumentsList：调用函数时的参数列表
 return Reflect.apply(...arguments) 
} 
});
proxy(); 
// apply()

拦截的操作：
proxy(...argumentsList)
Function.prototype.apply(thisArg, argumentsList)
Function.prototype.call(thisArg, ...argumentsList)
Reflect.apply(target, thisArgument, argumentsList)

construct()

construct()捕获器会在 new 操作符中被调用。对应的反射 API 方法为 Reflect.construct()。

const myTarget = function() {}; 
const proxy = new Proxy(myTarget, { 
construct(target, argumentsList, newTarget) { //target：目标构造函数
 console.log('construct()'); //argumentsList：传给目标构造函数的参数列表。
 return Reflect.construct(...arguments) //newTarget：最初被调用的构造函数。
 } 
}); 
new proxy; 
// construct()
// myTarget {}

拦截的操作：
new proxy(...argumentsList)
Reflect.construct(target, argumentsList, newTarget)

代理模式

跟踪属性访问

通过捕获 get、set 和 has 等操作，可以知道对象属性什么时候被访问、被查询。把实现相应捕获器的某个对象代理放到应用中，可以监控这个对象何时在何处被访问过：

const user = { 
name: 'Jake' 
}; 
const proxy = new Proxy(user, { 
get(target, property, receiver) { 
console.log(`Getting {property}`); 
return Reflect.get(...arguments); 
}, 
set(target, property, value, receiver) { 
console.log(`Setting{property}=${value}`); 
return Reflect.set(...arguments); 
} 
}); 
proxy.name; // Getting name 
proxy.age = 27; // Setting age=27

隐藏属性

代理的内部实现对外部代码是不可见的，因此要隐藏目标对象上的属性也轻而易举。比如：

const hiddenProperties = ['foo', 'bar']; 
const targetObject = { 
foo: 1, 
bar: 2, 
baz: 3 
}; 
const proxy = new Proxy(targetObject, { 
get(target, property) { 
if (hiddenProperties.includes(property)) { 
return undefined; 
} else { 
return Reflect.get(...arguments); 
} 
}, 
has(target, property) {
if (hiddenProperties.includes(property)) { 
return false; 
} else { 
return Reflect.has(...arguments); 
} 
} 
}); 
// get() 
console.log(proxy.foo); // undefined 
console.log(proxy.bar); // undefined 
console.log(proxy.baz); // 3 
// has() 
console.log('foo' in proxy); // false 
console.log('bar' in proxy); // false 
console.log('baz' in proxy); // true

属性验证

因为所有赋值操作都会触发 set()捕获器，所以可以根据所赋的值决定是允许还是拒绝赋值：

const target = { 
onlyNumbersGoHere: 0 
}; 
const proxy = new Proxy(target, { 
set(target, property, value) { 
if (typeof value !== 'number') { 
return false; 
} else { 
return Reflect.set(...arguments); 
} 
} 
}); 
proxy.onlyNumbersGoHere = 'hyh'; //typeof value !== 'number' ，return false,赋值失败，原本值为0，不变
console.log(proxy.onlyNumbersGoHere); // 0
proxy.onlyNumbersGoHere = 2; //return Reflect.set(...arguments); 赋值成功
console.log(proxy.onlyNumbersGoHere); // 2

函数与构造函数参数验证

跟保护和验证对象属性类似，也可对函数和构造函数参数进行审查。比如，可以让函数只接收某种类型的值：

function median(...nums) { 
return nums.sort()[Math.floor(nums.length / 2)]; //对数组排序，返回中位数
} 
const proxy = new Proxy(median, { 
apply(target, thisArg, argumentsList) { 
for (const arg of argumentsList) { //参数列表，apply为数组参数，可以遍历
 if (typeof arg !== 'number') { //对数组参数里每一个验证
 throw 'Non-number argument provided'; //不是数字抛出错误
 } 
}
return Reflect.apply(...arguments); //都是数字，则正常进行
 } 
}); 
console.log(proxy(4, 7, 1)); // 4 
console.log(proxy(4, '7', 1)); //'7'是字符串，不是数字，抛出错误
// Error: Non-number argument provided

类似地，可以要求实例化时必须给构造函数传参：

class User { 
constructor(id) { 
this.id_ = id; 
} 
} 
const proxy = new Proxy(User, { 
construct(target, argumentsList, newTarget) { 
if (argumentsList[0] === undefined) { //argumentsList：传给目标构造函数的参数列表。
 throw 'User cannot be instantiated without id'; 
} else { 
return Reflect.construct(...arguments); //正常实例化
 } 
} 
}); 
new proxy(1); //argumentsList[0] === 1
new proxy(); //argumentsList[0] === undefined ，抛出错误
// Error: User cannot be instantiated without id

数据绑定与可观察对象

通过代理可以把运行时中原本不相关的部分联系到一起。这样就可以实现各种模式，从而让不同的代码互操作。

const userList = []; 
class User { 
constructor(name) { 
this.name_ = name; 
} 
} 
const proxy = new Proxy(User, { 
construct() { 
const newUser = Reflect.construct(...arguments); 
userList.push(newUser); //new proxy => new User 的实例都会被push到userList里放一起
 return newUser; 
} 
}); 
new proxy('John'); 
new proxy('Jacob'); 
new proxy('Jingleheimerschmidt'); 
console.log(userList); // [User {}, User {}, User{}]

另外，还可以把集合绑定到一个事件分派程序，每次插入新实例时都会发送消息：

const userList = []; 
function emit(newValue) { 
console.log(newValue); 
} 
const proxy = new Proxy(userList, { 
set(target, property, value, receiver) { 
const result = Reflect.set(...arguments); 
if (result) { 
emit(Reflect.get(target, property, receiver)); 
} 
return result; 
} 
}); 
proxy.push('John'); 
// John 
proxy.push('Jacob'); 
// Jacob