数组作为文字对象中的属性

Question

我不太容易解释这个问题，只是看一下示例代码。

＆＃13;

＆＃13;

var test = { 
	my_array: [],
	my_var: ''
}


var a = Object.create(test);
var b = Object.create(test);


a.my_array.push('aaa');
b.my_array.push('bbb');

a.my_var = 'this is obj A';
b.my_var = 'this is obj B';


document.write(a.my_array[0]); //output: aaa
document.write('<br>');
document.write(b.my_array[0]); //output: aaa
document.write('<br>');
document.write(a.my_var); //output: this is obj A
document.write('<br>');
document.write(b.my_var); //output: this is obj B

＆＃13;

＆＃13;

＆＃13;

Object b 与Object a 具有相同的数组值怎么可能？

Answer 1

您已创建了两个共享单个原型对象的对象。在对象属性查找期间找到对象原型的属性;它们不会在创建时复制到对象实例。

在

中为对象属性赋值时

a.my_var = 'this is obj A';

然后该物业成为本地＆＃34;拥有＆＃34;对象的属性，即使它以前是一个原型属性。您不能通过类似的赋值来更改原型属性值。

Answer 2

由于您创建对象的方式，my_array属性在两个对象中都具有相同的引用。我提供了一个简单的改编来实现预期的结果。

var test = function () {
    return { 
	  my_array: [],
	  my_var: ''
    }
}

var a = Object.create(test());
var b = Object.create(test());

a.my_array.push('aaa');
b.my_array.push('bbb');

a.my_var = 'this is obj A';
b.my_var = 'this is obj B';

document.write(a.my_array[0]); //output: aaa
document.write('<br>');
document.write(b.my_array[0]); //output: aaa
document.write('<br>');
document.write(a.my_var); //output: this is obj A
document.write('<br>');
document.write(b.my_var); //output: this is obj B

Answer 3

您只需创建一个数组对象，此处：

my_array: []

当你Object.create一个新对象时，该数组不会被复制/克隆/重新实例化。两个实例共享相同的数组对象。

Answer 4

要完成答案，此图片非常明确：

（我只是制作一个console.log(a, b)）

编辑：

避免此问题的方法（https://jsfiddle.net/dafuaLkj/）：

var test = function() {
  this.my_array = [];
    this.my_var = ''
} 


var a = new test();
var b = new test();

Answer 5

您正在做的是一个简单的克隆。你想要的是深度克隆。对于深度克隆，我们需要使用其他替代方案。这是因为Object.create（）在这里，当被分配的属性是对象或数组时复制属性引用。

如果需要对象的深层副本（即所有嵌套属性的递归副本，遍历原型链），则必须使用其他方法。以下是一个可能的例子。 （Source: MDN）

function clone(objectToBeCloned) {
  // Basis.
  if (!(objectToBeCloned instanceof Object)) {
    return objectToBeCloned;
  }

  var objectClone;
  
  // Filter out special objects.
  var Constructor = objectToBeCloned.constructor;
  switch (Constructor) {
    // Implement other special objects here.
    case RegExp:
      objectClone = new Constructor(objectToBeCloned);
      break;
    case Date:
      objectClone = new Constructor(objectToBeCloned.getTime());
      break;
    default:
      objectClone = new Constructor();
  }
  
  // Clone each property.
  for (var prop in objectToBeCloned) {
    objectClone[prop] = clone(objectToBeCloned[prop]);
  }
  
  return objectClone;
}

var test = { 
	my_array: [],
	my_var: ''
}


var a = clone(test);
var b = clone(test);


a.my_array.push('aaa');
b.my_array.push('bbb');

a.my_var = 'this is obj A';
b.my_var = 'this is obj B';


document.write(a.my_array[0]); //output: aaa
document.write('<br>');
document.write(b.my_array[0]); //output: aaa
document.write('<br>');
document.write(a.my_var); //output: this is obj A
document.write('<br>');
document.write(b.my_var); //output: this is obj B