13

我一直在阅读 Douglas Crockford 的“Javascript: The Good Parts”——虽然它有点极端，但我同意他的很多话。

在第 3 章中，他讨论了对象，并在某一时刻提出了一种模式（也可以在此处找到）来简化和避免使用内置“new”关键字带来的一些混淆/问题。

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

（也在小提琴上）

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

4

3 回答 3

11

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

所以，当你这样做

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

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

于 2012-04-12T20:25:22.627 回答
1

我认为正在发生的事情是，当您创建 时person2，它的sex和info属性指的是nestObj. 当您引用 时person2.info，由于person2没有重新定义info属性，它会通过原型并在那里修改对象。

看起来“正确”的方法是您构建的方式person3，因此对象有自己的info对象要修改，并且不会上升到原型。

我也在读这本书（慢慢地），所以我很同情你。:)

于 2012-04-12T20:27:40.140 回答
1

我已经更改了示例，以便更好地演示这里发生的事情。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's 的一些属性时会发生什么？

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请求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"
}

一切都完全按照您的预期进行。

于 2015-08-24T01:08:33.413 回答