具有多个属性的 Object.create() 的简写

Question

如果我想在 JavaScript 中创建一个 object，它有一个原型链接到另一个 object，但有几个它自己的属性，我该怎么做？

 var object1 = { a: 1, b: 2 }; var object2 = Object.create( object1 ); object2.c = 3; object2.d = 4; console.log( object2 ); // my new object with object1 as it's prototype link

我在这里面临的挑战是我必须一次设置一个object2的属性。

我的另一个选择是：

 var object1 = { a: 1, b: 2 }; var object2 = { c: 3, d: 4 }; Object.setPrototypeOf( object2, object1 ); console.log( object2 );

我上面的挑战是性能应该很糟糕。 也就是说， setPrototypeOf很慢。 https://jsperf.com/object-create-vs-object-setprototypeof

当然，还有你提供的“速记”， writeable ， enumerable和所有这些到Object.create() ，但这并不是真正的速记。

有任何想法吗？

Answer 1

作为Object.assign的替代Object.assign ，请记住Object.create接受带有要添加到对象的属性描述符的第二个参数：

 var object1 = { a: 1, b: 2 }; var object2 = Object.create(object1, { c: {value: 3, enumerable: true}, d: {value: 4, enumerable: true} }); console.log( object2 ); // my new object with object1 as it's prototype link 

请注意，默认值为不可配置，不可写和不可枚举。

如果存在问题，ES2017会引入Object.getOwnPropertyDescriptors 。

 var object1 = { a: 1, b: 2 }; var object2 = Object.create(object1, Object.getOwnPropertyDescriptors({ c: 3, d: 4 })); console.log( object2 ); // my new object with object1 as it's prototype link 

Answer 2

您可以将Object.create与Object.assign结合使用：

var object2 = Object.assign(Object.create(object1), {
    c: 3,
    d: 4
});

Answer 3

通常，当我们谈论设置和交换原型时，我们所谈论的是构造到对象而不是对象文字本身的构造函数。

在这种情况下，您当然可以手动手动切换原型（这是原型继承的基础），这将导致您继承正确的属性，但是现在，当获得派生对象的实例时，还必须处理构造函数问题。

但是，此技术之所以很快，是因为它只需要创建一个新实例，然后在原型属性中设置该引用。

 function object1(){ this.a = 1; this.b = 2; console.log("object1 has been invoked"); }; function object2(){ console.log("object2 has been invoked"); this.c = 3; this.d = 4; }; // It's very important that the prototype be set to a NEW instance // of the super-object so that you don't wind up sharing a prototype // with other unintended objects. object2.prototype = new object1(); // object2.prototype.constructor was the function object2 // But now that object2 has had its prototype swapped out // to object1, when new instances of object2 are made, the // constructor for object1 will execute. To fix this, we // just need to reset the constructor property of the new // prototype that we just set. That's another reason we created // a new instance of object1, so we could modify the constructor // of that instance without screwing up other instances of object1 // that may be in use. object2 will use object1 as // it's prototype, but that particular instance of object1 // will have object2 set as the constructor to use when instances // are needed. object2.prototype.constructor = object2; console.log( new object2() ); 

Answer 4

一种更优雅的方法是使用扩展语法。

const obj1 = { a: 1, b: 2 }
const obj2 = { ...obj1, c: 3, d: 4 }
console.table(obj1)
console.table(obj2)

您甚至可以用类似的方式向同一个 object 添加更多属性。

let obj = { a: 1, b: 2 }
obj = { ...obj, c: 3, d: 4 }
console.table(obj)

这也适用于 arrays。

let arr = [1, 2]
arr = [...arr, 3] // Equivalent to Array.push()
arr = [0, ...arr] // Equivalent to Array.unshift()
arr = [-1, ...arr, 4] // Equivalent to simultaneous Array.unshift() and Array.push()
console.table(arr)