Question

我一直在阅读道格拉斯·克罗克福德的“Javascript：The Good Parts” - 虽然它有点极端，但我已经接受了很多他要说的话。

在第3章中，他讨论了对象，并且在某一点上列出了一种模式（也是found here），用于简化＆amp;避免使用内置的“新”关键字带来的一些混淆/问题。

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

所以我尝试在我正在处理的项目中使用它，并且在尝试从嵌套的对象继承时发现了一个问题。如果我覆盖使用此模式继承的嵌套对象的值，它将覆盖原型链中的嵌套元素。

Crockford的示例与以下示例中的flatObj类似，效果很好。但是，该行为与嵌套对象不一致：

var flatObj = {
    firstname: "John",
    lastname: "Doe",
    age: 23
}
var person1 = Object.create(flatObj);

var nestObj = {
    sex: "female",
    info: {
        firstname: "Jane",
        lastname: "Dough",
        age: 32  
    }
}
var person2 = Object.create(nestObj);

var nestObj2 = {
    sex: "male",
    info: {
        firstname: "Arnold",
        lastname: "Schwarzenneger",
        age: 61  
    }
}
var person3 = {
    sex: "male"
}
person3.info = Object.create(nestObj2.info);

// now change the objects:
person1.age = 69;
person2.info.age = 96;
person3.info.age = 0;

// prototypes should not have changed:
flatObj.age // 23
nestObj.info.age // 96 ???
nestObj2.info.age // 61

// now delete properties:
delete person1.age;
delete person2.info.age;
delete person3.info.age;

// prototypes should not have changed:
flatObj.age // 23
nestObj.info.age // undefined ???
nestObj2.info.age // 61

（也在fiddle上）

我做错了什么，或者这是这种模式的限制？

Answer 1

没有不一致。只是不要考虑嵌套对象：对象的直接属性总是在其原型或自己的属性上。与属性或对象的属性值无关。

所以，当你这样做时

var parent = {
    x: {a:0}
};
var child = Object.create(parent);

child.x将引用与parent.x相同的对象 - 即一个{a:0}对象。当你改变它的属性时：

var prop_val = child.x; // == parent.x
prop_val.a = 1;

两者都会受到影响。要独立更改“嵌套”属性，首先必须创建一个独立对象：

child.x = {a:0};
child.x.a = 1;
parent.x.a; // still 0

你能做的是

child.x = Object.create(parent.x);
child.x.a = 1;
delete child.x.a; // (child.x).a == 0, because child.x inherits from parent.x
delete child.x; // (child).x.a == 0, because child inherits from parent

这意味着它们不是绝对独立的 - 但仍然是两个不同的对象。

Answer 2

我认为发生的事情是，当您创建person2时，sex和info属性会引用nestObj中的属性。当您引用person2.info时，由于person2未重新定义info属性，因此会转到原型并在那里修改对象。

看起来“正确”的方式就是构建person3的方式，这样对象就有了自己的info对象来修改，而不是原型。

我正在读这本书（慢慢地），所以我同情你。：）

Answer 3

我已经更改了示例，以便更好地演示这里发生的事情。 Demo

首先我们创建一个具有三个属性的对象;数字，字符串和对象，其中一个属性具有字符串值。

然后我们使用Object.create();

从第一个创建第二个对象

var obj1 = { 
    num : 1,
    str : 'foo',
    obj : { less: 'more' }
};
var obj2 = Object.create( obj1 );

console.log( '[1] obj1:', obj1 );
console.log( '[1] obj2:', obj2 );

"[1] obj1:"
[object Object] {
  num: 1,
  obj: [object Object] {
    less: "more"
  },
  str: "foo"
}
"[1] obj2:"
[object Object] {
  num: 1,
  obj: [object Object] {
    less: "more"
  },
  str: "foo"
}

看起来不错？我们有第一个对象和第二个复制对象。

不是那么快;让我们看看当我们改变第一个对象上的一些值时会发生什么。

obj1.num = 3;
obj1.str = 'bar';
obj1.obj.less = 'less';

console.log( '[2] obj1:', obj1 );
console.log( '[2] obj2:', obj2 );

"[2] obj1:"
[object Object] {
  num: 3,
  obj: [object Object] {
    less: "less"
  },
  str: "bar"
}
"[2] obj2:"
[object Object] {
  num: 3,
  obj: [object Object] {
    less: "less"
  },
  str: "bar"
}

现在我们再次拥有第一个对象，包括更改，以及该对象的副本。这里发生了什么？

让我们检查对象是否有自己的属性。

for( var prop in obj1 ) console.log( '[3] obj1.hasOwnProperty( ' + prop + ' ): ' + obj1.hasOwnProperty( prop ) );
for( var prop in obj2 ) console.log( '[3] obj2.hasOwnProperty( ' + prop + ' ): ' + obj2.hasOwnProperty( prop ) );

"[3] obj1.hasOwnProperty( num ): true"
"[3] obj1.hasOwnProperty( str ): true"
"[3] obj1.hasOwnProperty( obj ): true"
"[3] obj2.hasOwnProperty( num ): false"
"[3] obj2.hasOwnProperty( str ): false"
"[3] obj2.hasOwnProperty( obj ): false"

obj1拥有自己的所有属性，就像我们定义的那样，但obj2没有。

当我们更改obj2的某些属性时会发生什么？

obj2.num = 1;
obj2.str = 'baz';
obj2.obj.less = 'more';

console.log( '[4] obj1:', obj1 );
console.log( '[4] obj2:', obj2 );
for( var prop in obj1 ) console.log( '[4] obj1.hasOwnProperty( ' + prop + ' ): ' + obj1.hasOwnProperty( prop ) );
for( var prop in obj2 ) console.log( '[4] obj2.hasOwnProperty( ' + prop + ' ): ' + obj2.hasOwnProperty( prop ) );

"[4] obj1:"
[object Object] {
  num: 3,
  obj: [object Object] {
    less: "more"
  },
  str: "bar"
}
"[4] obj2:"
[object Object] {
  num: 1,
  obj: [object Object] {
    less: "more"
  },
  str: "baz"
}
"[4] obj1.hasOwnProperty( num ): true"
"[4] obj1.hasOwnProperty( str ): true"
"[4] obj1.hasOwnProperty( obj ): true"
"[4] obj2.hasOwnProperty( num ): true"
"[4] obj2.hasOwnProperty( str ): true"
"[4] obj2.hasOwnProperty( obj ): false"

因此，num和str在obj2而不在obj1上发生了变化，就像我们想要的那样，但obj1.obj.less在不应该更改时发生了变化。

从hasOwnProperty()检查我们可以看到，即使我们更改了obj2.obj.less，我们也没有先设置obj2.obj。这意味着我们仍然指的是obj1.obj.less。

让我们从obj1.obj创建一个对象并将其分配给obj2.obj，看看是否能为我们提供我们正在寻找的内容。

obj2.obj = Object.create( obj1.obj );

console.log( '[5] obj1:', obj1 );
console.log( '[5] obj2:', obj2 );
for( var prop in obj1 ) console.log( '[5] obj1.hasOwnProperty( ' + prop + ' ): ' + obj1.hasOwnProperty( prop ) );
for( var prop in obj2 ) console.log( '[5] obj2.hasOwnProperty( ' + prop + ' ): ' + obj2.hasOwnProperty( prop ) );

"[5] obj1:"
[object Object] {
  num: 3,
  obj: [object Object] {
    less: "more"
  },
  str: "bar"
}
"[5] obj2:"
[object Object] {
  num: 1,
  obj: [object Object] {
    less: "more"
  },
  str: "baz"
}
"[5] obj1.hasOwnProperty( num ): true"
"[5] obj1.hasOwnProperty( str ): true"
"[5] obj1.hasOwnProperty( obj ): true"
"[5] obj2.hasOwnProperty( num ): true"
"[5] obj2.hasOwnProperty( str ): true"
"[5] obj2.hasOwnProperty( obj ): true"

这很好，现在obj2有自己的obj属性。让我们看看当我们现在更改obj2.obj.less时会发生什么。

obj2.obj.less = 'less';

console.log( '[6] obj1:', obj1 );
console.log( '[6] obj2:', obj2 );

"[6] obj1:"
[object Object] {
  num: 3,
  obj: [object Object] {
    less: "more"
  },
  str: "bar"
}
"[6] obj2:"
[object Object] {
  num: 1,
  obj: [object Object] {
    less: "less"
  },
  str: "baz"
}

所以这一切告诉我们的是，如果尚未在创建的对象上更改属性，则对该属性的创建对象的任何get请求将被转发到原始对象。

先前代码块中对set的{{1}}请求首先要求obj2.obj.less = 'more' get obj2.obj请求，obj2中不存在该请求点，所以它转发到obj1.obj，然后转发obj1.obj.less。

最后，当我们再次阅读obj2时，我们仍未设置obj2.obj，以便将get请求转发至obj1.obj并返回我们拥有的设置以前改变了，导致改变第二个对象对象子属性的效果似乎改变了两者，但实际上它实际上只是改变了第一个。

您可以使用此函数以递归方式返回与原始对象完全分离的新对象。

Demo

var obj1 = { 
    num : 1,
    str : 'foo',
    obj : { less: 'more' }
};
var obj2 = separateObject( obj1 );

function separateObject( obj1 ) {

    var obj2 = Object.create( Object.getPrototypeOf( obj1 ) );
    for(var prop in obj1) {
        if( typeof obj1[prop] === "object" )
            obj2[prop] = separateObject( obj1[prop] );
        else
            obj2[prop] = obj1[prop];
    }

    return obj2;
}

console.log( '[1] obj1:', obj1 );
console.log( '[1] obj2:', obj2 );
for( var prop in obj1 ) console.log( '[1] obj1.hasOwnProperty( ' + prop + ' ): ' + obj1.hasOwnProperty( prop ) );
for( var prop in obj2 ) console.log( '[1] obj2.hasOwnProperty( ' + prop + ' ): ' + obj2.hasOwnProperty( prop ) );

"[1] obj1:"
[object Object] {
  num: 1,
  obj: [object Object] {
    less: "more"
  },
  str: "foo"
}
"[1] obj2:"
[object Object] {
  num: 1,
  obj: [object Object] {
    less: "more"
  },
  str: "foo"
}
"[1] obj1.hasOwnProperty( num ): true"
"[1] obj1.hasOwnProperty( str ): true"
"[1] obj1.hasOwnProperty( obj ): true"
"[1] obj2.hasOwnProperty( num ): true"
"[1] obj2.hasOwnProperty( str ): true"
"[1] obj2.hasOwnProperty( obj ): true"

让我们看看现在改变一些变量会发生什么。

obj1.num = 3;
obj1.str = 'bar';
obj1.obj.less = 'less';

console.log( '[2] obj1:', obj1 );
console.log( '[2] obj2:', obj2 );

"[2] obj1:"
[object Object] {
  num: 3,
  obj: [object Object] {
    less: "less"
  },
  str: "bar"
}
"[2] obj2:"
[object Object] {
  num: 1,
  obj: [object Object] {
    less: "more"
  },
  str: "foo"
}

一切都按照你期望的方式运作。

Crockford的Prototypal继承 - 嵌套对象的问题

3 个答案: