使用“Object.create”而不是“新的”

Question

Javascript 1.9.3 / ECMAScript 5 引入了 Object.create，Douglas Crockford 等人已经长期倡导。如何将下面代码中的 new 替换为 Object.create？

var UserA = function(nameParam) {
    this.id = MY_GLOBAL.nextId();
    this.name = nameParam;
}
UserA.prototype.sayHello = function() {
    console.log('Hello '+ this.name);
}
var bob = new UserA('bob');
bob.sayHello();

（假设 MY_GLOBAL.nextId 存在）。

我能想到的最好的办法是：

var userB = {
    init: function(nameParam) {
        this.id = MY_GLOBAL.nextId();
        this.name = nameParam;
    },
    sayHello: function() {
        console.log('Hello '+ this.name);
    }
};
var bob = Object.create(userB);
bob.init('Bob');
bob.sayHello();

似乎没有任何优势，所以我想我没有得到它。我可能太新古典主义了。我应该如何使用Object.create来创建用户“bob”？

Answer 1

仅具有一级继承，您的示例可能无法让您看到 Object.create。

此方法允许您轻松实现差异继承，其中对象可以直接从其他对象继承。

在您的 userB 示例中，我认为您的 init 方法不应该是公共的，甚至不应该存在，如果您在现有对象实例上再次调用此方法，id 和 name 属性将会改变。

Object.create 允许您使用其第二个参数初始化对象属性，例如：

var userB = {
  sayHello: function() {
    console.log('Hello '+ this.name);
  }
};

var bob = Object.create(userB, {
  'id' : {
    value: MY_GLOBAL.nextId(),
    enumerable:true // writable:false, configurable(deletable):false by default
  },
  'name': {
    value: 'Bob',
    enumerable: true
  }
});

如您所见，可以在 Object.create 的第二个参数上初始化属性，使用对象字面量使用与 Object.defineProperties 和 Object.defineProperty 方法使用的语法类似的语法。

它允许您设置属性属性（enumerable、writable 或 configurable），这非常有用。

Answer 2

使用 Object.create(...) 相对于 new object 确实没有任何优势。

那些提倡这种方法的人通常会陈述相当模糊的优点：“可扩展性”，或“JavaScript 更自然" 等。

但是，我还没有看到一个具体的例子来表明 Object.create 与使用 new 相比有任何优势。相反，它存在已知的问题。 Sam Elsamman 描述了当存在嵌套对象和 Object.create(...) 时会发生什么情况被使用：

var Animal = {
    traits: {},
}
var lion = Object.create(Animal);
lion.traits.legs = 4;
var bird = Object.create(Animal);
bird.traits.legs = 2;
alert(lion.traits.legs) // shows 2!!!

出现这种情况是因为Object.create(...)提倡使用数据创建新对象的做法；这里，Animal 数据成为 lion 和 bird 原型的一部分，并在共享时引起问题。当使用 new 时，原型继承是显式的：

function Animal() {
    this.traits = {};
}

function Lion() { }
Lion.prototype = new Animal();
function Bird() { }
Bird.prototype = new Animal();

var lion = new Lion();
lion.traits.legs = 4;
var bird = new Bird();
bird.traits.legs = 2;
alert(lion.traits.legs) // now shows 4

关于传递到 Object.create(...) 的可选属性，可以使用 Object.defineProperties(...)。

Answer 3

Object.create 在一些浏览器上还不是标准的，例如 IE8、Opera v11.5、Konq 4.3 都没有它。您可以为这些浏览器使用 Douglas Crockford 版本的 Object.create，但这不包括 CMS 答案中使用的第二个“初始化对象”参数。

对于跨浏览器代码，同时进行对象初始化的一种方法是自定义 Crockford 的 Object.create。这是一种方法：-

Object.build = function(o) {
   var initArgs = Array.prototype.slice.call(arguments,1)
   function F() {
      if((typeof o.init === 'function') && initArgs.length) {
         o.init.apply(this,initArgs)
      }
   }
   F.prototype = o
   return new F()
}

这维护了 Crockford 原型继承，并且还检查对象中的任何 init 方法，然后使用您的参数运行它，例如 new man('John','Smith')。然后您的代码将变为：-

MY_GLOBAL = {i: 1, nextId: function(){return this.i++}}  // For example

var userB = {
    init: function(nameParam) {
        this.id = MY_GLOBAL.nextId();
        this.name = nameParam;
    },
    sayHello: function() {
        console.log('Hello '+ this.name);
    }
};
var bob = Object.build(userB, 'Bob');  // Different from your code
bob.sayHello();

所以 bob 继承了 sayHello 方法，现在拥有自己的属性 id=1 和 name='Bob'。当然，这些属性既可写又可枚举。这也是比 ECMA Object.create 更简单的初始化方法，特别是如果您不关心可写、可枚举和可配置属性的话。

对于没有 init 方法的初始化，可以使用以下 Crockford mod： -

Object.gen = function(o) {
   var makeArgs = arguments 
   function F() {
      var prop, i=1, arg, val
      for(prop in o) {
         if(!o.hasOwnProperty(prop)) continue
         val = o[prop]
         arg = makeArgs[i++]
         if(typeof arg === 'undefined') break
         this[prop] = arg
      }
   }
   F.prototype = o
   return new F()
}

这将按照定义的顺序填充 userB 自己的属性，在 userB 参数之后从左到右使用 Object.gen 参数。它使用 for(prop in o) 循环，因此根据 ECMA 标准，不能保证属性枚举的顺序与属性定义的顺序相同。然而，在 (4) 个主要浏览器上测试的几个代码示例表明，只要使用了 hasOwnProperty 过滤器，它们是相同的，有时即使不使用也是如此。

MY_GLOBAL = {i: 1, nextId: function(){return this.i++}};  // For example

var userB = {
   name: null,
   id: null,
   sayHello: function() {
      console.log('Hello '+ this.name);
   }
}

var bob = Object.gen(userB, 'Bob', MY_GLOBAL.nextId());

我想说比 Object.build 更简单，因为 userB 不需要 init 方法。另外，userB 并不是专门的构造函数，而是看起来像普通的单例对象。因此，使用此方法，您可以从普通的普通对象构造和初始化。

Answer 4

TL;DR：

new Computer() 将调用构造函数 Computer(){} 一次，而 Object.create(Computer.prototype)代码> 不会。

所有的优点都是基于这一点。

关于性能的旁注：像 new Computer() 这样的构造函数调用经过引擎的大力优化，因此它可能比 Object.create 更快。

Answer 5

您可以使 init 方法返回 this，然后将调用链接在一起，如下所示：

var userB = {
    init: function(nameParam) {
        this.id = MY_GLOBAL.nextId();
        this.name = nameParam;
        return this;
    },
    sayHello: function() {
        console.log('Hello '+ this.name);
    }
};

var bob = Object.create(userB).init('Bob');

Answer 6

Object.create 的另一种可能用法是以廉价而有效的方式克隆不可变对象。

var anObj = {
    a: "test",
    b: "jest"
};

var bObj = Object.create(anObj);

bObj.b = "gone"; // replace an existing (by masking prototype)
bObj.c = "brand"; // add a new to demonstrate it is actually a new obj

// now bObj is {a: test, b: gone, c: brand}

注释：上面的代码片段创建了源对象的克隆（也称为引用，如 cObj = aObj）。它优于复制属性方法（请参阅1），因为它不复制对象成员属性。相反，它创建另一个目标对象，其原型设置在源对象上。此外，当在目标对象上修改属性时，它们是“动态”创建的，掩盖了原型（src）的属性。这构成了克隆不可变对象的快速有效方法。

这里需要注意的是，这适用于创建后不应修改的源对象（不可变）。如果源对象在创建后被修改，则克隆的所有未屏蔽属性也将被修改。

在这里小提琴（http://jsfiddle.net/y5b5q/1/）（需要Object.create能力浏览器）。

Answer 7

我认为问题的要点是理解 new 和 Object.create 方法之间的区别。根据此答案和此视频 new 关键字执行以下操作：

1. 创建新对象。

2. 将新对象链接到构造函数（prototype）。

3. 使this变量指向新对象。

4. 使用新对象执行构造函数并隐式执行return this;

5. 将构造函数名称分配给新对象的属性constructor。

Object.create 仅执行第一步和第二步骤！

在所提供的代码示例中，这没什么大不了的，但在下一个示例中，它是：

var onlineUsers = [];
function SiteMember(name) {
    this.name = name;
    onlineUsers.push(name);
}
SiteMember.prototype.getName = function() {
    return this.name;
}
function Guest(name) {
    SiteMember.call(this, name);
}
Guest.prototype = new SiteMember();

var g = new Guest('James');
console.log(onlineUsers);

副作用结果将是：

[ undefined, 'James' ]

因为 Guest.prototype = new SiteMember();

但是我们不需要执行父构造方法，我们只需要使方法getName在Guest中可用。
因此我们必须使用Object.create。

如果替换Guest.prototype = new SiteMember();

Guest.prototype = Object.create(SiteMember.prototype); 结果为：

[ 'James' ]

Answer 8

有时您无法使用 NEW 创建对象，但仍然可以调用 CREATE 方法。

例如：如果您想定义自定义元素，它必须从 HTMLElement 派生。

proto = new HTMLElement  //fail :(
proto = Object.create( HTMLElement.prototype )  //OK :)
document.registerElement( "custom-element", { prototype: proto } )

Answer 9

优点是，在大多数浏览器上，Object.create 通常比 new 慢

在此 jsperf 示例中，在 Chromium 中，浏览器 new 的速度 30 倍 code>Object.create(obj) 虽然两者都相当快。这很奇怪，因为 new 做了更多的事情（比如调用构造函数），而 Object.create 应该只是用传入的对象作为原型创建一个新对象（Crockford 语言中的秘密链接）

也许浏览器还没有跟上使 Object.create 更加高效（也许他们在幕后基于 new ......即使在本机代码中也是如此）

Answer 10

摘要：

• Object.create() 是一个 Javascript 函数，它接受 2 个参数并返回一个新对象。
• 第一个参数是一个对象，它将成为新创建对象的原型
• 第二个参数是一个对象，它将成为新创建对象的属性

示例：

const proto = {
  talk : () => console.log('hi')
}

const props = {
  age: {
    writable: true,
    configurable: true,
    value: 26
  }
}


let Person = Object.create(proto, props)

console.log(Person.age);
Person.talk();

实际应用：

1. 以这种方式创建对象的主要优点是可以显式定义原型。当使用对象字面量或 new 关键字时，您无法控制它（但是，您当然可以覆盖它们）。
2. 如果我们想要一个原型 new 关键字会调用构造函数。使用Object.create()，不需要调用甚至声明构造函数。
3. 当您想要以非常动态的方式创建对象时，它基本上是一个有用的工具。我们可以创建一个对象工厂函数，它根据收到的参数创建具有不同原型的对象。

Answer 11

new 运算

• 符 用于从构造函数创建对象
• new 关键字还执行构造函数

function Car() {
  console.log(this) // this points to myCar
  this.name = "Honda";
}

var myCar = new Car()
console.log(myCar) // Car {name: "Honda", constructor: Object}
console.log(myCar.name) // Honda
console.log(myCar instanceof Car) // true
console.log(myCar.constructor) // function Car() {}
console.log(myCar.constructor === Car) // true
console.log(typeof myCar) // object

Object.create

• 您还可以使用 Object.create 创建一个新对象
• 但是，它不执行构造函数
• Object.create 用于从另一个对象创建一个对象

const Car = {
  name: "Honda"
}

var myCar = Object.create(Car)
console.log(myCar) // Object {}
console.log(myCar.name) // Honda
console.log(myCar instanceof Car) // ERROR
console.log(myCar.constructor) // Anonymous function object
console.log(myCar.constructor === Car) // false
console.log(typeof myCar) // object

Answer 12

您必须创建一个自定义 Object.create() 函数。一种可以解决 Crockfords 问题并调用您的 init 函数的方法。

这将起作用：

var userBPrototype = {
    init: function(nameParam) {
        this.name = nameParam;
    },
    sayHello: function() {
        console.log('Hello '+ this.name);
    }
};


function UserB(name) {
    function F() {};
    F.prototype = userBPrototype;
    var f = new F;
    f.init(name);
    return f;
}

var bob = UserB('bob');
bob.sayHello();

这里 UserB 就像 Object.create，但根据我们的需要进行了调整。

如果您愿意，您也可以致电：

var bob = new UserB('bob');

Answer 13

虽然 Douglas Crockford 曾经是 Object.create() 的热心拥护者，并且他基本上是这个构造实际上出现在 javascript 中的原因，但他不再持有这种观点。

他停止使用 Object.create，因为他完全停止使用 this 关键字，因为它会带来太多麻烦。例如，如果您不小心，它很容易指向全局对象，这可能会产生非常严重的后果。他声称，如果不使用 this Object.create 就不再有意义了。

您可以查看 2014 年他在 Nordic.js 上演讲的视频：

https://www.youtube .com/watch?v=PSGEjv3Tqo0

Answer 14

new 和 Object.create 有不同的用途。 new 旨在创建对象类型的新实例。 Object.create 旨在简单地创建一个新对象并设置其原型。为什么这有用？无需访问 __proto__ 属性即可实现继承。对象实例的原型称为[[Prototype]]，是虚拟机的内部属性，不能直接访问。实际上可以直接访问 [[Prototype]] 作为 __proto__ 属性的唯一原因是它一直是每个主要虚拟机实现的事实上的标准ECMAScript，此时删除它会破坏许多现有代码。

为了回应 7ochem 上面的答案，对象绝对不应该将其原型设置为 new 语句的结果，不仅因为多次调用相同的原型构造函数没有意义，而且因为两个实例如果原型在创建后被修改，同一类的原型可能会产生不同的行为。这两个示例都是由于误解和破坏原型继承链的预期行为而导致的错误代码。

实例的原型应该在使用 Object.create 创建时或之后使用 Object.setPrototypeOf 写入，而不是访问 __proto__，并且使用Object.getPrototypeOf或Object.isPrototypeOf读取。

另外，正如 Object.setPrototypeOf 的 Mozilla 文档 指出，出于性能原因，在创建对象后修改其原型是一个坏主意，此外，在创建对象后修改其原型可能会导致未定义的行为，如果给定的一段访问它的代码可以在原型修改之前或之后执行，除非该代码非常仔细地检查当前原型或不访问两者之间不同的任何属性。

给定

const X = 函数 (v) { this.v = v };
X.prototype.whatAmI = 'X';
X.prototype.getWhatIAm = () =>这是什么？
X.prototype.getV = () =>; this.v;

以下 VM 伪代码相当于语句 const x0 = new X(1);：

const x0 = {}；
x0.[[原型]] = X.原型;
X.prototype.constructor.call(x0, 1);

请注意，虽然构造函数可以返回任何值，但 new 语句始终忽略其返回值并返回对新创建对象的引用。

下面的伪代码相当于语句 const x1 = Object.create(X.prototype);：

const x0 = {}；
x0.[[原型]] = X.prototype;

正如你所看到的，两者之间唯一的区别是 Object.create 不执行构造函数，它实际上可以返回任何值，而只是返回新的对象引用 this如果没有另外指定。

现在，如果我们想创建一个具有以下定义的子类 Y：

const Y = 函数(u) { this.u = u; }
Y.prototype.whatAmI = 'Y';
Y.prototype.getU = () =>; this.u;

然后我们可以通过写入__proto__来让它继承X：

Y.prototype.__proto__ = X.prototype;

虽然无需使用以下命令写入 __proto__ 也可以完成同样的事情：

Y.prototype = Object.create(X.prototype);
Y.prototype.constructor = Y;

在后一种情况下，需要设置原型的构造函数属性，以便 new Y 语句调用正确的构造函数，否则 new Y 将调用该函数X。如果程序员确实希望 new Y 调用 X，那么在 Y 的构造函数中使用 X.call(this, u) 会更合适。

Answer 15

我更喜欢封闭的方法。

我仍然使用new。
我不使用Object.create。
我不使用这个。

我仍然使用 new 因为我喜欢它的声明性本质。

考虑这个简单的继承。

window.Quad = (function() {

    function Quad() {

        const wheels = 4;
        const drivingWheels = 2;

        let motorSize = 0;

        function setMotorSize(_) {
            motorSize = _;
        }

        function getMotorSize() {
            return motorSize;
        }

        function getWheelCount() {
            return wheels;
        }

        function getDrivingWheelCount() {
            return drivingWheels;
        }
        return Object.freeze({
            getWheelCount,
            getDrivingWheelCount,
            getMotorSize,
            setMotorSize
        });
    }

    return Object.freeze(Quad);
})();

window.Car4wd = (function() {

    function Car4wd() {
        const quad = new Quad();

        const spareWheels = 1;
        const extraDrivingWheels = 2;

        function getSpareWheelCount() {
            return spareWheels;
        }

        function getDrivingWheelCount() {
            return quad.getDrivingWheelCount() + extraDrivingWheels;
        }

        return Object.freeze(Object.assign({}, quad, {
            getSpareWheelCount,
            getDrivingWheelCount
        }));
    }

    return Object.freeze(Car4wd);
})();

let myQuad = new Quad();
let myCar = new Car4wd();
console.log(myQuad.getWheelCount()); // 4
console.log(myQuad.getDrivingWheelCount()); // 2
console.log(myCar.getWheelCount()); // 4
console.log(myCar.getDrivingWheelCount()); // 4 - The overridden method is called
console.log(myCar.getSpareWheelCount()); // 1

鼓励反馈。