javascript - new vs object create给出不同的结果OO javascript

Question

我正在处理一个点亮的数据对象，然后尝试创建一个新对象来更改该实例的数据属性中的属性，这是来自 jsbin 的一些测试代码

data = {
  innerData : 1 
}

-------------

'This works :-)'

construct = function(d){
  this.data = Object.create(d);
};

construct.prototype.c = function(n){
  this.data.innerData  =  n;
};

construct.prototype.d = function(){
   console.log(this.data.innerData)
};

--------------

'This does not :-{'

construct = {
  data : Object.create(data),
  changeData : function(n){
    this.data.innerData  =  n;
  },
  showData:function(){
    console.log(this.data.innerData)
  }
}

--------------

newInst = Object.create(construct);
newInst.changeData(5);
newInst.showData();

newInst2 = Object.create(construct);
newInst2showData();

当我使用构造函数/原型(prototype)函数运行它时，它可以工作并且控制台输出 5,2

当我使用对象文字运行它时，控制台输出 5,5 我猜想当我创建第一个实例时它会更改实际数据对象而不是构造对象实例的数据属性。

如果有人能深入解释为什么会发生这种情况，那将会很有帮助，因为我使用 OOJS 的时间并不长

更新:

所以我尝试合并我从答案中发现有用的内容，然后我想出了这个....

data = {
  innerData : 1 
}

function construct(d){
  return {
    data : Object.create(d),
    changeData : function(n){
      this.data.innerData  =  n;
    },
    showData : function(){
      console.log(this.data.innerData)
    }
  }
}

build = function(){
 return(new construct(data));
}

newInst = build();
newInst.changeData(5);
newInst.showData();

newInst2 = build();
newInst2.showData();

Answer 1

鉴于我们对继承的了解，以下内容实际上做了什么

this.data.innerData  =  n;

this 是 Object.create(construct) 的结果？

1. this 没有自己的属性 data，所以在继承的属性中查找。
2. 好的，我们找到了一个data === Object.getPrototypeOf(this).data，称之为d
3. 接下来将d的innerData设置为n

所以最终的实际结果是 innerData 属性已设置在 prototype 的引用上，而不是新的 Object.

为什么会这样？因为如果您有 o = {} 并尝试执行 o.foo.bar，您会得到一个 TypeError: Cannot read property 'bar' of undefined，因此为了不抛出错误，它必须访问一个定义的对象。

var proto = {foo: {bar: 'fizz'}},
    obj = Object.create(proto);
obj.foo.bar = 'buzz';
proto.foo.bar; // "buzz" (i.e. NOT "fizz" anymore)
// and
obj.foo === Object.getPrototypeOf(obj).foo; // true