javascript - Js Prototype 简单类型和对象

Question

原型(prototype)继承的行为是否因类型而异？在这两种情况下，上下文引用 THIS 的工作方式是否不同？为什么在这个例子中，一个访问原型(prototype)，另一个创建对象的新属性？

var Player = function(){};

Player.prototype.name = '';
Player.prototype.set_name = function(name){this.name = name;}

var p1 = new Player();
var p2 = new Player();

p1.set_name('Johanna');

这两者的值(value)返回:

// Checking object properties
>p1
Player {name: "Johanna", set_name: function}

>p2
Player {name: "", set_name: function}

// Checking prototypes
>p1.__proto__
Object {name: "", set_name: function}

>p2.__proto__
Object {name: "", set_name: function}

但是如果我将名称作为对象属性来处理播放器，则函数 set_name 正在修改原型(prototype)。

var Player = function(){};

Player.prototype.name = {};
Player.prototype.set_name = function(name){this.name['first_name'] = name;}

var p1 = new Player();
var p2 = new Player();

p1.set_name('Andrew');

这两者的值(value)返回:

// Checking object properties
>p1.name
Object {first_name: "Andrew"}

>p2.name
Object {first_name: "Andrew"}

// Checking prototypes
>p1.__proto__.name
Object {first_name: "Andrew"}

>p2.__proto__.name
Object {first_name: "Andrew"}

为什么会这样？我缺少什么概念？

Answer 1

继承链

当您使用构造函数创建对象时，继承链是这样的，查找。

1. 将搜索当前对象。

2. 将搜索父级的原型(prototype)。

3. 将搜索 parent 的 parent 的原型(prototype)。

   ...

最后将搜索全局对象。如果在任何地方都找不到，将返回 undefined。如果在这些级别中的任何一个中找到正在查找的值，它将立即返回。

注意:赋值不会沿继承链上升。如果您为对象的属性分配一个值(如果它不存在，它将被创建)然后该值将被分配给该属性。

第一种情况:

你在做什么

this.name = name;

所以，

p1.set_name('Andrew');

在 p1 中创建一个新的 name 属性并将 Andrew 存储在其中。当您尝试打印 p1 时，会在 p1 上查找该名称，并且会在 p1 本身中找到它。因此，返回了 Andrew。但是，当您打印 p2 时，在 p2 中找不到名称。它在层次结构中上升并在父级原型(prototype)中找到 name。因此，它返回空字符串。

第二种情况:

你在做什么

this.name['first_name'] = name;

所以，

p1.set_name('Andrew');

在 p1 中查找 name。因为您正在尝试访问 this.name 上的 'first_name'。因此，它会尝试检索 name 属性。它没有在p1 中找到它，所以向上并在父级的原型(prototype)中找到它。它是一个空对象，name 被分配给该对象的 first_name 属性。

我们知道p2的原型(prototype)和p1的原型(prototype)是一样的。我们可以这样确认

console.log(p1.__proto__ === p2.__proto__);
# true

因此，当您查找与p1 的原型(prototype)相同的p2 的原型(prototype)时，会找到名称Andrew .