克罗克福德的原型继承
我一直在阅读道格拉斯克罗克福德的“Javascript：The Good Parts” - 尽管有点极端，但我有许多他必须说的话。
在第3章中，他讨论了对象，并在一点上列出了一种模式（也在此处找到），以简化和避免使用内置“新”关键字带来的一些混淆/问题。
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
（也在小提琴上）
我做错了什么，或者这是这种模式的限制？
没有不一致。 只是不要想到嵌套对象：对象的直接属性总是在其原型或自己的属性上。 与属性重视原始或对象无关紧要。
所以，当你这样做
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
这意味着他们不是绝对独立的 - 但仍然是两个不同的对象。
我认为发生的事情是，当你创建person2 ，它的sex和info属性指的是nestObj那些nestObj 。 当你引用person2.info ，由于person2不重新定义info属性，它会遍历原型并在那里修改对象。
它看起来像做“正确”的方式就是你建立person3的方式，以便该对象有自己的info对象来修改，并且不会person3原型。
我正在慢慢读这本书，所以我很同情你。 :)
我已经更改了这些示例，以便更好地演示此处发生的情况。 演示
首先我们创建一个具有三个属性的对象; 一个数字，一个字符串和一个带有一个字符串值的属性的对象。
然后我们使用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请求都将被转发给原始对象。
先前代码块中对obj2.obj.less = 'more'的set请求首先需要get obj2.obj的get请求， obj2.obj在该点不存在obj2 ，因此它将转发到obj1.obj ，然后转发obj1.obj.less 。
后来终于当我们阅读obj2再次，我们还没有设定obj2.obj ，这样get的请求将被转发到obj1.obj ，回到我们之前已经更改了设置，导致该改变第二目标对象的属性效果小孩似乎改变了两者，但实际上它只是实际上改变了第一个。
您可以使用此函数以递归方式返回与原始文件完全分离的新对象。
演示
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"
}
一切都按照您预期的方式工作。
链接地址: http://www.djcxy.com/p/40845.html