javascript - Object.defineProperty "undefining"原型(prototype)对象创建模式中的值属性

Question

当使用对象字面量表示法创建 Javascript 对象时，如下所示:

var objectLiteralCat = {
  name: {first: 'frisky', last: 'LaBeouf'},
  color: 'Red'
}

然后我可以像这样更改 objectLiteralCat 的 name 属性的属性:

Object.defineProperty(objectLiteralCat,'name', {configurable: false});

太好了，现在没有其他人可以删除 objectLiteralCat.name 属性或更改其可枚举属性。

我正在尝试创建原型(prototype)模式对象的“ flavor ”，我想使用 Object.defineProperty 来设置名称 Property Attribute configurable = false 像上面一样，这里是代码:

var Cat = {
  create: function(firstName, lastName, color){
    var self = Object.create(this);
    self.name.first = firstName;
    self.name.last = lastName;
    Object.defineProperty(self,'name', {configurable: false});
    Object.freeze(self.name);
    Object.freeze(self.color);
    return self;
  },
  name: {first: '', last: ''},
  color: ''
}

var cat = Cat.create('frisky','smith','white');
console.log(cat.name); //undefined

如果在 Cat.create 函数中我注释掉了这一行:

Object.defineProperty(self,'name', {configurable: false});

然后 console.log(cat.name) 输出，如预期的那样:

Object {first: "frisky", last: "smith"}

我可以显式设置 Cat.name 属性的 value 属性，如下所示:

Object.defineProperty(self,'name', {value: self.name, configurable: false});

我不明白的是为什么 objectLiteralCat 不调用 Object.defineProperty:

Object.defineProperty(objectLiteralCat,'name', {configurable: false});

将 objectLiteralCat.name 设置为 undefined，例如:

Object.defineProperty(self,'name', {configurable: false});

在我的 Cat.create 函数中有吗？

即使我在 Cat.create 中注释掉 Object.define 代码，并在创建 cat 对象后将其移到外面，就像这样:

var cat = Cat.create('fluffy', 'leboudf', 'white');
Object.defineProperty(cat,'name', {configurable: false});
console.log(cat.name);

console.log(cat.name) 的输出又是undefined。

我的 objectLiteralCat 对象:

Object {
    name: [object Object]
    color: Red
}

看起来与我的“原型(prototype)模式对象创建风格”基本相同

Object {
    create: function(firstName, lastName, color){
        var self = Object.create(this);
        self.name.first = firstName;
        self.name.last = lastName;
        //Object.defineProperty(self,'name', {value: self.name, configurable: false});
        Object.freeze(self.name);
        Object.freeze(self.color);
        return self;
    }
    name: [object Object]
    color:
}

不过，查看这两个对象的 console.log，看起来用 Cat.create 创建的对象的所有属性都嵌套在 __proto__ 中

我确信这是我问题答案的线索，但我对 Javascript 的了解还不够先进，无法在没有帮助的情况下找出答案。

Answer 1

区别在于，在您的对象字面量中，objectLiteralCat.name 指的是 objectLiteralCat 上的 name 对象。另一方面，当调用 Cat.create 时，您创建了两个 name:一个在原型(prototype)对象上(位于 Cat.name)，另一个在self对象上。 Object.defineProperty 不会查找原型(prototype)链来确定传递的属性名称在哪里/是否在任何原型(prototype)对象上 - 相反，Object.defineProperty 定义属性立即传递给它的对象，在本例中是self。

但是，之前

Object.defineProperty(self,'name', {configurable: false});

被调用，引用 self.name - 也就是说，在行中

self.name.first = firstName;
self.name.last = lastName;

将引用原型(prototype)链中具有 name 属性的最近对象 - 即 Cat.name 对象。为了说明这一点，请看实例化一只猫如何改变 Cat.name 原型(prototype)对象:

var Cat = {
  create: function(firstName, lastName, color){
    var self = Object.create(this);
    self.name.first = firstName;
    self.name.last = lastName;
    Object.defineProperty(self,'name', {configurable: false});
    Object.freeze(self.name);
    Object.freeze(self.color);
    return self;
  },
  name: {first: '', last: ''},
  color: ''
}

var cat = Cat.create('frisky','smith','white');

// Log the prototype object: it's been mutated!
console.log(Cat.name);

在那之后，当你调用

Object.defineProperty(self,'name', {configurable: false});

这会将 name 属性直接设置在 self 上，而不是在原型(prototype)上。但是您还没有向它传递任何 value，因此它默认为 undefined。 name 属性现在 both 存在于原型(prototype)对象(Cat.name.first 和 Cat.name.last )、和在实例化的 cat 上(=== undefined)。

也许您想在开始时直接在 self 上显式创建一个新的 name 属性，在 分配给 self.name .first:

var Cat = {
  create: function(firstName, lastName, color){
    var self = Object.create(this);
    Object.defineProperty(self,'name', {configurable: false, value: {}});
    self.name.first = firstName;
    self.name.last = lastName;
    Object.freeze(self.name);
    Object.freeze(self.color);
    return self;
  },
  name: {first: '', last: ''},
  color: ''
}

var cat = Cat.create('frisky','smith','white');
console.log(cat.name);