使用 "new "操作符创建一个对象实例是可行的，但使用Object.create()就不会产生同样的结果。

Question

我是一个JavaScript新手。我这里有以下2个JavaScript代码片段，但没有达到我的预期。例子#1中使用 "new "操作符创建了对象 "Person "的实例，例子#2中使用ES5 Object.create()属性创建了 "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]].

你在这里试图错误地继承属性。你正在创建 person2 对象的构造函数 Person 作为其原型。所有函数都有一个非可数和不可写的属性，叫做 name. 你可以看到，通过

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需要一个对象来创建另一个对象，结果是由于 Person 虽然是一个函数（确切的说是一个函数构造函数），但在javaScript中也是一个对象。因此Object.create不会抱怨，但是这样做的时候会发生什么呢？

let person2 = Object.create(Person);

person2 最终被分配了一个名为 "Person "的函数的一些属性(它本身不是一个函数，不能被调用)，这可以在这里看到。

// person2.name = 'Person'

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

作为一个函数的继承属性之一，它的名字是只读的，因此... ... person2.name = 'some name' 将不会有任何影响。函数名称 MDN docs

该 new 操作符将调用构造函数，它将返回一个对象，同时继承构造函数的原型。