私はここで起こっていることのより良いデモンストレーションを与えるために例を変更しました。Demo
まず、3つのプロパティを持つオブジェクトを作成します。数値、文字列、および文字列値を持つ1つのプロパティを持つオブジェクト。
次に、Object.create()
を使用して最初のオブジェクトから2番目のオブジェクトを作成します。
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"
}
十分な権利を見えますか?最初のオブジェクトと2番目にコピーされたオブジェクトがあります。
あまり速くない。最初のオブジェクトの値の一部を変更するとどうなるかを見てみましょう。
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
は、我々が望んでいただけのようobj1
にobj2
ないで変更しましたが、それは持つべきではないとき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
要求は、最初に、obj1.obj
およびターンobj1.obj.less
に転送するように、その時点でobj2
に存在しないobj2.obj
ためget
要求を必要とします。
、我々は再びobj2
を読んだときに最後に、我々はまだget
要求がobj1.obj
に転送されるようにobj2.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"
}
すべてはまさにあなたはそれが期待されるように動作します。
関連:[JavaScript Object.create - 継承したプロパティを継承する](http://stackoverflow.com/q/3191103/1048572) – Bergi