JavaScript Object.create——继承嵌套属性

Question

我遇到了 Douglas Crockfords Object.create 方法的一个特点，我希望有人能解释一下:

如果我创建一个对象 - 比如“人” - 使用对象字面量表示法，然后使用 Object.create 创建一个新对象 - 比如说“anotherPerson” - 它继承了初始“人”对象的方法和属性。

如果我随后更改第二个对象“anotherPerson”的名称值，它也会更改初始“person”对象的名称值。

这只会在属性嵌套时发生，这段代码应该让您明白我的意思:

if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
};

// initiate new 'person' object
var person = {
    name: {
        first: 'Ricky',
        last: 'Gervais'
    },
    talk: function() {
        console.log('my name is ' + this.name.first + ' ' + this.name.last);
    }
}

// create anotherPerson from person.prototype
var anotherPerson = Object.create(person);
// change name of anotherPerson
anotherPerson.name.first = 'Stephen';
anotherPerson.name.last = 'Merchant';

// call talk method of both 'person' and 'anotherPerson' objects
person.talk(); // oddly enough, prints 'Stephen Merchant'
anotherPerson.talk(); // prints 'Stephen Merchant'

如果我在不嵌套的情况下存储名称值，那么这种奇怪的行为就不会发生——例如

// initiate new 'person' object
var person = {
    firstName: 'Ricky',
    lastName: 'Gervais',
    talk: function() {
        console.log('my name is ' + this.firstName + ' ' + this.lastName);
    }
}

// create anotherPerson from person.prototype
var anotherPerson = Object.create(person);
// change name of anotherPerson
anotherPerson.firstName = 'Stephen';
anotherPerson.lastName = 'Merchant';

// call talk method of both 'person' and 'anotherPerson' objects
person.talk(); // prints 'Ricky Gervais'
anotherPerson.talk(); // prints 'Stephen Merchant'

当使用带有构造函数和“new”关键字的经典继承样式时，似乎不会出现此嵌套问题。

如果有人能够解释为什么会发生这种情况，我将不胜感激!？

Answer 1

发生这种情况是因为 anotherPerson.name 是一个对象，它存储在原型(prototype)链的上层，在原始 person 对象上:

//...
var anotherPerson = Object.create(person);
anotherPerson.hasOwnProperty('name'); // false, the name is inherited
person.name === anotherPerson.name; // true, the same object reference

您可以通过将新对象分配给新创建对象的 name 属性来避免这种情况:

// create anotherPerson from person
var anotherPerson = Object.create(person);

anotherPerson.name = {
  first: 'Stephen',
  last: 'Merchant'
};