了解 Object.create() 和 new SomeFunction() 之间的区别

以下是两个调用在内部发生的步骤：（提示：唯一的区别在于第 3 步）

new Test()：

create new Object() obj set obj.__proto__ to Test.prototype return Test.call(obj) ||对象； // 通常返回 obj 但 JS 中的构造函数可以返回一个值

Object.create( Test.prototype )

create new Object() obj set obj.__proto__ to Test.prototype return obj;

所以基本上 Object.create 不执行构造函数。

---

让我试着解释一下（更多关于 Blog）：

当您编写 Car 构造函数 var Car = function(){} 时，内部情况是这样的：我们有一个 {prototype} 到 Function.prototype 的隐藏链接，它是不可访问的，还有一个原型链接到 Car.prototype，它是可访问的并且具有Car 的实际构造函数。 Function.prototype 和 Car.prototype 都有指向 Object.prototype 的隐藏链接。当我们想使用 new 运算符和 create 方法创建两个等效对象时，我们必须这样做： Honda = new Car();和 Maruti = Object.create(Car.prototype)。怎么了？本田 = 新车（）； — 当您创建这样的对象时，隐藏的 {prototype} 属性将指向 Car.prototype。所以在这里，Honda 对象的 {prototype} 将始终是 Car.prototype — 我们没有任何选项可以更改对象的 {prototype} 属性。如果我想改变我们新创建的对象的原型怎么办？ Maruti = Object.create(Car.prototype) — 当您创建这样的对象时，您有一个额外的选项来选择对象的 {prototype} 属性。如果您希望 Car.prototype 作为 {prototype} ，则将其作为参数传递给函数。如果您的对象不需要任何 {prototype}，那么您可以像这样传递 null：Maruti = Object.create(null)。

结论 — 通过使用方法 Object.create，您可以自由选择对象 {prototype} 属性。在 new Car(); 中，您没有这种自由。

OO JavaScript 中的首选方式：

假设我们有两个对象 a 和 b。

var a = new Object();
var b = new Object();

现在，假设 a 有一些 b 也想访问的方法。为此，我们需要对象继承（只有当我们想要访问这些方法时，a 才应该是 b 的原型）。如果我们检查 a 和 b 的原型，我们会发现它们共享原型 Object.prototype。

Object.prototype.isPrototypeOf(b); //true
a.isPrototypeOf(b); //false (the problem comes into the picture here).

问题 - 我们希望对象 a 作为 b 的原型，但这里我们使用原型 Object.prototype 创建了对象 b。 解决方案—— ECMAScript 5 引入了 Object.create()，可以轻松实现这种继承。如果我们像这样创建对象 b：

var b = Object.create(a);

然后，

a.isPrototypeOf(b);// true (problem solved, you included object a in the prototype chain of object b.)

因此，如果您正在编写面向对象的脚本，那么 Object.create() 对于继承非常有用。

---

这个：

var foo = new Foo();

和

var foo = Object.create(Foo.prototype);

非常相似。一个重要的区别是 new Foo 实际运行构造函数代码，而 Object.create 不会执行诸如

function Foo() {
    alert("This constructor does not run with Object.create");
}

请注意，如果您使用 Object.create() 的两参数版本，那么您可以做更强大的事情。

---

区别在于所谓的“伪经典与原型继承”。建议在您的代码中仅使用一种类型，而不是混合使用这两种类型。

在伪经典继承（使用“new”运算符）中，假设您首先定义一个伪类，然后从该类创建对象。例如，定义一个伪类“Person”，然后从“Person”创建“Alice”和“Bob”。

在原型继承中（使用 Object.create），您直接创建一个特定的人“Alice”，然后使用“Alice”作为原型创建另一个人“Bob”。这里没有“类”；都是对象。

在内部，JavaScript 使用“原型继承”； “伪经典”方式只是一些糖。

有关这两种方式的比较，请参见 this link。

---

function Test(){
    this.prop1 = 'prop1';
    this.prop2 = 'prop2';
    this.func1 = function(){
        return this.prop1 + this.prop2;
    }
};

Test.prototype.protoProp1 = 'protoProp1';
Test.prototype.protoProp2 = 'protoProp2';
var newKeywordTest = new Test();
var objectCreateTest = Object.create(Test.prototype);

/* Object.create   */
console.log(objectCreateTest.prop1); // undefined
console.log(objectCreateTest.protoProp1); // protoProp1 
console.log(objectCreateTest.__proto__.protoProp1); // protoProp1

/* new    */
console.log(newKeywordTest.prop1); // prop1
console.log(newKeywordTest.__proto__.protoProp1); // protoProp1

概括：

1) 使用 new 关键字有两点需要注意；

a) 函数用作构造函数

b) function.prototype 对象被传递给 __proto__ 属性...或者在不支持 __proto__ 的情况下，它是新对象查找属性的第二个位置

2) 使用 Object.create(obj.prototype) 您正在构造一个对象 (obj.prototype) 并将其传递给预期的对象..不同之处在于现在新对象的 __proto__ 也指向 obj.prototype （请为此参考 xj9 )

---

对象创建变体。

变体 1：'new Object()' -> 不带参数的对象构造函数。

var p1 = new Object(); // 'new Object()' create and return empty object -> {}

var p2 = new Object(); // 'new Object()' create and return empty object -> {}

console.log(p1); // empty object -> {}

console.log(p2); // empty object -> {}

// p1 and p2 are pointers to different objects
console.log(p1 === p2); // false

console.log(p1.prototype); // undefined

// empty object which is in fact Object.prototype
console.log(p1.__proto__); // {}

// empty object to which p1.__proto__ points
console.log(Object.prototype); // {}

console.log(p1.__proto__ === Object.prototype); // true

// null, which is in fact Object.prototype.__proto__
console.log(p1.__proto__.__proto__); // null

console.log(Object.prototype.__proto__); // null

https://i.stack.imgur.com/zcyc8.jpg

变体 2：'new Object(person)' -> 带参数的对象构造函数。

const person = {
    name: 'no name',
    lastName: 'no lastName',
    age: -1
}

// 'new Object(person)' return 'person', which is pointer to the object ->
//  -> { name: 'no name', lastName: 'no lastName', age: -1 }
var p1 = new Object(person);

// 'new Object(person)' return 'person', which is pointer to the object ->
//  -> { name: 'no name', lastName: 'no lastName', age: -1 }
var p2 = new Object(person);

// person, p1 and p2 are pointers to the same object
console.log(p1 === p2); // true
console.log(p1 === person); // true
console.log(p2 === person); // true

p1.name = 'John'; // change 'name' by 'p1'
p2.lastName = 'Doe'; // change 'lastName' by 'p2'
person.age = 25; // change 'age' by 'person'

// when print 'p1', 'p2' and 'person', it's the same result,
// because the object they points is the same
console.log(p1); // { name: 'John', lastName: 'Doe', age: 25 }
console.log(p2); // { name: 'John', lastName: 'Doe', age: 25 }
console.log(person); // { name: 'John', lastName: 'Doe', age: 25 }

https://i.stack.imgur.com/UMtro.jpg

变体 3.1：'Object.create(person)'。将 Object.create 与简单对象“人”一起使用。 'Object.create(person)' 将创建（并返回）新的空对象并将属性 '__proto__' 添加到同一个新的空对象。此属性“__proto__”将指向对象“人”。

const person = {
        name: 'no name',
        lastName: 'no lastName',
        age: -1,
        getInfo: function getName() {
           return `${this.name} ${this.lastName}, ${this.age}!`;
    }
}

var p1 = Object.create(person);

var p2 = Object.create(person);

// 'p1.__proto__' and 'p2.__proto__' points to
// the same object -> 'person'
// { name: 'no name', lastName: 'no lastName', age: -1, getInfo: [Function: getName] }
console.log(p1.__proto__);
console.log(p2.__proto__);
console.log(p1.__proto__ === p2.__proto__); // true

console.log(person.__proto__); // {}(which is the Object.prototype)

// 'person', 'p1' and 'p2' are different
console.log(p1 === person); // false
console.log(p1 === p2); // false
console.log(p2 === person); // false

// { name: 'no name', lastName: 'no lastName', age: -1, getInfo: [Function: getName] }
console.log(person);

console.log(p1); // empty object - {}

console.log(p2); // empty object - {}

// add properties to object 'p1'
// (properties with the same names like in object 'person')
p1.name = 'John';
p1.lastName = 'Doe';
p1.age = 25;

// add properties to object 'p2'
// (properties with the same names like in object 'person')
p2.name = 'Tom';
p2.lastName = 'Harrison';
p2.age = 38;

// { name: 'no name', lastName: 'no lastName', age: -1, getInfo: [Function: getName] }
console.log(person);

// { name: 'John', lastName: 'Doe', age: 25 }
console.log(p1);

// { name: 'Tom', lastName: 'Harrison', age: 38 }
console.log(p2);

// use by '__proto__'(link from 'p1' to 'person'),
// person's function 'getInfo'
console.log(p1.getInfo()); // John Doe, 25!

// use by '__proto__'(link from 'p2' to 'person'),
// person's function 'getInfo'
console.log(p2.getInfo()); // Tom Harrison, 38!

https://i.stack.imgur.com/JJzaT.jpg

变体 3.2：'Object.create(Object.prototype)'。使用带有内置对象的 Object.create -> 'Object.prototype'。 'Object.create(Object.prototype)' 将创建（并返回）新的空对象并将属性 '__proto__' 添加到同一个新的空对象。此属性“__proto__”将指向对象“Object.prototype”。

// 'Object.create(Object.prototype)' :
// 1. create and return empty object -> {}.
// 2. add to 'p1' property '__proto__', which is link to 'Object.prototype'
var p1 = Object.create(Object.prototype);

// 'Object.create(Object.prototype)' :
// 1. create and return empty object -> {}.
// 2. add to 'p2' property '__proto__', which is link to 'Object.prototype'
var p2 = Object.create(Object.prototype);

console.log(p1); // {}

console.log(p2); // {}

console.log(p1 === p2); // false

console.log(p1.prototype); // undefined

console.log(p2.prototype); // undefined

console.log(p1.__proto__ === Object.prototype); // true

console.log(p2.__proto__ === Object.prototype); // true

https://i.stack.imgur.com/glM5q.jpg

变体 4：'新的 SomeFunction()'

// 'this' in constructor-function 'Person'
// represents a new instace,
// that will be created by 'new Person(...)'
// and returned implicitly
function Person(name, lastName, age) {

    this.name = name;
    this.lastName = lastName;
    this.age = age;

    //-----------------------------------------------------------------
    // !--- only for demonstration ---
    // if add function 'getInfo' into
    // constructor-function 'Person',
    // then all instances will have a copy of the function 'getInfo'!
    //
    // this.getInfo: function getInfo() {
    //  return this.name + " " + this.lastName + ", " + this.age + "!";
    // }
    //-----------------------------------------------------------------
}

// 'Person.prototype' is an empty object
// (before add function 'getInfo')
console.log(Person.prototype); // Person {}

// With 'getInfo' added to 'Person.prototype',
// instances by their properties '__proto__',
// will have access to the function 'getInfo'.
// With this approach, instances not need
// a copy of the function 'getInfo' for every instance.
Person.prototype.getInfo = function getInfo() {
    return this.name + " " + this.lastName + ", " + this.age + "!";
}

// after function 'getInfo' is added to 'Person.prototype'
console.log(Person.prototype); // Person { getInfo: [Function: getInfo] }

// create instance 'p1'
var p1 = new Person('John', 'Doe', 25);

// create instance 'p2'
var p2 = new Person('Tom', 'Harrison', 38);

// Person { name: 'John', lastName: 'Doe', age: 25 }
console.log(p1);

// Person { name: 'Tom', lastName: 'Harrison', age: 38 }
console.log(p2);

// 'p1.__proto__' points to 'Person.prototype'
console.log(p1.__proto__); // Person { getInfo: [Function: getInfo] }

// 'p2.__proto__' points to 'Person.prototype'
console.log(p2.__proto__); // Person { getInfo: [Function: getInfo] }

console.log(p1.__proto__ === p2.__proto__); // true

// 'p1' and 'p2' points to different objects(instaces of 'Person')
console.log(p1 === p2); // false

// 'p1' by its property '__proto__' reaches 'Person.prototype.getInfo' 
// and use 'getInfo' with 'p1'-instance's data
console.log(p1.getInfo()); // John Doe, 25!

// 'p2' by its property '__proto__' reaches 'Person.prototype.getInfo' 
// and use 'getInfo' with 'p2'-instance's data
console.log(p2.getInfo()); // Tom Harrison, 38!

https://i.stack.imgur.com/y21Xj.jpg

---

Object.create 在内部这样做：

Object.create = function (o) {
    function F() {}
    F.prototype = o;
    return new F();
};

语法只是消除了 JavaScript 使用经典继承的错觉。

---

根据 this answer 和 this video new 关键字执行以下操作：

创建新对象。将新对象链接到构造函数（原型）。使该变量指向新对象。使用新对象执行构造函数并隐式执行 return this;将构造函数名称分配给新对象的属性构造函数。

Object.create 只执行 1st 和 2nd 步骤！！！

---

Object.create(Constructor.prototype) 是 new Constructor 的一部分

这是新的构造函数实现

// 1. define constructor function

      function myConstructor(name, age) {
        this.name = name;
        this.age = age;
      }
      myConstructor.prototype.greet = function(){
        console.log(this.name, this.age)
      };

// 2. new operator implementation

      let newOperatorWithConstructor = function(name, age) {
        const newInstance = new Object(); // empty object
        Object.setPrototypeOf(newInstance, myConstructor.prototype); // set prototype

        const bindedConstructor = myConstructor.bind(newInstance); // this binding
        bindedConstructor(name, age); // execute binded constructor function

        return newInstance; // return instance
      };

// 3. produce new instance

      const instance = new myConstructor("jun", 28);
      const instance2 = newOperatorWithConstructor("jun", 28);
      console.log(instance);
      console.log(instance2);
      

新的构造函数实现包含 Object.create 方法

      newOperatorWithConstructor = function(name, age) {
        const newInstance = Object.create(myConstructor.prototype); // empty object, prototype chaining

        const bindedConstructor = myConstructor.bind(newInstance); // this binding
        bindedConstructor(name, age); // execute binded constructor function

        return newInstance; // return instance
      };

      console.log(newOperatorWithConstructor("jun", 28));

---