9日十月 2020

原型继承

在编程中，我们经常会想获取并扩展一些东西。

例如，我们有一个 user 对象及其属性和方法，并希望将 admin 和 guest 作为基于 user 稍加修改的变体。我们想重用 user 中的内容，而不是复制/重新实现它的方法，而只是在其之上构建一个新的对象。

原型继承（Prototypal inheritance） 这个语言特性能够帮助我们实现这一需求。

[[Prototype]]

在 JavaScript 中，对象有一个特殊的隐藏属性 [[Prototype]]（如规范中所命名的），它要么为 null，要么就是对另一个对象的引用。该对象被称为“原型”：

原型有点“神奇”。当我们想要从 object 中读取一个缺失的属性时，JavaScript 会自动从原型中获取该属性。在编程中，这种行为被称为“原型继承”。许多炫酷的语言特性和编程技巧都基于此。

属性 [[Prototype]] 是内部的而且是隐藏的，但是这儿有很多设置它的方式。

其中之一就是使用特殊的名字 __proto__，就像这样：

let animal = {
  eats: true
};
let rabbit = {
  jumps: true
};

rabbit.__proto__ = animal;

__proto__ 是 [[Prototype]] 的因历史原因而留下来的 getter/setter

请注意，__proto__ 与 [[Prototype]] 不一样。__proto__ 是 [[Prototype]] 的 getter/setter。

__proto__ 的存在是历史的原因。在现代编程语言中，将其替换为函数 Object.getPrototypeOf/Object.setPrototypeOf 也能 get/set 原型。我们稍后将学习造成这种情况的原因以及这些函数。

根据规范，__proto__ 必须仅在浏览器环境下才能得到支持，但实际上，包括服务端在内的所有环境都支持它。目前，由于 __proto__ 标记在观感上更加明显，所以我们在后面的示例中将使用它。

如果我们在 rabbit 中查找一个缺失的属性，JavaScript 会自动从 animal 中获取它。

例如：

let animal = {
  eats: true
};
let rabbit = {
  jumps: true
};

rabbit.__proto__ = animal; // (*)

// 现在这两个属性我们都能在 rabbit 中找到：
alert( rabbit.eats ); // true (**)
alert( rabbit.jumps ); // true

这里的 (*) 行将 animal 设置为 rabbit 的原型。

当 alert 试图读取 rabbit.eats (**) 时，因为它不存在于 rabbit 中，所以 JavaScript 会顺着 [[Prototype]] 引用，在 animal 中查找（自下而上）：

在这儿我们可以说 "animal 是 rabbit 的原型"，或者说 "rabbit 的原型是从 animal 继承而来的"。

因此，如果 animal 有许多有用的属性和方法，那么它们将自动地变为在 rabbit 中可用。这种属性被称为“继承”。

如果我们在 animal 中有一个方法，它可以在 rabbit 中被调用：

let animal = {
  eats: true,
  walk() {
    alert("Animal walk");
  }
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

// walk 方法是从原型中获得的
rabbit.walk(); // Animal walk

该方法是自动地从原型中获得的，像这样：

原型链可以很长：

let animal = {
  eats: true,
  walk() {
    alert("Animal walk");
  }
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

let longEar = {
  earLength: 10,
  __proto__: rabbit
};

// walk 是通过原型链获得的
longEar.walk(); // Animal walk
alert(longEar.jumps); // true（从 rabbit）

这里只有两个限制：

引用不能形成闭环。如果我们试图在一个闭环中分配 __proto__，JavaScript 会抛出错误。
__proto__ 的值可以是对象，也可以是 null。而其他的类型都会被忽略。

当然，这可能很显而易见，但是仍然要强调：只能有一个 [[Prototype]]。一个对象不能从其他两个对象获得继承。

写入不使用原型

原型仅用于读取属性。

对于写入/删除操作可以直接在对象上进行。

在下面的示例中，我们将为 rabbit 分配自己的 walk：

let animal = {
  eats: true,
  walk() {
    /* rabbit 不会使用此方法 */
  }
};

let rabbit = {
  __proto__: animal
};

rabbit.walk = function() {
  alert("Rabbit! Bounce-bounce!");
};

rabbit.walk(); // Rabbit! Bounce-bounce!

从现在开始，rabbit.walk() 将立即在对象中找到该方法并执行，而无需使用原型：

访问器（accessor）属性是一个例外，因为分配（assignment）操作是由 setter 函数处理的。因此，写入此类属性实际上与调用函数相同。

也就是这个原因，所以下面这段代码中的 admin.fullName 能够正常运行：

let user = {
  name: "John",
  surname: "Smith",

  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  },

  get fullName() {
    return `${this.name} ${this.surname}`;
  }
};

let admin = {
  __proto__: user,
  isAdmin: true
};

alert(admin.fullName); // John Smith (*)

// setter triggers!
admin.fullName = "Alice Cooper"; // (**)

在 (*) 行中，属性 admin.fullName 在原型 user 中有一个 getter，因此它会被调用。在 (**) 行中，属性在原型中有一个 setter，因此它会被调用。

“this” 的值

在上面的例子中可能会出现一个有趣的问题：在 set fullName(value) 中 this 的值是什么？属性 this.name 和 this.surname 被写在哪里：在 user 还是 admin？

答案很简单：this 根本不受原型的影响。

无论在哪里找到方法：在一个对象还是在原型中。在一个方法调用中，this 始终是点符号 . 前面的对象。

因此，setter 调用 admin.fullName= 使用 admin 作为 this，而不是 user。

这是一件非常重要的事儿，因为我们可能有一个带有很多方法的大对象，并且还有从其继承的对象。当继承的对象运行继承的方法时，它们将仅修改自己的状态，而不会修改大对象的状态。

例如，这里的 animal 代表“方法存储”，rabbit 在使用其中的方法。

调用 rabbit.sleep() 会在 rabbit 对象上设置 this.isSleeping：

// animal 有一些方法
let animal = {
  walk() {
    if (!this.isSleeping) {
      alert(`I walk`);
    }
  },
  sleep() {
    this.isSleeping = true;
  }
};

let rabbit = {
  name: "White Rabbit",
  __proto__: animal
};

// 修改 rabbit.isSleeping
rabbit.sleep();

alert(rabbit.isSleeping); // true
alert(animal.isSleeping); // undefined（原型中没有此属性）

结果示意图：

如果我们还有从 animal 继承的其他对象，像 bird 和 snake 等，它们也将可以访问 animal 的方法。但是，每个方法调用中的 this 都是在调用时（点符号前）评估的对应的对象，而不是 animal。因此，当我们将数据写入 this时，会将其存储到这些对象中。

所以，方法是共享的，但对象状态不是。

for…in 循环

for..in 循环也会迭代继承的属性。

例如：

let animal = {
  eats: true
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

// Object.keys 只返回自己的 key
alert(Object.keys(rabbit)); // jumps

// for..in 会遍历自己以及继承的键
for(let prop in rabbit) alert(prop); // jumps，然后是 eats

如果这不是我们想要的，并且我们想排除继承的属性，那么这儿有一个内建方法 obj.hasOwnProperty(key)：如果 obj具有自己的（非继承的）名为 key 的属性，则返回 true。

因此，我们可以过滤掉继承的属性（或对它们进行其他操作）：

let animal = {
  eats: true
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

for(let prop in rabbit) {
  let isOwn = rabbit.hasOwnProperty(prop);

  if (isOwn) {
    alert(`Our: ${prop}`); // Our: jumps
  } else {
    alert(`Inherited: ${prop}`); // Inherited: eats
  }
}

这里我们有以下继承链：rabbit 从 animal 中继承，animal 从 Object.prototype 中继承（因为 animal 是对象字面量 {...}，所以这是默认的继承），然后再向上是 null：

注意，这有一件很有趣的事儿。方法 rabbit.hasOwnProperty 来自哪儿？我们并没有定义它。从上图中的原型链我们可以看到，该方法是 Object.prototype.hasOwnProperty 提供的。换句话说，它是继承的。

……如果 for..in 循环会列出继承的属性，那为什么 hasOwnProperty 没有像 eats 和 jumps 那样出现在 for..in 循环中？

答案很简单：它是不可枚举的。就像 Object.prototype 的其他属性，hasOwnProperty 有 enumerable:false标志。并且 for..in 只会列出可枚举的属性。这就是为什么它和其余的 Object.prototype 属性都未被列出。

几乎所有其他键/值获取方法都忽略继承的属性

几乎所有其他键/值获取方法，例如 Object.keys 和 Object.values 等，都会忽略继承的属性。

它们只会对对象自身进行操作。不考虑 继承自原型的属性。

总结

在 JavaScript 中，所有的对象都有一个隐藏的 [[Prototype]] 属性，它要么是另一个对象，要么就是 null。
我们可以使用 obj.__proto__ 访问它（历史遗留下来的 getter/setter，这儿还有其他方法，很快我们就会讲到）。
通过 [[Prototype]] 引用的对象被称为“原型”。
如果我们想要读取 obj 的一个属性或者调用一个方法，并且它不存在，那么 JavaScript 就会尝试在原型中查找它。
写/删除操作直接在对象上进行，它们不使用原型（假设它是数据属性，不是 setter）。
如果我们调用 obj.method()，而且 method 是从原型中获取的，this 仍然会引用 obj。因此，方法始终与当前对象一起使用，即使方法是继承的。
for..in 循环在其自身和继承的属性上进行迭代。所有其他的键/值获取方法仅对对象本身起作用。

为什么两只仓鼠都饱了？

重要程度: 5

我们有两只仓鼠：speedy 和 lazy 都继承自普通的 hamster 对象。

当我们喂其中一只的时候，另一只也吃饱了。为什么？如何修复它？

let hamster = {
  stomach: [],

  eat(food) {
    this.stomach.push(food);
  }
};

let speedy = {
  __proto__: hamster
};

let lazy = {
  __proto__: hamster
};

// 这只仓鼠找到了食物
speedy.eat("apple");
alert( speedy.stomach ); // apple

// 这只仓鼠也找到了食物，为什么？请修复它。
alert( lazy.stomach ); // apple

解决方案

我们仔细研究一下在调用 speedy.eat("apple") 的时候，发生了什么。

speedy.eat 方法在原型（=hamster）中被找到，然后执行 this=speedy（在点符号前面的对象）。
this.stomach.push() 需要找到 stomach 属性，然后对其调用 push。它在 this（=speedy）中查找 stomach，但并没有找到。
然后它顺着原型链，在 hamster 中找到 stomach。
然后它对 stomach 调用 push，将食物添加到 stomach 的原型 中。

因此，所有的仓鼠共享了同一个胃！

对于 lazy.stomach.push(...) 和 speedy.stomach.push() 而言，属性 stomach 被在原型中找到（不是在对象自身），然后向其中 push 了新数据。

请注意，在简单的赋值 this.stomach= 的情况下不会出现这种情况：

let hamster = {
  stomach: [],

  eat(food) {
    // 分配给 this.stomach 而不是 this.stomach.push
    this.stomach = [food];
  }
};

let speedy = {
   __proto__: hamster
};

let lazy = {
  __proto__: hamster
};

// 仓鼠 Speedy 找到了食物
speedy.eat("apple");
alert( speedy.stomach ); // apple

// 仓鼠 Lazy 的胃是空的
alert( lazy.stomach ); // <nothing>

现在，一切都运行正常，因为 this.stomach= 不会执行对 stomach 的查找。该值会被直接写入 this 对象。

此外，我们还可以通过确保每只仓鼠都有自己的胃来完全回避这个问题：

let hamster = {
  stomach: [],

  eat(food) {
    this.stomach.push(food);
  }
};

let speedy = {
  __proto__: hamster,
  stomach: []
};

let lazy = {
  __proto__: hamster,
  stomach: []
};

// 仓鼠 Speedy 找到了食物
speedy.eat("apple");
alert( speedy.stomach ); // apple

// 仓鼠 Lazy 的胃是空的
alert( lazy.stomach ); // <nothing>

作为一种常见的解决方案，所有描述特定对象状态的属性，例如上面的 stomach，都应该被写入该对象中。这样可以避免此类问题。

F.prototype

我们还记得，可以使用诸如 new F() 这样的构造函数来创建一个新对象。

如果 F.prototype 是一个对象，那么 new 操作符会使用它为新对象设置 [[Prototype]]。

请注意：

JavaScript 从一开始就有了原型继承。这是 JavaScript 编程语言的核心特性之一。

但是在过去，没有直接对其进行访问的方式。唯一可靠的方法是本章中会介绍的构造函数的 "prototype" 属性。目前仍有许多脚本仍在使用它。

请注意，这里的 F.prototype 指的是 F 的一个名为 "prototype" 的常规属性。这听起来与“原型”这个术语很类似，但这里我们实际上指的是具有该名字的常规属性。

下面是一个例子：

let animal = {
  eats: true
};

function Rabbit(name) {
  this.name = name;
}

Rabbit.prototype = animal;

let rabbit = new Rabbit("White Rabbit"); //  rabbit.__proto__ == animal

alert( rabbit.eats ); // true

设置 Rabbit.prototype = animal 的字面意思是：“当创建了一个 new Rabbit 时，把它的 [[Prototype]] 赋值为 animal”。

这是结果示意图：

在上图中，"prototype" 是一个水平箭头，表示一个常规属性，[[Prototype]] 是垂直的，表示 rabbit 继承自 animal。

F.prototype 仅用在 new F 时

F.prototype 属性仅在 new F 被调用时使用，它为新对象的 [[Prototype]] 赋值。

如果在创建之后，F.prototype 属性有了变化（F.prototype = <another object>），那么通过 new F 创建的新对象也将随之拥有新的对象作为 [[Prototype]]，但已经存在的对象将保持旧有的值。

默认的 F.prototype，构造器属性

每个函数都有 "prototype" 属性，即使我们没有提供它。

默认的 "prototype" 是一个只有属性 constructor 的对象，属性 constructor 指向函数自身。

像这样：

function Rabbit() {}

/* default prototype
Rabbit.prototype = { constructor: Rabbit };
*/

我们可以检查一下：

function Rabbit() {}
// by default:
// Rabbit.prototype = { constructor: Rabbit }

alert( Rabbit.prototype.constructor == Rabbit ); // true

通常，如果我们什么都不做，constructor 属性可以通过 [[Prototype]] 给所有 rabbits 使用：

function Rabbit() {}
// by default:
// Rabbit.prototype = { constructor: Rabbit }

let rabbit = new Rabbit(); // inherits from {constructor: Rabbit}

alert(rabbit.constructor == Rabbit); // true (from prototype)

我们可以使用 constructor 属性来创建一个新对象，该对象使用与现有对象相同的构造器。

像这样：

function Rabbit(name) {
  this.name = name;
  alert(name);
}

let rabbit = new Rabbit("White Rabbit");

let rabbit2 = new rabbit.constructor("Black Rabbit");

当我们有一个对象，但不知道它使用了哪个构造器（例如它来自第三方库），并且我们需要创建另一个类似的对象时，用这种方法就很方便。

但是，关于 "constructor" 最重要的是……

……JavaScript 自身并不能确保正确的 "constructor" 函数值。

是的，它存在于函数的默认 "prototype" 中，但仅此而已。之后会发生什么 —— 完全取决于我们。

特别是，如果我们将整个默认 prototype 替换掉，那么其中就不会有 "constructor" 了。

例如：

function Rabbit() {}
Rabbit.prototype = {
  jumps: true
};

let rabbit = new Rabbit();
alert(rabbit.constructor === Rabbit); // false

因此，为了确保正确的 "constructor"，我们可以选择添加/删除属性到默认 "prototype"，而不是将其整个覆盖：

function Rabbit() {}

// 不要将 Rabbit.prototype 整个覆盖
// 可以向其中添加内容
Rabbit.prototype.jumps = true
// 默认的 Rabbit.prototype.constructor 被保留了下来

或者，也可以手动重新创建 constructor 属性：

Rabbit.prototype = {
  jumps: true,
  constructor: Rabbit
};

// 这样的 constructor 也是正确的，因为我们手动添加了它

总结

在本章中，我们简要介绍了为通过构造函数创建的对象设置 [[Prototype]] 的方法。稍后我们将看到更多依赖于此的高级编程模式。

一切都很简单，只需要记住几条重点就可以清晰地掌握了：

F.prototype 属性（不要把它与 [[Prototype]] 弄混了）在 new F 被调用时为新对象的 [[Prototype]] 赋值。
F.prototype 的值要么是一个对象，要么就是 null：其他值都不起作用。
"prototype" 属性仅在设置了一个构造函数（constructor function），并通过 new 调用时，才具有这种特殊的影响。

在常规对象上，prototype 没什么特别的：

let user = {
  name: "John",
  prototype: "Bla-bla" // 这里只是普通的属性
};

默认情况下，所有函数都有 F.prototype = {constructor：F}，所以我们可以通过访问它的 "constructor" 属性来获取一个对象的构造器。

修改 "prototype"

重要程度: 5

在下面的代码中，我们创建了 new Rabbit，然后尝试修改它的 prototype。

最初，我们有以下代码：

function Rabbit() {}
Rabbit.prototype = {
  eats: true
};

let rabbit = new Rabbit();

alert( rabbit.eats ); // true

我们增加了一个字符串（强调）。现在 alert 会显示什么？

function Rabbit() {}
Rabbit.prototype = {
  eats: true
};

let rabbit = new Rabbit();

Rabbit.prototype = {};

alert( rabbit.eats ); // ?

……如果代码是这样的（修改了一行）？

function Rabbit() {}
Rabbit.prototype = {
  eats: true
};

let rabbit = new Rabbit();

Rabbit.prototype.eats = false;

alert( rabbit.eats ); // ?

像这样呢（修改了一行）？

function Rabbit() {}
Rabbit.prototype = {
  eats: true
};

let rabbit = new Rabbit();

delete rabbit.eats;

alert( rabbit.eats ); // ?

最后一种变体：

function Rabbit() {}
Rabbit.prototype = {
  eats: true
};

let rabbit = new Rabbit();

delete Rabbit.prototype.eats;

alert( rabbit.eats ); // ?

解决方案

答案：

true。

Rabbit.prototype 的赋值操作为新对象设置了 [[Prototype]]，但它不影响已有的对象。
false。

对象通过引用被赋值。来自 Rabbit.prototype 的对象并没有被复制，它仍然是被 Rabbit.prototype 和 rabbit 的 [[Prototype]] 引用的单个对象。

所以当我们通过一个引用更改其内容时，它对其他引用也是可见的。
true。

所有 delete 操作都直接应用于对象。这里的 delete rabbit.eats 试图从 rabbit 中删除 eats 属性，但 rabbit 对象并没有 eats 属性。所以这个操作不会有任何影响。
undefined。

属性 eats 被从 prototype 中删除，prototype 中就没有这个属性了。

使用相同的构造函数创建一个对象

重要程度: 5

想象一下，我们有一个由构造函数创建的对象 obj —— 我们不知道使用的是哪个构造函数，但是我们想使用它创建一个新对象。

我们可以这样做吗？

let obj2 = new obj.constructor();

请给出一个可以使这样的代码正常工作的 obj 的构造函数的例子。再给出会导致这样的代码无法正确工作的例子。

解决方案

如果我们确信 "constructor" 属性具有正确的值，那么就可以使用这种方法。

例如，如果我们不触碰默认的 "prototype"，那么这段代码肯定可以正常运行：

function User(name) {
  this.name = name;
}

let user = new User('John');
let user2 = new user.constructor('Pete');

alert( user2.name ); // Pete (worked!)

它起作用了，因为 User.prototype.constructor == User。

……但是如果有人，重写了 User.prototype，并忘记可重新创建 constructor 以引用 User，那么上面这段代码就会运行失败。

例如：

function User(name) {
  this.name = name;
}
User.prototype = {}; // (*)

let user = new User('John');
let user2 = new user.constructor('Pete');

alert( user2.name ); // undefined

为什么 user2.name 是 undefined？

这是 new user.constructor('Pete') 的工作流程：

首先，它在 user 中寻找 constructor。没找到。
然后它追溯原型链。user 的原型是 User.prototype，它也什么都没有。
User.prototype 的值是一个普通对象 {}，该对象的原型是 Object.prototype。并且 Object.prototype.constructor == Object。所以就用它了。

最后，我们有 let user2 = new Object('Pete')。内建的 Object 构造函数会忽略参数，它总是创建一个类似于 let user2 = {} 的空对象，这就是最后我们在 user2 中拥有的东西。

原生的原型

"prototype" 属性在 JavaScript 自身的核心部分中被广泛地应用。所有的内置构造函数都用到了它。

首先，我们将看看原生原型的详细信息，然后学习如何使用它为内建对象添加新功能。

Object.prototype

假如我们输出一个空对象：

let obj = {};
alert( obj ); // "[object Object]" ?

生成字符串 "[object Object]" 的代码在哪里？那就是一个内建的 toString 方法，但是它在哪里呢？obj 是空的！

……然而简短的表达式 obj = {} 和 obj = new Object() 是一个意思，其中 Object 就是一个内建的对象构造函数，其自身的 prototype 指向一个带有 toString 和其他方法的一个巨大的对象。

就像这样：

当 new Object() 被调用（或一个字面量对象 {...} 被创建），按照前面章节中我们学习过的规则，这个对象的 [[Prototype]] 属性被设置为 Object.prototype：

所以，之后当 obj.toString() 被调用时，这个方法是从 Object.prototype 中获取的。

我们可以这样验证它：

let obj = {};

alert(obj.__proto__ === Object.prototype); // true
// obj.toString === obj.__proto__.toString == Object.prototype.toString

请注意在 Object.prototype 上方的链中没有更多的 [[Prototype]]：

alert(Object.prototype.__proto__); // null

其他内建原型

其他内建对象，像 Array、Date、Function 及其他，都在 prototype 上挂载了方法。

例如，当我们创建一个数组 [1, 2, 3]，在内部会默认使用 new Array() 构造器。因此 Array.prototype 变成了这个数组的 prototype，并为这个数组提供数组的操作方法。这样内存的存储效率是很高的。

按照规范，所有的内建原型顶端都是 Object.prototype。这就是为什么有人说“一切都从对象继承而来”。

下面是完整的示意图（3 个内建对象）：

让我们手动验证原型：

let arr = [1, 2, 3];

// 它继承自 Array.prototype？
alert( arr.__proto__ === Array.prototype ); // true

// 接下来继承自 Object.prototype？
alert( arr.__proto__.__proto__ === Object.prototype ); // true

// 原型链的顶端为 null。
alert( arr.__proto__.__proto__.__proto__ ); // null

一些方法在原型上可能会发生重叠，例如，Array.prototype 有自己的 toString 方法来列举出来数组的所有元素并用逗号分隔每一个元素。

let arr = [1, 2, 3]
alert(arr); // 1,2,3 <-- Array.prototype.toString 的结果

正如我们之前看到的那样，Object.prototype 也有 toString 方法，但是 Array.prototype 在原型链上更近，所以数组对象原型上的方法会被使用。

浏览器内的工具，像 Chrome 开发者控制台也会显示继承性（可能需要对内置对象使用 console.dir）：

其他内建对象也以同样的方式运行。即使是函数 —— 它们是内建构造器 Function 的对象，并且它们的方法（call/apply 及其他）都取自 Function.prototype。函数也有自己的 toString 方法。

function f() {}

alert(f.__proto__ == Function.prototype); // true
alert(f.__proto__.__proto__ == Object.prototype); // true, inherit from objects

基本数据类型

最复杂的事情发生在字符串、数字和布尔值上。

正如我们记忆中的那样，它们并不是对象。但是如果我们试图访问它们的属性，那么临时包装器对象将会通过内建的构造器 String、Number 和 Boolean 被创建。它们提供给我们操作字符串、数字和布尔值的方法然后消失。

这些对象对我们来说是无形地创建出来的。大多数引擎都会对其进行优化，但是规范中描述的就是通过这种方式。这些对象的方法也驻留在它们的 prototype 中，可以通过 String.prototype、Number.prototype 和 Boolean.prototype 进行获取。

值 null 和 undefined 没有对象包装器

特殊值 null 和 undefined 比较特殊。它们没有对象包装器，所以它们没有方法和属性。并且它们也没有相应的原型。

更改原生原型

原生的原型是可以被修改的。例如，我们向 String.prototype 中添加一个方法，这个方法将对所有的字符串都是可用的：

String.prototype.show = function() {
  alert(this);
};

"BOOM!".show(); // BOOM!

在开发的过程中，我们可能会想要一些新的内建方法，并且想把它们添加到原生原型中。但这通常是一个很不好的想法。

重要：

原型是全局的，所以很容易造成冲突。如果有两个库都添加了 String.prototype.show 方法，那么其中的一个方法将被另一个覆盖。

所以，通常来说，修改原生原型被认为是一个很不好的想法。

在现代编程中，只有一种情况下允许修改原生原型。那就是 polyfilling。

Polyfilling 是一个术语，表示某个方法在 JavaScript 规范中已存在，但是特定的 JavaScript 引擎尚不支持该方法，那么我们可以通过手动实现它，并用以填充内建原型。

例如：

if (!String.prototype.repeat) { // 如果这儿没有这个方法
  // 那就在 prototype 中添加它

  String.prototype.repeat = function(n) {
    // 重复传入的字符串 n 次

    // 实际上，实现代码比这个要复杂一些（完整的方法可以在规范中找到）
    // 但即使是不够完美的 polyfill 也常常被认为是足够好的
    return new Array(n + 1).join(this);
  };
}

alert( "La".repeat(3) ); // LaLaLa

从原型中借用

在装饰者模式和转发，call/apply 一章中，我们讨论了方法借用。

那是指我们从一个对象获取一个方法，并将其复制到另一个对象。

一些原生原型的方法通常会被借用。

例如，如果我们要创建类数组对象，则可能需要向其中复制一些 Array 方法。

例如：

let obj = {
  0: "Hello",
  1: "world!",
  length: 2,
};

obj.join = Array.prototype.join;

alert( obj.join(',') ); // Hello,world!

上面这段代码有效，是因为内建的方法 join 的内部算法只关心正确的索引和 length 属性。它不会检查这个对象是否是真正的数组。许多内建方法就是这样。

另一种方式是通过将 obj.__proto__ 设置为 Array.prototype，这样 Array 中的所有方法都自动地可以在 obj中使用了。

但是如果 obj 已经从另一个对象进行了继承，那么这种方法就不可行了（译注：因为这样会覆盖掉已有的继承。此处 obj 其实已经从 Object 进行了继承，但是 Array 也继承自 Object，所以此处的方法借用不会影响 obj 对原有继承的继承，因为 obj 通过原型链依旧继承了 Object）。请记住，我们一次只能继承一个对象。

方法借用很灵活，它允许在需要时混合来自不同对象的方法。

总结

所有的内建对象都遵循相同的模式（pattern）：
- 方法都存储在 prototype 中（Array.prototype、Object.prototype、Date.prototype 等）。
- 对象本身只存储数据（数组元素、对象属性、日期）。
原始数据类型也将方法存储在包装器对象的 prototype 中：Number.prototype、String.prototype 和 Boolean.prototype。只有 undefined 和 null 没有包装器对象。
内建原型可以被修改或被用新的方法填充。但是不建议更改它们。唯一允许的情况可能是，当我们添加一个还没有被 JavaScript 引擎支持，但已经被加入 JavaScript 规范的新标准时，才可能允许这样做。

给函数添加一个 "f.defer(ms)" 方法

重要程度: 5

在所有函数的原型中添加 defer(ms) 方法，该方法将在 ms 毫秒后运行该函数。

当你完成添加后，下面的代码应该是可执行的：

function f() {
  alert("Hello!");
}

f.defer(1000); // 1 秒后显示 "Hello!"

解决方案

Function.prototype.defer = function(ms) {
  setTimeout(this, ms);
};

function f() {
  alert("Hello!");
}

f.defer(1000); // shows "Hello!" after 1 sec

将装饰者 "defer()" 添加到函数

重要程度: 4

在所有函数的原型中添加 defer(ms) 方法，该方法返回一个包装器，将函数调用延迟 ms 毫秒。

下面是它应该如何执行的例子：

function f(a, b) {
  alert( a + b );
}

f.defer(1000)(1, 2); // 1 秒后显示 3

请注意，参数应该被传给原始函数。

解决方案

Function.prototype.defer = function(ms) {
  let f = this;
  return function(...args) {
    setTimeout(() => f.apply(this, args), ms);
  }
};

// check it
function f(a, b) {
  alert( a + b );
}

f.defer(1000)(1, 2); // 1 秒后显示 3

请注意：我们在 f.apply 中使用 this 以使装饰者适用于对象方法。

因此，如果将包装器函数作为对象方法调用，那么 this 将会被传递给原始方法 f。

Function.prototype.defer = function(ms) {
  let f = this;
  return function(...args) {
    setTimeout(() => f.apply(this, args), ms);
  }
};

let user = {
  name: "John",
  sayHi() {
    alert(this.name);
  }
}

user.sayHi = user.sayHi.defer(1000);

user.sayHi();

原型方法，没有 proto 的对象

在这部分内容的第一章中，我们提到了设置原型的现代方法。

__proto__ 被认为是过时且不推荐使用的（deprecated），这里的不推荐使用是指 JavaScript 规范中规定，proto 必须仅在浏览器环境下才能得到支持。

现代的方法有：

[Object.create(proto, descriptors]) —— 利用给定的 proto 作为 [[Prototype]] 和可选的属性描述来创建一个空对象。
Object.getPrototypeOf(obj) —— 返回对象 obj 的 [[Prototype]]。
Object.setPrototypeOf(obj, proto) —— 将对象 obj 的 [[Prototype]] 设置为 proto。

应该使用这些方法来代替 __proto__。

例如：

let animal = {
  eats: true
};

// 创建一个以 animal 为原型的新对象
let rabbit = Object.create(animal);

alert(rabbit.eats); // true

alert(Object.getPrototypeOf(rabbit) === animal); // true

Object.setPrototypeOf(rabbit, {}); // 将 rabbit 的原型修改为 {}

Object.create 有一个可选的第二参数：属性描述器。我们可以在此处为新对象提供额外的属性，就像这样：

let animal = {
  eats: true
};

let rabbit = Object.create(animal, {
  jumps: {
    value: true
  }
});

alert(rabbit.jumps); // true

描述器的格式与属性标志和属性描述符一章中所讲的一样。

我们可以使用 Object.create 来实现比复制 for..in 循环中的属性更强大的对象克隆方式：

let clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));

此调用可以对 obj 进行真正准确地拷贝，包括所有的属性：可枚举和不可枚举的，数据属性和 setters/getters —— 包括所有内容，并带有正确的 [[Prototype]]。

原型简史

如果我们数一下有多少种处理 [[Prototype]] 的方式，答案是有很多！很多种方法做的都是同一件事儿！

为什么会出现这种情况？

这是历史原因。

构造函数的 "prototype" 属性自古以来就起作用。
之后，在 2012 年，Object.create 出现在标准中。它提供了使用给定原型创建对象的能力。但没有提供 get/set 它的能力。因此，许多浏览器厂商实现了非标准的 __proto__ 访问器，该访问器允许用户随时 get/set 原型。
之后，在 2015 年，Object.setPrototypeOf 和 Object.getPrototypeOf 被加入到标准中，执行与 __proto__ 相同的功能。由于 __proto__ 实际上已经在所有地方都得到了实现，但它已过时，所以被加入到该标准的附件 B 中，即：在非浏览器环境下，它的支持是可选的。

目前为止，我们拥有了所有这些方式。

为什么将 __proto__ 替换成函数 getPrototypeOf/setPrototypeOf？这是一个有趣的问题，需要我们理解为什么 __proto__ 不好。继续阅读，你就会知道答案。

如果速度很重要，就请不要修改已存在的对象的 [[Prototype]]

从技术上来讲，我们可以在任何时候 get/set [[Prototype]]。但是通常我们只在创建对象的时候设置它一次，自那之后不再修改：rabbit 继承自 animal，之后不再更改。

并且，JavaScript 引擎对此进行了高度优化。用 Object.setPrototypeOf 或 obj.__proto__= “即时”更改原型是一个非常缓慢的操作，因为它破坏了对象属性访问操作的内部优化。因此，除非你知道自己在做什么，或者 JavaScript 的执行速度对你来说完全不重要，否则请避免使用它。

"Very plain" objects

我们知道，对象可以用作关联数组（associative arrays）来存储键/值对。

……但是如果我们尝试在其中存储 用户提供的 键（例如：一个用户输入的字典），我们可以发现一个有趣的小故障：所有的键都正常工作，除了 "__proto__"。

看一下这个例子：

let obj = {};

let key = prompt("What's the key?", "__proto__");
obj[key] = "some value";

alert(obj[key]); // [object Object]，并不是 "some value"！

这里如果用户输入 __proto__，那么赋值会被忽略！

我们不应该对此感到惊讶。__proto__ 属性很特别：它必须是对象或者 null。字符串不能成为 prototype。

但是我们不是打算实现这种行为，对吧？我们想要存储键值对，然而键名为 "__proto__" 的键值对没有被正确存储。所以这是一个 bug。

在这里，后果并没有很严重。但是在其他情况下，我们可能会对对象进行赋值操作，然后原型可能就被更改了。结果，可能会导致完全意想不到的结果。

最可怕的是 —— 通常开发者完全不会考虑到这一点。这让此类 bug 很难被发现，甚至变成漏洞，尤其是在 JavaScript 被用在服务端的时候。

为默认情况下为函数的 toString 以及其他内建方法执行赋值操作，也会出现意想不到的结果。

我们怎么避免这样的问题呢？

首先，我们可以改用 Map 来代替普通对象进行存储，这样一切都迎刃而解。

但是 Object 在这里同样可以运行得很好，因为 JavaScript 语言的制造者很早就注意到了这个问题。

__proto__ 不是一个对象的属性，只是 Object.prototype 的访问器属性：

因此，如果 obj.__proto__ 被读取或者赋值，那么对应的 getter/setter 会被从它的原型中调用，它会 set/get [[Prototype]]。

就像在本部分教程的开头所说的那样：__proto__ 是一种访问 [[Prototype]] 的方式，而不是 [[prototype]]本身。

现在，我们想要将一个对象用作关联数组，并且摆脱此类问题，我们可以使用一些小技巧：

let obj = Object.create(null);

let key = prompt("What's the key?", "__proto__");
obj[key] = "some value";

alert(obj[key]); // "some value"

Object.create(null) 创建了一个空对象，这个对象没有原型（[[Prototype]] 是 null）：

因此，它没有继承 __proto__ 的 getter/setter 方法。现在，它被作为正常的数据属性进行处理，因此上面的这个示例能够正常工作。

我们可以把这样的对象称为 “very plain” 或 “pure dictionary” 对象，因为它们甚至比通常的普通对象（plain object）{...} 还要简单。

缺点是这样的对象没有任何内建的对象的方法，例如 toString：

let obj = Object.create(null);

alert(obj); // Error (no toString)

……但是它们通常对关联数组而言还是很友好。

请注意，大多数与对象相关的方法都是 Object.something(...)，例如 Object.keys(obj) —— 它们不在 prototype 中，因此在 “very plain” 对象中它们还是可以继续使用：

let chineseDictionary = Object.create(null);
chineseDictionary.hello = "你好";
chineseDictionary.bye = "再见";

alert(Object.keys(chineseDictionary)); // hello,bye

总结

设置和直接访问原型的现代方法有：

[Object.create(proto, descriptors]) —— 利用给定的 proto 作为 [[Prototype]]（可以是 null）和可选的属性描述来创建一个空对象。
Object.getPrototypeOf(obj) —— 返回对象 obj 的 [[Prototype]]（与 __proto__ 的 getter 相同）。
Object.setPrototypeOf(obj, proto) —— 将对象 obj 的 [[Prototype]] 设置为 proto（与 __proto__ 的 setter 相同）。

如果要将一个用户生成的键放入一个对象，那么内建的 __proto__ getter/setter 是不安全的。因为用户可能会输入 "__proto__" 作为键，这会导致一个 error，虽然我们希望这个问题不会造成什么大影响，但通常会造成不可预料的后果。

因此，我们可以使用 Object.create(null) 创建一个没有 __proto__ 的 “very plain” 对象，或者对此类场景坚持使用 Map 对象就可以了。

此外，Object.create 提供了一种简单的方式来浅拷贝一个对象的所有描述符：

let clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));

此外，我们还明确了 __proto__ 是 [[Prototype]] 的 getter/setter，就像其他方法一样，它位于 Object.prototype。

我们可以通过 Object.create(null) 来创建没有原型的对象。这样的对象被用作 “pure dictionaries”，对于它们而言，使用 "__proto__" 作为键是没有问题的。

其他方法：

Object.keys(obj) / Object.values(obj) / Object.entries(obj) —— 返回一个可枚举的由自身的字符串属性名/值/键值对组成的数组。
Object.getOwnPropertySymbols(obj) —— 返回一个由自身所有的 symbol 类型的键组成的数组。
Object.getOwnPropertyNames(obj) —— 返回一个由自身所有的字符串键组成的数组。
Reflect.ownKeys(obj) —— 返回一个由自身所有键组成的数组。
obj.hasOwnProperty(key)：如果 obj 拥有名为 key 的自身的属性（非继承而来的），则返回 true。

所有返回对象属性的方法（如 Object.keys 及其他）—— 都返回“自身”的属性。如果我们想继承它们，我们可以使用 for...in。

任务

为 dictionary 添加 toString 方法

重要程度: 5

这儿有一个通过 Object.create(null) 创建的，用来存储任意 key/value 对的对象 dictionary。

为该对象添加 dictionary.toString() 方法，该方法应该返回以逗号分隔的所有键的列表。你的 toString 方法不应该在使用 for...in 循环遍历数组的时候显现出来。

它的工作方式如下：

let dictionary = Object.create(null);

// 你的添加 dictionary.toString 方法的代码

// 添加一些数据
dictionary.apple = "Apple";
dictionary.__proto__ = "test"; // 这里 __proto__ 是一个常规的属性键

// 在循环中只有 apple 和 __proto__
for(let key in dictionary) {
  alert(key); // "apple", then "__proto__"
}

// 你的 toString 方法在发挥作用
alert(dictionary); // "apple,__proto__"

解决方案

可以使用 Object.keys 获取所有可枚举的键，并输出其列表。

为了使 toString 不可枚举，我们使用一个属性描述器来定义它。Object.create 语法允许我们为一个对象提供属性描述器作为第二参数。

let dictionary = Object.create(null, {
  toString: { // 定义 toString 属性
    value() { // value 是一个 function
      return Object.keys(this).join();
    }
  }
});

dictionary.apple = "Apple";
dictionary.__proto__ = "test";

// apple 和 __proto__ 在循环中
for(let key in dictionary) {
  alert(key); // "apple"，然后是 "__proto__"
}

// 通过 toString 处理获得的以逗号分隔的属性列表
alert(dictionary); // "apple,__proto__"

当我们使用描述器创建一个属性，它的标识默认是 false。因此在上面这段代码中，dictonary.toString 是不可枚举的。

请阅读属性标志和属性描述符一章进行回顾。

调用方式的差异

重要程度: 5

让我们创建一个新的 rabbit 对象：

function Rabbit(name) {
  this.name = name;
}
Rabbit.prototype.sayHi = function() {
  alert(this.name);
};

let rabbit = new Rabbit("Rabbit");

以下调用做的是相同的事儿还是不同的？

rabbit.sayHi();
Rabbit.prototype.sayHi();
Object.getPrototypeOf(rabbit).sayHi();
rabbit.__proto__.sayHi();

解决方案

第一个调用中 this == rabbit，其他的 this 等同于 Rabbit.prototype，因为 this 就是点符号前面的对象。

所以，只有第一个调用显示 Rabbit，其他的都显示的是 undefined：

function Rabbit(name) {
  this.name = name;
}
Rabbit.prototype.sayHi = function() {
  alert( this.name );
}

let rabbit = new Rabbit("Rabbit");

rabbit.sayHi();                        // Rabbit
Rabbit.prototype.sayHi();              // undefined
Object.getPrototypeOf(rabbit).sayHi(); // undefined
rabbit.__proto__.sayHi();              // undefined

原型，继承

原型继承

[[Prototype]]

F.prototype

原生的原型

原型方法，没有 proto 的对象