使用“new”运算符创建对象的实例可以工作

Question

这里有点JavaScript新手。我在这里有以下2个JavaScript代码片段，它们没有达到我所期望的。这些示例使用“new”运算符在示例 #1 中创建对象“Person”的实例，并使用 ES5 Object.create（） 属性在示例 #2 中创建“Person”的原型。let Person = function(name, age, city) {    this.name = name;    this.age = age;     this.city = city}// Using 'new' operator (working)let person1 = new Person("Jack Rabit", 40, "Seattle");Object.values(person1); // Shows "Jack Rabit", 40, "Seattle"但是，使用 Object.create（） 属性执行以下操作...不显示属性的第一个值（在本例中为“name”）：let person2 = Object.create(Person);person2.name = "Will"; person2.age=41; person2.city="San Jose";Object.values(person2); // Shows 41, "San Jose" (Does NOT show the value of the "name" property)我错过了什么？

Answer 1

因此，通常当我使用时，我会传递一个对象以在原型中使用。您当前正在将函数作为参数传递。这种方式有效Object.create()

const Person = function(name, age, city) {

    this.name = name;

    this.age = age; 

    this.city = city

}

const person2 = Object.create(new Person());

person2.name = "Will"; 

person2.age=41; 

person2.city="San Jose";

Object.values(person2);

这可能与函数本身有自己的属性这一事实有关？但我不太确定name

编辑：

确认只是因为名称属性，将名称更改为标题以避免混淆：

const Person = function(title, age, city) {

    this.title = title;

    this.age = age; 

    this.city = city

}

const person2 = Object.create(Person);

person2.title = "Will"; 

person2.age=41; 

person2.city="San Jose";

Object.values(person2);

// ["Will", 41, "San Jose"]

Answer 2

Object.create创建一个新对象，将给定对象作为其 .[[prototype]]

您在此处尝试错误地继承属性。您正在创建具有构造函数作为其原型的对象。所有函数都有一个名为 的不可枚举和不可写属性。你可以看到person2Personname

Object.getOwnPropertyDescriptor(Person, "name")

该线路实际上试图覆盖此属性，并且不执行任何操作。也有效地成为一种功能。person2.name = "Will";person2

在这里，正确的用法是

let person2 = Object.create(new Person());

Answer 3

Object.create 需要一个对象来创建另一个对象。因此，请使用 Person 函数返回对象。它应该看起来像这样：

 let Person = function(name, age, city) {

  return {

    name,

    age,

    city

  };

}

// Using 'new' operator (working)

let person1 = new Person("Jack Rabit", 40, "Seattle");

let person2 = Object.create(Person());

person2.name = "Will"; 

person2.age=41; 

person2.city="San Jose";

Answer 4

Object.create需要一个对象来创建另一个对象，因此虽然是一个函数（确切地说是一个函数构造函数）也是javaScript中的一个对象。因此，Object.create不会抱怨，但是当它以这种方式完成时，引擎盖下发生了什么：Person

let person2 = Object.create(Person);

person2最终被分配了一个名为“Person”的函数的一些属性（它本身不是一个函数，它不能被调用），这可以在这里看到：

// person2.name = 'Person'

// person2() Uncaught TypeError: person2 is not a function at <anonymous>:1:1

作为函数的继承属性之一，其名称是只读的，因此不会产生任何影响。Function.name MDN 文档person2.name = 'some name'

运算符将调用构造函数，构造函数将在继承构造函数的原型时返回一个对象new