javascript - Object.getPrototypeOf(classInstance) 返回 Object {}

Question

我有这个原型(prototype)继承链:

function Class1() {};
Class1.prototype.name = 'Main Class';

function Class2() {};
Class2.prototype = Object.create(Class1.prototype);
Class2.prototype.constructor = Class2;

function Class3() {};
Class3.prototype = Object.create(Class1.prototype);
// Note missing reassignment of constructor for Class3

var class2Ins = new Class2();
var class3Ins = new Class3();

console.log(Object.getPrototypeOf(class2Ins)); // Class2 { ... }
console.log(Object.getPrototypeOf(class3Ins)); // Object { ... }

我很困惑，为什么 Object.getPrototypeOf(class3Ins) 是一个对象，尽管它的原型(prototype)是 Class3。

Answer 1

我认为你有点不清楚原型(prototype)委托(delegate)在 JS 中是如何工作的。

首先，当我在浏览器中运行您的代码时，我得到以下输出:

Object { constructor: Class2() } 
Object {  }

您可能想检查输出是否相同或不同。

<小时/>

现在，概念。

When a function is created, the JS engine creates an anonymous object and binds the 2 as follows:

function foo(){} // user created a function

/* The JS engine binds an anonymous object */
// foo.prototype = {};
// foo.prototype.constructor = foo;

另外，

When an object is created by a constructor function using new,
the [[Prototype]] (or .__proto__) of the created object is
set to the anonymous object referenced (pointed to) by the function.prototype

和

The Object.create() method creates a new object with the specified prototype object and properties.

<小时/>

好吧，这一切意味着什么？

让我们将您的代码分解为多个 block ，就像我们是引擎一样。

function Class1() {};
/*
  bind anonymous object:

  Class1.prototype = {};
  Class1.prototype.constructor = Class1;
*/
Class1.prototype.name = 'Main Class';


function Class2() {};
/*
  bind anonymous object:

  Class2.prototype = {};
  Class2.prototype.constructor = Class2;
*/
Class2.prototype = Object.create(Class1.prototype);
/*
  create new object with prototype as the specified object:

  Class2.prototype = {};
  Object.setPrototypeOf(Class2.prototype, Class1.prototype);
*/
Class2.prototype.constructor = Class2;


function Class3() {};
/*
  bind anonymous object:

  Class3.prototype = {};
  Class3.prototype.constructor = Class3;
*/
Class3.prototype = Object.create(Class1.prototype);
/*
  create new object with prototype as the specified object:

  Class3.prototype = {};
  Object.setPrototypeOf(Class3.prototype, Class1.prototype);
*/
// Note missing reassignment of constructor for Class3


var class2Ins = new Class2();
/*
  set [[Prototype]] of the created object to object referenced by the function.prototype:

  Object.setPrototypeOf(class2Ins, class2.prototype);
*/
var class3Ins = new Class3();
/*
  set [[Prototype]] of the created object to object referenced by the function.prototype:

  Object.setPrototypeOf(class3Ins, class3.prototype);
*/

最终结果是什么？

1. Object.getPrototypeOf(class3Ins)(简单来说，class2Ins.__proto__)与Class2.prototype相同
2. Class2.prototype 是由 Object.create(Class1.prototype) 创建的对象。
3. Class2.prototype.__proto__ 与 Class1.prototype 相同。

1. class3Ins.__proto__ 与 Class3.prototype
相同
2. Class3.prototype 是由 Object.create(Class1.prototype) 创建的对象。
3. Class3.prototype.__proto__ 与 Class1.prototype 相同。

Object.getPrototypeOf(class3Ins) 之所以为空，是因为 Object.create 创建了一个空对象。

<小时/>

如果您还有困惑，请访问:http://www.javascripttutorial.net/javascript-prototype/

这是理解 JS 原型(prototype)概念的绝佳资源。