javascript - 从 new 过渡到 Object.create()

标签 javascript

我最近发现了关于 newObject.create() 的整个争论。通过使用 new 进行大量面向对象的工作,我学会了解决问题的特定模式。为了学习不同的东西,我想我应该将一些简单的“经典 OO”代码重写为 Object.create() 风格。

我遇到了嵌套对象的问题,例如

   
function Base() {
  this.name = { first: '', last: '' };
}

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

a.name.first = 'Sally';
a.name.last = 'Broker';

b.name.first = 'Peter';
b.name.last = 'Davis';

document.write('first:', a.name.first, " last:", a.name.last);  // Outputs { first: 'Sally', last: 'Broker' }
document.write("<br>");
document.write('first:', b.name.first, " last:", b.name.last);  // Outputs { first: 'Peter', last: 'Davis' }

Object.create()

var base = {
  name: {
    first: '',
    last: ''
  }
};

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

a.name.first = 'Sally';
a.name.last = 'Broker';

b.name.first = 'Peter';
b.name.last = 'Davis';

document.write('first:', a.name.first, " last:", a.name.last);  // Outputs { first: 'Sally', last: 'Broker' }
document.write("<br>");
document.write('first:', b.name.first, " last:", b.name.last);  // Outputs { first: 'Peter', last: 'Davis' }

我理解为什么对嵌套对象的赋值不一样,而且我的想法是基于“经典 OO”中使用的编码模式。我正在尝试学习我应该如何思考,设计明智,当攻击我已经为嵌套对象而去的东西时,但在 Object.create() 的最佳实践方面。

最佳答案

这两个版本并不等同。在 new 的情况下,您将“名称”属性直接放在构造的实例上。当您像那样使用 Object.create() 时,您并没有这样做 - 您期望从原型(prototype)继承“名称”。因此,对“名称”对象的属性的后续分配会影响共享原型(prototype)版本。 (换句话说,a.nameb.name 指的是完全相同的对象。)

要使用 Object.create() 创建一个与 new 场景大致相同的版本,您需要执行如下操作:

var a = Object.create(Object.prototype, {
  name: {
    value: { first: "John", last: "Doe" },
    writable: true,
    enumerable: true
  }
});

或者,更简单地说:

var a = Object.create(Object.prototype);
a.name = { first: "John", last: "Doe" };

关于javascript - 从 new 过渡到 Object.create(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27843436/

相关文章:

javascript - 带有 $http 注入(inject)的 angularjs 自定义模块

javascript - 如何使用 Javascript 将图像添加为表格中的单元格

javascript - 从数组返回唯一值

javascript - Backbone事件回调是在绑定(bind)时调用,而不是触发

javascript - 当我在 ion-content 中使用 iframe 时,ion-content 滚动不起作用

javascript - 阴影在 (THREE.js r82) 中不可见

javascript - 在 THREE.js 中在两个轴上旋转 3d 矢量

javascript - 编写此查询的更漂亮的方式?

javascript - Excel SelectionChanged 事件未触发

javascript - Google Calendar API - 使用 Javascript 在另一个用户的日历中插入事件