JavaScript高级程序设计（第四版）阅读笔记

第八章_对象、类与面向对象编程

8.1 理解对象

创建自定义对象的通常方式是创建 Object 的一个新实例，然后再给它添加属性和方法，或者使用对象字面量来写：

let person = new Object();
person.name = "Nicholas"; 
person.age = 29; 
person.job = "Software Engineer"; 
person.sayName = function() {  
  console.log(this.name);
}; 
//字面量：
let person = {    
  name: "Nicholas",  
  age: 29,  
  job: "Software Engineer",  
  sayName() {    
    console.log(this.name); 
  } 
};

8.1.1 属性的类型

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

1. 数据属性

数据属性包含一个保存数据值的位置。值会从这个位置读取，也会写入到这个位置。数据属性有 4 个特性描述它们的行为。

[[Configurable]]：表示属性是否可以通过 delete 删除并重新定义，是否可以修改它的特性，以及是否可以把它改为访问器属性。默认情况下，所有直接定义在对象上的属性的这个特性都是 true，如前面的例子所示。
[[Enumerable]]：表示属性是否可以通过 for-in 循环返回。默认情况下，所有直接定义在对象上的属性的这个特性都是 true，如前面的例子所示。
[[Writable]]：表示属性的值是否可以被修改。默认情况下，所有直接定义在对象上的属性的这个特性都是 true，如前面的例子所示。
[[Value]]：包含属性实际的值。这就是前面提到的那个读取和写入属性值的位置。这个特性的默认值为 undefined。

按照之前创建对象的那两种方式创建对象，[[Configurable]]、[[Enumerable]]和 [[Writable]]都会被设置为 true，而[[Value]]特性会被设置为指定的值。

要修改属性的默认特性，就必须使用 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" 
//在非严格模式下尝试给这个属性重新赋值会被忽略。在严格模式下，尝试修改只读属性的值会抛出错误。

，一个属性被定义为不可配置之后，就不能再变回可配置的了。再次调用 Object.defineProperty()并修改任何非 writable 属性会导致错误,虽然可以对同一个属性多次调用 Object.defineProperty()，但在把 configurable 设置为 false 之后就会受限制了。 ：

let person = {};
Object.defineProperty(person, "name",
  {  
    configurable: false,   
    value: "Nicholas"
  }
); 
 
// 抛出错误 
Object.defineProperty(person, "name", {   configurable: true,   value: "Nicholas" });

2. 访问器属性

访问器属性不包含数据值。相反，它们包含一个获取（getter）函数和一个设置（setter）函数，不过这两个函数不是必需的。在读取访问器属性时，会调用获取函数，这个函数的责任就是返回一个有效的值。在写入访问器属性时，会调用设置函数并传入新值，这个函数必须决定对数据做出什么修改。访问器属性有 4个特性描述它们的行为。访问器属性是不能直接定义的，必须使用 Object.defineProperty()。

[[Configurable]]：表示属性是否可以通过 delete 删除并重新定义，是否可以修改它的特性，以及是否可以把它改为数据属性。默认情况下，所有直接定义在对象上的属性的这个特性都是 true。
[[Enumerable]]：表示属性是否可以通过 for-in 循环返回。默认情况下，所有直接定义在对象上的属性的这个特性都是 true。
[[Get]]：获取函数，在读取属性时调用。默认值为 undefined。
[[Set]]：设置函数，在写入属性时调用。默认值为 undefined

// 定义一个对象，包含伪私有成员 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

8.1.2 定义多个属性

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

let book = {}; 
Object.defineProperties(book, 
  {   
    year_: {     value: 2017   }, 
 
    edition: {     value: 1   }, 
 
    year: {     
      get() {       return this.year_;     }, 
    
      set(newValue) {      
        if (newValue > 2017) {     
          this.year_ = newValue;    
          this.edition += newValue - 2017;     
        }   
      }   
    } 
  }
);

8.1.3 读取属性的特性

使用 Object.getOwnPropertyDescriptor()方法可以取得指定属性的属性描述符。这个方法接收两个参数：属性所在的对象和要取得其描述符的属性名。返回值是一个对象，对于访问器属性包含 configurable、enumerable、get 和 set 属性，对于数据属性包含 configurable、enumerable、 writable 和 value 属性。

let book = {};
Object.defineProperties(book, 
  {   
    year_: {     value: 2017   }, 
 
    edition: {     value: 1   }, 
 
    year: {    
      get: function() {       return this.year_;     }, 
 
      set: function(newValue){     
        if (newValue > 2017) {   
          this.year_ = newValue;     
          this.edition += newValue - 2017;      
        }   
      }  
    }
  }
); 
 
let descriptor = Object.getOwnPropertyDescriptor(book, "year_");
console.log(descriptor.value);          // 2017 
console.log(descriptor.configurable);   // false 
console.log(typeof descriptor.get);     // "undefined" 
let descriptor = Object.getOwnPropertyDescriptor(book, "year");
console.log(descriptor.value);          // undefined 
console.log(descriptor.enumerable);     // false
console.log(typeof descriptor.get);     // "function"

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

console.log(Object.getOwnPropertyDescriptors(book));
// { 
//   edition: { 
//     configurable: false,
//     enumerable: false,
//     value: 1, 
//     writable: false
//   }, 
//   year: {
//     configurable: false,
//     enumerable: false,
//     get: f(),
//     set: f(newValue), 
//   }, //   year_: { 
//     configurable: false,
//     enumerable: false, 
//     value: 2017, 
//     writable: false 
//   } 
// }

8.1.4 合并对象

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

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

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

8.1.5 对象标识及相等判定

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

8.1.6 增强的对象语法

ECMAScript 6为定义和操作对象新增了很多极其有用的语法糖特性。这些特性都没有改变现有引擎的行为，但极大地提升了处理对象的方便程度。

1. 属性值简写

简写属性名只要使用变量名（不用再写冒号）就会自动被解释为同名的属性键。如果没有找到同名变量，则会抛出 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 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 = { 
  sayName: function(name) {   
    console.log(`My name is ${name}`);  
  } 
};
//简写：
let person = {
  sayName(name) {    
    console.log(`My name is ${name}`);   
  } 
}; 
//简写方法名对获取函数和设置函数也是适用的：
let person = {   
  name_: '',   
  get name() {   
    return this.name_;   
  },  
  set name(name) {   
    this.name_ = name; 
  },  
  sayName() {    
    console.log(`My name is ${this.name_}`);  
  } 
};

8.1.7 对象解构

ECMAScript 6新增了对象解构语法，可以在一条语句中使用嵌套数据实现一个或多个赋值操作。简单地说，对象解构就是使用与对象匹配的结构来实现对象属性赋值。

// 使用对象解构 
let person = {   name: 'Matt',   age: 27 }; 
 
let { name: personName, age: personAge } = person; 
 
console.log(personName);  // Matt
console.log(personAge);   // 27

使用解构，可以在一个类似对象字面量的结构中，声明多个变量，同时执行多个赋值操作。如果想让变量直接使用属性的名称，那么可以使用简写语法,解构赋值不一定与对象的属性匹配。赋值的时候可以忽略某些属性，而如果引用的属性不存在，则该变量的值就是 undefined：

let person = {   name: 'Matt',   age: 27 }; 
 
let { name, job } = person; 
 
console.log(name);  // Matt
console.log(job);   // undefined 
//也可以在解构赋值的同时定义默认值
let { name, job='Software engineer' } = person;

解构并不要求变量必须在解构表达式中声明。不过，如果是给事先声明的变量赋值，则赋值表达式必须包含在一对括号中：

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

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' 
 
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

8.2 创建对象

虽然使用 Object 构造函数或对象字面量可以方便地创建对象，但这些方式也有明显不足：创建具有同样接口的多个对象需要重复编写很多代码。

8.2.1 概述

ECMAScript 6 开始正式支持类和继承。ES6 的类旨在完全涵盖之前规范设计的基于原型的继承模式。不过，无论从哪方面看，ES6的类都仅仅是封装了 ES5.1构造函数加原型继承的语法糖而已。

8.2.2 工厂模式

工厂模式是一种众所周知的设计模式，广泛应用于软件工程领域，用于抽象创建特定对象的过程。

function createPerson(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 = createPerson("Nicholas", 29, "Software Engineer"); 
let person2 = createPerson("Greg", 27, "Doctor");

8.2.3 构造函数模式

自定义构造函数，以函数的形式为自己的对象类型定义属性和方法。

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("Nicholas", 29, "Software Engineer"); 
let person2 = new Person("Greg", 27, "Doctor"); 
 
person1.sayName();  // Nicholas
person2.sayName();  // Greg

在这个例子中，Person()构造函数代替了 createPerson()工厂函数。实际上，Person()内部的代码跟 createPerson()基本是一样的，只是有如下区别。

没有显式地创建对象。
属性和方法直接赋值给了 this。
没有 return

按照惯例，构造函数名称的首字母都是要大写的，非构造函数则以小写字母开头。这是从面向对象编程语言那里借鉴的，有助于在 ECMAScript中区分构造函数和普通函数。毕竟 ECMAScript的构造函数就是能创建对象的函数。

要创建 Person 的实例，应使用 new 操作符。以这种方式调用构造函数会执行如下操作。

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

构造函数不一定要写成函数声明的形式。赋值给变量的函数表达式也可以表示构造函数：

let Person = function(name, age, job) {   
  this.name = name;   
  this.age = age;   
  this.job = job;   
  this.sayName = function() { 
    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 
 
console.log(person1 instanceof Object);  // true
console.log(person1 instanceof Person);  // true
console.log(person2 instanceof Object);  // true 
console.log(person2 instanceof Person);  // true

1. 构造函数也是函数

构造函数与普通函数唯一的区别就是调用方式不同。除此之外，构造函数也是函数。并没有把某个函数定义为构造函数的特殊语法。任何函数只要使用 new 操作符调用就是构造函数，而不使用 new 操作符调用的函数就是普通函数。

// 作为构造函数 
let person = new Person("Nicholas", 29, "Software Engineer");
person.sayName();    // "Nicholas" 
 
// 作为函数调用
Person("Greg", 27, "Doctor");   // 添加到 window 对象
window.sayName();    // "Greg" 
 
// 在另一个对象的作用域中调用 
let o = new Object(); 
Person.call(o, "Kristen", 25, "Nurse");
o.sayName();   // "Kristen"

2. 构造函数的问题

。构造函数的主要问题在于，其定义的方法会在每个实例上都创建一遍。因此对前面的例子而言，person1 和 person2 都有名为 sayName()的方法，但这两个方法不是同一个 Function 实例。我们知道，ECMAScript中的函数是对象，因此每次定义函数时，都会初始化一个对象。逻辑上讲，这个构造函数实际上是这样的：

function Person(name, age, job){ 
  this.name = name;   
  this.age = age;
  this.job = job; 
  this.sayName = new Function("console.log(this.name)"); // 逻辑等价 
} 
//。因此不同实例上的函数虽然同名却不相等
//console.log(person1.sayName == person2.sayName); // false

要解决这个问题，可以把函数定义转移到构造函数外部：

function Person(name, age, job){ 
  this.name = name;  
  this.age = age; 
  this.job = job;  
  this.sayName = sayName;
} 
 
function 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

8.2.4 原型模式

理解原型和原型链就可以不用看这块了。

每个函数都会创建一个 prototype 属性，这个属性是一个对象，包含应该由特定引用类型的实例共享的属性和方法。实际上，这个对象就是通过调用构造函数创建的对象的原型。使用原型对象的好处是，在它上面定义的属性和方法可以被对象实例共享。原来在构造函数中直接赋给对象实例的值，可以直接赋值给它们的原型

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();
person1.sayName(); // "Nicholas" 
 
let person2 = new Person(); 
person2.sayName(); // "Nicholas" 
 
console.log(person1.sayName == person2.sayName); // true

1. 理解原型

无论何时，只要创建一个函数，就会按照特定的规则为这个函数创建一个 prototype 属性（指向原型对象）。默认情况下，所有原型对象自动获得一个名为 constructor 的属性，指回与之关联的构造函数。对前面的例子而言，Person.prototype.constructor 指向 Person。然后，因构造函数而异，可能会给原型对象添加其他属性和方法。

在自定义构造函数时，原型对象默认只会获得 constructor 属性，其他的所有方法都继承自 Object。每次调用构造函数创建一个新实例，这个实例的内部[[Prototype]]指针就会被赋值为构造函数的原型对象。脚本中没有访问这个[[Prototype]]特性的标准方式，Firefox、Safari和 Chrome 会在每个对象上暴露__proto__属性，通过这个属性可以访问对象的原型。在其他实现中，这个特性完全被隐藏了。关键在于理解这一点：实例与构造函数原型之间有直接的联系，但实例与构造函数之间没有。

虽然不是所有实现都对外暴露了[[Prototype]]，但可以使用 isPrototypeOf()方法确定两个对象之间的这种关系。本质上，isPrototypeOf()会在传入参数的[[Prototype]]指向调用它的对象时返回 true，如下所示：

console.log(Person.prototype.isPrototypeOf(person1));  // true 
console.log(Person.prototype.isPrototypeOf(person2));  // true

ECMAScript 的 Object 类型有一个方法叫 Object.getPrototypeOf()，返回参数的内部特性 [[Prototype]]的值。例如：

console.log(Object.getPrototypeOf(person1) == Person.prototype);  // true 
console.log(Object.getPrototypeOf(person1).name);                 // "Nicholas"

Object 类型还有一个 setPrototypeOf()方法，可以向实例的私有特性[[Prototype]]写入一个新值。这样就可以重写一个对象的原型继承关系：

let biped = {    numLegs: 2 }; 
let person = {   name: 'Matt' }; 
 
Object.setPrototypeOf(person, biped); 
 
console.log(person.name);                              // Matt 
console.log(person.numLegs);                           // 2 
console.log(Object.getPrototypeOf(person) === biped);  // true

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. 原型层级

在通过对象访问属性时，会按照这个属性的名称开始搜索。搜索开始于对象实例本身。如果在这个实例上发现了给定的名称，则返回该名称对应的值。如果没有找到这个属性，则搜索会沿着指针进入原型对象，然后在原型对象上找到属性后，再返回对应的值。因此，在调用 person1.sayName()时，会发生两步搜索。首先，JavaScript引擎会问：“person1 实例有 sayName 属性吗？”答案是没有。然后，继续搜索并问：“person1 的原型有 sayName 属性吗？”答案是有。于是就返回了保存在原型上的这个函数。在调用 person2.sayName()时，会发生同样的搜索过程，而且也会返回相同的结果。这就是原型用于在多个对象实例间共享属性和方法的原理。

3. 原型和 in 操作符

4. 属性枚举顺序

8.2.5 对象迭代

ECMAScript 2017 新增了两个静态方法，用于将对象内容转换为序列化的——更重要的是可迭代的——格式。这两个静态方法 Object.values()和 Object.entries()接收一个对象，返回它们内容的数组。Object.values() 返回对象值的数组，Object.entries()返回键/值对的数组。

const o = {    foo: 'bar',   baz: 1,   qux: {} }; 
 
console.log(Object.values(o)); 
// ["bar", 1, {}] 
 
console.log(Object.entries((o))); 
// [["foo", "bar"], ["baz", 1], ["qux", {}]] 


//注意，非字符串属性会被转换为字符串输出。另外，这两个方法执行对象的浅复制： 
const o = {    qux: {} }; 
 
console.log(Object.values(o)[0] === o.qux); // true 
 
console.log(Object.entries(o)[0][1] === o.qux); // true


//符号属性会被忽略： 
const sym = Symbol(); 
const o = {    [sym]: 'foo' }; 
 
console.log(Object.values(o)); // [] 
 
console.log(Object.entries((o))); // []

1. 其他原型语法

在前面的例子中，每次定义一个属性或方法都会把 Person.prototype 重写一遍。为了减少代码冗余，也为了从视觉上更好地封装原型功能，直接通过一个包含所有属性和方法的对象字面量来重写原型成为了一种常见的做法。

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

在这个例子中，Person.prototype 被设置为等于一个通过对象字面量创建的新对象。最终结果是一样的，只有一个问题：这样重写之后，Person.prototype 的 constructor 属性就不指向 Person 了。在创建函数时，也会创建它的 prototype 对象，同时会自动给这个原型的 constructor 属性赋值。而上面的写法完全重写了默认的 prototype 对象，因此其 constructor 属性也指向了完全不同的新对象（Object 构造函数），不再指向原来的构造函数。虽然 instanceof 操作符还能可靠地返回值，但我们不能再依靠 constructor 属性来识别类型了.

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

如果 constructor 的值很重要，则可以像下面这样在重写原型对象时专门设置一下它的值：

function Person() {  } 
 
Person.prototype = {  

  constructor: Person, 
  name: "Nicholas",   
  age: 29, 
  job: "Software Engineer",   
  sayName() {     console.log(this.name); 
}

但要注意，以这种方式恢复 constructor 属性会创建一个[[Enumerable]]为 true 的属性。而原生 constructor 属性默认是不可枚举的。因此，如果你使用的是兼容 ECMAScript的 JavaScript引擎，那可能会改为使用 Object.defineProperty()方法来定义 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"，没问题！

虽然随时能给原型添加属性和方法，并能够立即反映在所有对象实例上，但这跟重写整个原型是两回事。实例的[[Prototype]]指针是在调用构造函数时自动赋值的，这个指针即使把原型修改为不同的对象也不会变。重写整个原型会切断初原型与构造函数的联系，但实例引用的仍然是初的原型。记住，实例只有指向原型的指针，没有指向构造函数的指针。

重写构造函数上的原型之后再创建的实例才会引用新的原型。而在此之前创建的实例仍然会引用最初的原型。

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

3. 原生对象原型

原型模式之所以重要，不仅体现在自定义类型上，而且还因为它也是实现所有原生引用类型的模式。所有原生引用类型的构造函数（包括 Object、Array、String 等）都在原型上定义了实例方法。比如，数组实例的 sort()方法就是 Array.prototype 上定义的，而字符串包装对象的 substring()方法也是在 String.prototype 上定义的。

通过原生对象的原型可以取得所有默认方法的引用，也可以给原生类型的实例定义新的方法。可以像修改自定义对象原型一样修改原生对象原型，因此随时可以添加方法。

String.prototype.startsWith = function (text) {  
  return this.indexOf(text) === 0;  
}; 
 
let msg = "Hello world!"; 
console.log(msg.startsWith("Hello"));  // true

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

8.3 继承

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

8.3.1 原型链

ECMA-262把原型链定义为 ECMAScript的主要继承方式。其基本思想就是通过原型继承多个引用类型的属性和方法。重温一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针指向原型。如果原型是另一个类型的实例呢？那就意味着这个原型本身有一个内部指针指向另一个原型，相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。这就是原型链的基本构想。

function SuperType() {   this.property = true;  } 
 
SuperType.prototype.getSuperValue = function() {   return this.property; }; 
 
function SubType() {   this.subproperty = false; } 
 
// 继承 SuperType 
SubType.prototype = new SuperType(); 
 
SubType.prototype.getSubValue = function () {  return this.subproperty; }; 
 
let instance = new SubType(); 
console.log(instance.getSuperValue()); // true

原型链扩展了前面描述的原型搜索机制。我们知道，在读取实例上的属性时，首先会在实例上搜索这个属性。如果没找到，则会继承搜索实例的原型。在通过原型链实现继承之后，搜索就可以继承向上，搜索原型的原型。对前面的例子而言，调用 instance.getSuperValue()经过了 3步搜索：instance、 SubType.prototype 和 SuperType.prototype，后一步才找到这个方法。对属性和方法的搜索会一直持续到原型链的末端。

1. 默认原型

实际上，原型链中还有一环。默认情况下，所有引用类型都继承自 Object，这也是通过原型链实现的。任何函数的默认原型都是一个 Object 的实例，这意味着这个实例有一个内部指针指向 Object.prototype。这也是为什么自定义类型能够继承包括 toString()、valueOf()在内的所有默认方法的原因。

2. 原型与继承关系

原型与实例的关系可以通过两种方式来确定。第一种方式是使用 instanceof 操作符，如果一个实例的原型链中出现过相应的构造函数，则 instanceof 返回 true。

console.log(instance instanceof Object);     // true 
console.log(instance instanceof SuperType);  // true
console.log(instance instanceof SubType);    // true

确定这种关系的第二种方式是使用 isPrototypeOf()方法。原型链中的每个原型都可以调用这个方法，如下例所示，只要原型链中包含这个原型，这个方法就返回 true：

console.log(Object.prototype.isPrototypeOf(instance));     // true
console.log(SuperType.prototype.isPrototypeOf(instance));  // true 
console.log(SubType.prototype.isPrototypeOf(instance));    // true

3. 关于方法

子类有时候需要覆盖父类的方法，或者增加父类没有的方法。为此，这些方法必须在原型赋值之后再添加到原型上。

function SuperType() {    this.property = true; } 
 
SuperType.prototype.getSuperValue = function() {   return this.property; }; 
 
function SubType() {   this.subproperty = false; } 
 
// 继承 SuperType 
SubType.prototype = new SuperType(); 
 
// 新方法 
SubType.prototype.getSubValue = function () {   return this.subproperty; }; 
 
// 覆盖已有的方法 
SubType.prototype.getSuperValue = function () {   return false; }; 
 
let instance = new SubType();
console.log(instance.getSuperValue()); // false

另一个要理解的重点是，以对象字面量方式创建原型方法会破坏之前的原型链，因为这相当于重写了原型链。

function 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()); // 出错！

在这段代码中，子类的原型在被赋值为 SuperType 的实例后，又被一个对象字面量覆盖了。覆盖后的原型是一个 Object 的实例，而不再是 SuperType 的实例。因此之前的原型链就断了。SubType 和 SuperType 之间也没有关系了。

4. 原型链的问题

主要问题出现在原型中包含引用值的时候。前面在谈到原型的问题时也提到过，原型中包含的引用值会在所有实例间共享，这也是为什么属性通常会在构造函数中定义而不会定义在原型上的原因。在使用原型实现继承时，原型实际上变成了另一个类型的实例。这意味着原先的实例属性摇身一变成为了原型属性。

原型链的第二个问题是，子类型在实例化时不能给父类型的构造函数传参。事实上，我们无法在不影响所有对象实例的情况下把参数传进父类的构造函数。再加上之前提到的原型中包含引用值的问题，就导致原型链基本不会被单独使用。

8.3.2 盗用构造函数

为了解决原型包含引用值导致的继承问题，一种叫作“盗用构造函数”（constructor stealing）的技术在开发社区流行起来（这种技术有时也称作“对象伪装”或“经典继承”）。基本思路很简单：在子类构造函数中调用父类构造函数。因为毕竟函数就是在特定上下文中执行代码的简单对象，所以可以使用 apply()和 call()方法以新创建的对象为上下文执行构造函数。

function SuperType() {    this.colors = ["red", "blue", "green"]; } 
 
function SubType() {   
  // 继承 SuperType   
  SuperType.call(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 的实例创建的新对象的上下文中执行了。这相当于新的 SubType 对象上运行了 SuperType()函数中的所有初始化代码。结果就是每个实例都会有自己的 colors 属性。

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. 盗用构造函数的问题

盗用构造函数的主要缺点，也是使用构造函数模式自定义类型的问题：必须在构造函数中定义方法，因此函数不能重用。此外，子类也不能访问父类原型上定义的方法，因此所有类型只能使用构造函数模式。由于存在这些问题，盗用构造函数基本上也不能单独使用。

8.3.3 组合继承

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

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

在这个例子中，SuperType 构造函数定义了两个属性，name 和 colors，而它的原型上也定义了一个方法叫 sayName()。SubType 构造函数调用了 SuperType 构造函数，传入了 name 参数，然后又定义了自己的属性 age。此外，SubType.prototype 也被赋值为 SuperType 的实例。原型赋值之后，又在这个原型上添加了新方法 sayAge()。这样，就可以创建两个 SubType 实例，让这两个实例都有自己的属性，包括 colors，同时还共享相同的方法。

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

8.3.4 原型式继承

是即使不自定义类型也可以通过原型实现对象之间的信息共享。

function object(o) {  
  function F() {} 
  F.prototype = o;  
  return new F();
} 
let person = {    
  name: "Nicholas", 
  friends: ["Shelby", "Court", "Van"] 
}; 
 
let anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob"); 
 
let yetAnotherPerson = object(person); 
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie"); 
 
console.log(person.friends);  // "Shelby,Court,Van,Rob,Barbie"

ECMAScript 5通过增加 Object.create()方法将原型式继承的概念规范化了。这个方法接收两个参数：作为新对象原型的对象，以及给新对象定义额外属性的对象（第二个可选）。在只有一个参数时， Object.create()与这里的 object()方法效果相同：

let person = {  
  name: "Nicholas",   
  friends: ["Shelby", "Court", "Van"] 
}; 
 
let anotherPerson = Object.create(person); 
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob"); 
 
let yetAnotherPerson = Object.create(person); 
yetAnotherPerson.name = "Linda"; 
yetAnotherPerson.friends.push("Barbie"); 
 
console.log(person.friends);  // "Shelby,Court,Van,Rob,Barbie"

Object.create()的第二个参数与 Object.defineProperties()的第二个参数一样：每个新增属性都通过各自的描述符来描述。以这种方式添加的属性会遮蔽原型对象上的同名属性。

let person = {   
  name: "Nicholas",  
  friends: ["Shelby", "Court", "Van"] 
}; 
 
let anotherPerson = Object.create(person, {   name: {     value: "Greg"   } }); 
console.log(anotherPerson.name);  // "Greg"

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

8.3.5 寄生式继承

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

function createAnother(original){ 
  let clone = object(original);  // 通过调用函数创建一个新对象  
  clone.sayHi = function() {     // 以某种方式增强这个对象  
    console.log("hi");   
  };   
  return clone;           // 返回这个对象 
} 
let person = { 
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"]
}; 
 
let anotherPerson = createAnother(person);
anotherPerson.sayHi();  // "hi"

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

8.3.6 寄生式组合继承

组合继承其实也存在效率问题。主要的效率问题就是父类构造函数始终会被调用两次：一次在是创建子类原型时调用，另一次是在子类构造函数中调用。本质上，子类原型终是要包含超类对象的所有实例属性，子类构造函数只要在执行时重写自己的原型就行了。

寄生式组合继承通过盗用构造函数继承属性，但使用混合式原型链继承方法。基本思路是不通过调用父类构造函数给子类原型赋值，而是取得父类原型的一个副本。说到底就是使用寄生式继承来继承父类原型，然后将返回的新对象赋值给子类原型。

function inheritPrototype(subType, superType) {  
  let prototype = object(superType.prototype);  // 创建对象 
  prototype.constructor = subType;              // 增强对象  
  subType.prototype = prototype;                // 赋值对象
}
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); };

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

8.4 类

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

8.4.1 类定义

与函数类型相似，定义类也有两种主要方式：类声明和类表达式。这两种方式都使用 class 关键字加大括号：

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

与函数表达式类似，类表达式在它们被求值前也不能引用。不过，与函数定义不同的是，虽然函数声明可以提升，但类定义不能。另一个跟函数声明不同的地方是，函数受函数作用域限制，而类受块作用域限制。

类的构成

类可以包含构造函数方法、实例方法、获取函数、设置函数和静态类方法，但这些都不是必需的。空的类定义照样有效。默认情况下，类定义中的代码都在严格模式下执行。类表达式的名称是可选的。在把类表达式赋值给变量后，可以通过 name 属性取得类表达式的名称字符串。但不能在类表达式作用域外部访问这个标识符

// 空类定义，有效
class Foo {} 
 
// 有构造函数的类，有效 
class Bar {   constructor() {} } 
 
// 有获取函数的类，有效 
class Baz {   get myBaz() {} } 
 
// 有静态方法的类，有效 
class Qux {   static myQux() {} } 

let Person = class PersonName {   
  identify() {      
    console.log(Person.name, PersonName.name);   
  } 
} 
 
let p = new Person(); 
 
p.identify();               // PersonName PersonName 
 
console.log(Person.name);   // PersonName
console.log(PersonName);    // ReferenceError: PersonName is not defined

8.4.2 类构造函数

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

1. 实例化

使用 new 操作符实例化 Person 的操作等于使用 new 调用其构造函数。唯一可感知的不同之处就是，JavaScript解释器知道使用 new 和类意味着应该使用 constructor 函数进行实例化。使用 new 调用类的构造函数会执行如下操作。

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

class Animal {} 
 
class Person {   
  constructor() {   
    console.log('person ctor'); 
  }
} 
 
class Vegetable {   
  constructor() {   
    this.color = 'orange';  
  }
} 
 
let a = new Animal(); 
 
let p = new Person();  // person ctor 
 
let v = new Vegetable(); 
console.log(v.color);  // orange

类实例化时传入的参数会用作构造函数的参数。如果不需要参数，则类名后面的括号也是可选的：

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 {         
        bar: 'bar'   
      };  
    }   
  }
} 
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 操作符检查构造函数原型是否存在于实例的原型链中。

class Person {} 
 
console.log(Person);         // class Person {} 
console.log(typeof Person);  // function 
console.log(Person.prototype);                         // { constructor: f() }
console.log(Person === Person.prototype.constructor);  // true 


let p = new Person(); 
console.log(p instanceof Person); // true

如前所述，类本身具有与普通构造函数一样的行为。在类的上下文中，类本身在使用 new 调用时就会被当成构造函数。重点在于，类中定义的 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) { 
  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 {}

8.4.3 实例、原型和类成员

1. 实例成员

每次通过new调用类标识符时，都会执行类构造函数。在这个函数内部，可以为新创建的实例（this）添加“自有”属性。至于添加什么样的属性，则没有限制。另外，在构造函数执行完毕后，仍然可以给实例继续添加新成员。每个实例都对应一个唯一的成员对象，这意味着所有成员都不会在原型上共享：

class Person {  
  constructor() {    
    // 这个例子先使用对象包装类型定义一个字符串    
    // 为的是在下面测试两个对象的相等性     
    this.name = new String('Jack'); 

    this.sayName = () => console.log(this.name); 

    this.nicknames = ['Jake', 'J-Dog'] 
  }
} 
 
let p1 = new Person(), 
p2 = new Person(); 
 
p1.sayName(); // Jack 
p2.sayName(); // Jack 
 
console.log(p1.name === p2.name);            // false
console.log(p1.sayName === p2.sayName);      // false 
console.log(p1.nicknames === p2.nicknames);  // false 
 
p1.name = p1.nicknames[0];
p2.name = p2.nicknames[1]; 
 
p1.sayName();  // Jake
p2.sayName();  // J-Dog

2. 原型方法与访问器

为了在实例间共享方法，类定义语法把在类块中定义的方法作为原型方法。类方法等同于对象属性，因此可以使用字符串、符号或计算的值作为键.类定义也支持获取和设置访问器。语法与行为跟普通对象一样。

class Person {   
  constructor() {    
  // 添加到 this 的所有内容都会存在于不同的实例上   
  this.locate = () => console.log('instance');  
  } 
   // 在类块中定义的所有内容都会定义在类的原型上   
  locate() {    
     console.log('prototype');   
  }
} 
 
let p = new Person(); 
 
p.locate();                 // instance 
Person.prototype.locate();  // prototype

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. 非函数原型和类成员

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

5. 迭代器与生成器方法

类定义语法支持在原型和类本身上定义生成器方法：

class Person {    
  // 在原型上定义生成器方法   
  *createNicknameIterator() {    
    yield 'Jack';  
    yield 'Jake';  
    yield 'J-Dog';   
  } 
 
  // 在类上定义生成器方法  
  static *createJobIterator() {   
    yield 'Butcher';   
    yield 'Baker';   
    yield 'Candlestick maker'; 
  }
} 
 
let jobIter = Person.createJobIterator(); 
console.log(jobIter.next().value);  // Butcher 
console.log(jobIter.next().value);  // Baker 
console.log(jobIter.next().value);  // Candlestick maker 
 
let p = new Person(); 
let nicknameIter = p.createNicknameIterator(); 

console.log(nicknameIter.next().value);  // Jack 
console.log(nicknameIter.next().value);  // Jake
console.log(nicknameIter.next().value);  // J-Dog

因为支持生成器方法，所以可以通过添加一个默认的迭代器，把类实例变成可迭代对象：

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

8.4.4 继承

ECMAScript 6 新增特性中出色的一个就是原生支持了类继承机制。虽然类继承使用的是新语法，但背后依旧使用的是原型链。

1. 继承基础

ES6类支持单继承。使用 extends 关键字，就可以继承任何拥有[[Construct]]和原型的对象。很大程度上，这意味着不仅可以继承一个类，也可以继承普通的构造函数（保持向后兼容）：

  class Vehicle {}  
 
// 继承类 
  class Bus extends Vehicle {} 
 
  let b = new Bus();
  console.log(b instanceof Bus);      // true
  console.log(b instanceof Vehicle);  // true 
 
 
  function Person() {} 
 
// 继承普通构造函数
  class Engineer extends Person {} 
 
  let e = new Engineer();
  console.log(e instanceof Engineer);  // true 
  console.log(e instanceof Person);    // true

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();

ES6给类构造函数和静态方法添加了内部特性[[HomeObject]]，这个特性是一个指针，指向定义该方法的对象。这个指针是自动赋值的，而且只能在 JavaScript 引擎内部访问。super 始终会定义为[[HomeObject]]的原型。

在使用 super 时要注意几个问题。

super 只能在派生类构造函数和静态方法中使用。
不能单独引用 super 关键字，要么用它调用构造函数，要么用它引用静态方法。
调用 super()会调用父类构造函数，并将返回的实例赋值给 this。
super()的行为如同调用构造函数，如果需要给父类构造函数传参，则需要手动传入。
如果没有定义类构造函数，在实例化派生类时会调用 super()，而且会传入所有传给派生类的参数。
在类构造函数中，不能在调用 super()之前引用 this。
如果在派生类中显式定义了构造函数，则要么必须在其中调用 super()，要么必须在其中返回一个对象。

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) {
      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()

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]

有些内置类型的方法会返回新实例。默认情况下，返回实例的类型与原始实例的类型是一致的。如果想覆盖这个默认行为，则可以覆盖 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(a2 instanceof SuperArray);  // false

5. 类混入

把不同类的行为集中到一个类是一种常见的 JavaScript模式。虽然 ES6没有显式支持多类继承，但通过现有特性可以轻松地模拟这种行为。

Object.assign()方法是为了混入对象行为而设计的。只有在需要混入类的行为时才有必要自己实现混入表达式。如果只是需要混入多个对象的属性，那么使用 Object.assign()就可以了。

在下面的代码片段中，extends 关键字后面是一个 JavaScript表达式。任何可以解析为一个类或一个构造函数的表达式都是有效的。这个表达式会在求值类定义时被求值：

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

混入模式可以通过在一个表达式中连多个混入元素来实现，这个表达式终会解析为一个可以被继承的类。如果 Person 类需要组合 A、B、C，则需要某种机制实现 B继承 A，C继承 B，而 Person再继承 C，从而把 A、B、C组合到这个超类中。实现这种模式有不同的策略。

8.5 小结

对象在代码执行过程中的任何时候都可以被创建和增强，具有极大的动态性，并不是严格定义的实体。下面的模式适用于创建对象。

工厂模式就是一个简单的函数，这个函数可以创建对象，为它添加属性和方法，然后返回这个对象。这个模式在构造函数模式出现后就很少用了。
使用构造函数模式可以自定义引用类型，可以使用 new 关键字像创建内置类型实例一样创建自定义类型的实例。不过，构造函数模式也有不足，主要是其成员无法重用，包括函数。考虑到函数本身是松散的、弱类型的，没有理由让函数不能在多个对象实例间共享。
原型模式解决了成员共享的问题，只要是添加到构造函数 prototype 上的属性和方法就可以共享。而组合构造函数和原型模式通过构造函数定义实例属性，通过原型定义共享的属性和方法。

JavaScript的继承主要通过原型链来实现。原型链涉及把构造函数的原型赋值为另一个类型的实例。这样一来，子类就可以访问父类的所有属性和方法，就像基于类的继承那样。原型链的问题是所有继承的属性和方法都会在对象实例间共享，无法做到实例私有。盗用构造函数模式通过在子类构造函数中调用父类构造函数，可以避免这个问题。这样可以让每个实例继承的属性都是私有的，但要求类型只能通过构造函数模式来定义（因为子类不能访问父类原型上的方法）。目前流行的继承模式是组合继承，即通过原型链继承共享的属性和方法，通过盗用构造函数继承实例属性。除上述模式之外，还有以下几种继承模式。

原型式继承可以无须明确定义构造函数而实现继承，本质上是对给定对象执行浅复制。这种操作的结果之后还可以再进一步增强。
与原型式继承紧密相关的是寄生式继承，即先基于一个对象创建一个新对象，然后再增强这个新对象，后返回新对象。这个模式也被用在组合继承中，用于避免重复调用父类构造函数导致的浪费。
寄生组合继承被认为是实现基于类型继承的有效方式。

ECMAScript 6新增的类很大程度上是基于既有原型机制的语法糖。类的语法让开发者可以优雅地定义向后兼容的类，既可以继承内置类型，也可以继承自定义类型。类有效地跨越了对象实例、对象原型和对象类之间的鸿沟。

参考文献：

《JavaScript高级程序设计（第4版）》

JavaScript高级程序设计（第四版）阅读笔记_第八章（持续更新...)