Question

参考下面的JavaScript代码段，问题：

为什么对象文字{item：{value：“foobar”}}在分配给变量时（如第1行）与作为Object.create（）的参数传递时表现不同（如在第5行？
第5行和第8行之间有什么区别 - 也就是为什么第5行是将第二个参数传递给Object.create（）而不是第8行（以覆盖委托中的item属性）的正确方法？

代码段：

 1 var obj = {item: {value: "foobar"}};
 2 console.log(obj.item);            // [object Object]
 3 console.log(obj.item.value);      // foobar

 4 var delegate = {item: "xxx"};
 5 var obj1 = Object.create(delegate, {item: {value: "foobar"}});
 6 console.log(obj1.item);          // foobar
 7 console.log(obj1.item.value);    // undefined

 8 var obj2 = Object.create(delegate, {item: "bar"});
 9 console.log(obj2.item);          // <nothing>

Answer 1

这是因为根据此参考：https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/create

Object.create接收一个带有“属性描述符”作为第二个参数的对象，而不是普通的key:value对。

有关属性描述符的说明，请参阅此博客文章：http://ejohn.org/blog/ecmascript-5-objects-and-properties/。

属性描述符是描述每个属性的对象，而不仅仅是属性值。来自您的代码段：

2 obj.item // [object Object] since item is the object {value:"foobar¨}

6 obj1.item // foobar, the descriptor says that the value 
            // of item is "foobar"

7 obj1.item.value // undefined since item="foobar", value is part of
                  // the object that describes "item" not item itself

9 obj2.item  // nothing because the descriptor that you passed 
             // for item is incomplete

Answer 2

在第1行中，您的对象文字按字面意思解释并按照您通常的预期进行实例化。

然而，在第5行中，您的对象文字按字面解释，但会传递到Object.create函数中，其中实例化对象被视为“包含属性描述符的属性对象”。
因为Object.create函数需要它的第二个参数遵循“属性对象”约定，所以第二个参数（第8行）无效（在Chrome中导致类型错误）。

以下代码段可能有助于说明：

var PrototypeObj = { item: 'xxx' };

var PropertiesObj = {
  propertyDescriptor1: {
    value: "prop1value",
    writable: true,
    enumerable: true,
    configurable: true
  },
  propertyDescriptor2: {
    value: "prop2value",
    writable: true,
    enumerable: true,
    configurable: true
  }
};

var Obj = Object.create(PrototypeObj, PropertiesObj);

这些文章更详细： Object.create， Object.defineProperty

JavaScript - 将对象文字作为第二个arg传递给Object.create（）

2 个答案: