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

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

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

[[Prototype]]

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

原型继承 - 图1

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

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

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

  1. let animal = {
  2. eats: true
  3. };
  4. let rabbit = {
  5. jumps: true
  6. };
  7. 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 中获取它。

例如:

  1. let animal = {
  2. eats: true
  3. };
  4. let rabbit = {
  5. jumps: true
  6. };
  7. rabbit.__proto__ = animal; // (*)
  8. // 现在这两个属性我们都能在 rabbit 中找到:
  9. alert( rabbit.eats ); // true (**)
  10. alert( rabbit.jumps ); // true

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

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

原型继承 - 图2

在这儿我们可以说 “animalrabbit 的原型”,或者说 “rabbit 的原型是从 animal 继承而来的”。

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

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

  1. let animal = {
  2. eats: true,
  3. walk() {
  4. alert("Animal walk");
  5. }
  6. };
  7. let rabbit = {
  8. jumps: true,
  9. __proto__: animal
  10. };
  11. // walk 方法是从原型中获得的
  12. rabbit.walk(); // Animal walk

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

原型继承 - 图3

原型链可以很长:

  1. let animal = {
  2. eats: true,
  3. walk() {
  4. alert("Animal walk");
  5. }
  6. };
  7. let rabbit = {
  8. jumps: true,
  9. __proto__: animal
  10. };
  11. let longEar = {
  12. earLength: 10,
  13. __proto__: rabbit
  14. };
  15. // walk 是通过原型链获得的
  16. longEar.walk(); // Animal walk
  17. alert(longEar.jumps); // true(从 rabbit)

原型继承 - 图4

这里只有两个限制:

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

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

写入不使用原型

原型仅用于读取属性。

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

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

  1. let animal = {
  2. eats: true,
  3. walk() {
  4. /* rabbit 不会使用此方法 */
  5. }
  6. };
  7. let rabbit = {
  8. __proto__: animal
  9. };
  10. rabbit.walk = function() {
  11. alert("Rabbit! Bounce-bounce!");
  12. };
  13. rabbit.walk(); // Rabbit! Bounce-bounce!

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

原型继承 - 图5

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

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

  1. let user = {
  2. name: "John",
  3. surname: "Smith",
  4. set fullName(value) {
  5. [this.name, this.surname] = value.split(" ");
  6. },
  7. get fullName() {
  8. return `${this.name} ${this.surname}`;
  9. }
  10. };
  11. let admin = {
  12. __proto__: user,
  13. isAdmin: true
  14. };
  15. alert(admin.fullName); // John Smith (*)
  16. // setter triggers!
  17. admin.fullName = "Alice Cooper"; // (**)

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

“this” 的值

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

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

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

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

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

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

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

  1. // animal 有一些方法
  2. let animal = {
  3. walk() {
  4. if (!this.isSleeping) {
  5. alert(`I walk`);
  6. }
  7. },
  8. sleep() {
  9. this.isSleeping = true;
  10. }
  11. };
  12. let rabbit = {
  13. name: "White Rabbit",
  14. __proto__: animal
  15. };
  16. // 修改 rabbit.isSleeping
  17. rabbit.sleep();
  18. alert(rabbit.isSleeping); // true
  19. alert(animal.isSleeping); // undefined(原型中没有此属性)

结果示意图:

原型继承 - 图6

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

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

for…in 循环

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

例如:

  1. let animal = {
  2. eats: true
  3. };
  4. let rabbit = {
  5. jumps: true,
  6. __proto__: animal
  7. };
  8. // Object.keys 只返回自己的 key
  9. alert(Object.keys(rabbit)); // jumps
  10. // for..in 会遍历自己以及继承的键
  11. for(let prop in rabbit) alert(prop); // jumps,然后是 eats

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

因此,我们可以过滤掉继承的属性(或对它们进行其他操作):

  1. let animal = {
  2. eats: true
  3. };
  4. let rabbit = {
  5. jumps: true,
  6. __proto__: animal
  7. };
  8. for(let prop in rabbit) {
  9. let isOwn = rabbit.hasOwnProperty(prop);
  10. if (isOwn) {
  11. alert(`Our: ${prop}`); // Our: jumps
  12. } else {
  13. alert(`Inherited: ${prop}`); // Inherited: eats
  14. }
  15. }

这里我们有以下继承链:rabbitanimal 中继承,animalObject.prototype 中继承(因为 animal 是对象字面量 {...},所以这是默认的继承),然后再向上是 null

原型继承 - 图7

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

……如果 for..in 循环会列出继承的属性,那为什么 hasOwnProperty 没有像 eatsjumps 那样出现在 for..in 循环中?

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

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

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

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

总结

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

任务

使用原型

重要程度: 5

下面这段代码创建了一对对象,然后对它们进行修改。

过程中会显示哪些值?

  1. let animal = {
  2. jumps: null
  3. };
  4. let rabbit = {
  5. __proto__: animal,
  6. jumps: true
  7. };
  8. alert( rabbit.jumps ); // ? (1)
  9. delete rabbit.jumps;
  10. alert( rabbit.jumps ); // ? (2)
  11. delete animal.jumps;
  12. alert( rabbit.jumps ); // ? (3)

应该有 3 个答案。

解决方案

  1. true,来自于 rabbit
  2. null,来自于 animal
  3. undefined,不再有这样的属性存在。

搜索算法

重要程度: 5

本题目有两个部分。

给定以下对象:

  1. let head = {
  2. glasses: 1
  3. };
  4. let table = {
  5. pen: 3
  6. };
  7. let bed = {
  8. sheet: 1,
  9. pillow: 2
  10. };
  11. let pockets = {
  12. money: 2000
  13. };
  1. 使用 __proto__ 来分配原型,以使得任何属性的查找都遵循以下路径:pocketsbedtablehead。例如,pockets.pen 应该是 3(在 table 中找到),bed.glasses 应该是 1(在 head 中找到)。
  2. 回答问题:通过 pockets.glasseshead.glasses 获取 glasses,哪个更快?必要时需要进行基准测试。

解决方案

  1. 让我们添加 __proto__

    1. let head = {
    2. glasses: 1
    3. };
    4. let table = {
    5. pen: 3,
    6. __proto__: head
    7. };
    8. let bed = {
    9. sheet: 1,
    10. pillow: 2,
    11. __proto__: table
    12. };
    13. let pockets = {
    14. money: 2000,
    15. __proto__: bed
    16. };
    17. alert( pockets.pen ); // 3
    18. alert( bed.glasses ); // 1
    19. alert( table.money ); // undefined
  2. 在现代引擎中,从性能的角度来看,我们是从对象还是从原型链获取属性都是没区别的。它们(引擎)会记住在哪里找到的该属性,并在下一次请求中重用它。

    例如,对于 pockets.glasses 来说,它们(引擎)会记得在哪里找到的 glasses(在 head 中),这样下次就会直接在这个位置进行搜索。并且引擎足够聪明,一旦有内容更改,它们就会自动更新内部缓存,因此,该优化是安全的。

写在哪里?

重要程度: 5

我们有从 animal 中继承的 rabbit

如果我们调用 rabbit.eat(),哪一个对象会接收到 full 属性:animal 还是 rabbit

  1. let animal = {
  2. eat() {
  3. this.full = true;
  4. }
  5. };
  6. let rabbit = {
  7. __proto__: animal
  8. };
  9. rabbit.eat();

解决方案

答案:rabbit

这是因为 this 是点符号前面的这个对象,因此 rabbit.eat() 修改了 rabbit

属性查找和执行是两回事儿。

首先在原型中找到 rabbit.eat 方法,然后在 this=rabbit 的情况下执行。

为什么两只仓鼠都饱了?

重要程度: 5

我们有两只仓鼠:speedylazy 都继承自普通的 hamster 对象。

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

  1. let hamster = {
  2. stomach: [],
  3. eat(food) {
  4. this.stomach.push(food);
  5. }
  6. };
  7. let speedy = {
  8. __proto__: hamster
  9. };
  10. let lazy = {
  11. __proto__: hamster
  12. };
  13. // 这只仓鼠找到了食物
  14. speedy.eat("apple");
  15. alert( speedy.stomach ); // apple
  16. // 这只仓鼠也找到了食物,为什么?请修复它。
  17. alert( lazy.stomach ); // apple

解决方案

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

  1. speedy.eat 方法在原型(=hamster)中被找到,然后执行 this=speedy(在点符号前面的对象)。

  2. this.stomach.push() 需要找到 stomach 属性,然后对其调用 push。它在 this=speedy)中查找 stomach,但并没有找到。

  3. 然后它顺着原型链,在 hamster 中找到 stomach

  4. 然后它对 stomach 调用 push,将食物添加到 stomach 的原型 中。

因此,所有的仓鼠共享了同一个胃!

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

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

  1. let hamster = {
  2. stomach: [],
  3. eat(food) {
  4. // 分配给 this.stomach 而不是 this.stomach.push
  5. this.stomach = [food];
  6. }
  7. };
  8. let speedy = {
  9. __proto__: hamster
  10. };
  11. let lazy = {
  12. __proto__: hamster
  13. };
  14. // 仓鼠 Speedy 找到了食物
  15. speedy.eat("apple");
  16. alert( speedy.stomach ); // apple
  17. // 仓鼠 Lazy 的胃是空的
  18. alert( lazy.stomach ); // <nothing>

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

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

  1. let hamster = {
  2. stomach: [],
  3. eat(food) {
  4. this.stomach.push(food);
  5. }
  6. };
  7. let speedy = {
  8. __proto__: hamster,
  9. stomach: []
  10. };
  11. let lazy = {
  12. __proto__: hamster,
  13. stomach: []
  14. };
  15. // 仓鼠 Speedy 找到了食物
  16. speedy.eat("apple");
  17. alert( speedy.stomach ); // apple
  18. // 仓鼠 Lazy 的胃是空的
  19. alert( lazy.stomach ); // <nothing>

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