javascript - Object.getPrototypeOf() 与 .prototype

Question

我正在学习一些 JS，我希望有人能用简单的术语向我解释 Object.getPrototypeOf() 与 .prototype 之间的区别

function ParentClass() {}

function ChildClass() {}

ChildClass.prototype = new ParentClass();

var mychild = new ChildClass();
var myparent = new ParentClass();


# .getPrototypeOf
Object.getPrototypeOf(ChildClass.prototype)   // ParentClass {}
Object.getPrototypeOf(mychild)                // ParentClass {}
Object.getPrototypeOf(ParentClass.prototype)  // {}
Object.getPrototypeOf(myparent)               // ParentClass {}

# .prototype
ParentClass.prototype                         // ParentClass {}
myparent.prototype                            // undefined
ChildClass.prototype                          // ParentClass {}
mychild.prototype                             // undefined

看起来你只能在构造函数上调用 .prototype ？

还有其他区别吗？

Answer 1

TL;DR

function MyConstructor() {}

var obj = new MyConstructor()

Object.getPrototypeOf(obj) === obj.prototype // false
Object.getPrototypeOf(obj) === MyConstructor.prototype // true

MyConstructor.prototype // MyConstructor {}
obj.prototype // undefined

MyConstructor.prototype.constructor === MyConstructor  // true
Object.getPrototypeOf(MyConstructor) === Function.prototype // true

<小时/>

关于 JavaScript 原型(prototype)的令人困惑的部分是，有两种不同的东西听起来非常相似。

当你创建一个新对象时，如果用于创建新对象的函数或对象有.prototype方法，那么.prototype引用的对象将成为新对象的原型(prototype) newObj.__proto__.

听起来很复杂......让我们进一步分解它。

A. .prototype 属性

示例 - 使用函数作为构造函数

当您在函数上使用 new 关键字(即，将该函数用作构造函数)时，该函数的 .prototype 将成为新的 obj.__proto__。

让我们首先创建一个函数并检查这个 .prototype 属性

function MyConstructor(){
}

console.log(MyConstructor.prototype)  // {}

等等... MyConstructor.prototype//{} - 是不是发生了什么神奇的事情？这个空对象 {} 从哪里来？

这里有两件事:

1. 每当您声明函数时，Javascript 都会自动创建一个 .prototype 对象 - 自动。

2. 该对象不为空。它实际上有一个属性指向创建该对象的函数(对象的“构造函数”)。我们来看看:

console.log(MyConstructor.prototype.constructor);//[函数:MyConstructor]

MyConstructor.prototype.constructor === MyConstructor//true

因此，对于函数来说，.prototype 属性及其关联对象是自动创建的。

还是很困惑吗？让我们在其中添加一些方法，以便更容易地了解发生了什么......

function MyConstructor(){
}

MyConstructor.prototype.func2 = function(){
};

console.log(MyConstructor);  // [Function: MyConstructor]
console.log(MyConstructor.prototype);  // MyConstructor { func2: [Function] }
MyConstructor.func2();  // TypeError: MyConstructor.func2 is not a function

从上面的代码中我们可以清楚地看到，MyConstructor 和 MyConstructor.prototype 是两个独立的实体。

B.对象的原型(prototype)

对象的原型(prototype)(不是 .prototype - 请参阅上面的 A.)是 javascript 用于查找和解析对象中尚不存在的方法的对象(稍后会详细介绍)。

继续上面的内容，当我们从具有 .prototype 属性的函数或对象创建对象时，新创建的对象将拥有引用此 .prototype 对象的 object.__proto__ 。

可以通过以下方式访问对象的原型(prototype)

Object.getPrototypeOf(obj)

或已弃用的

obj.__proto__

示例 - 使用函数作为构造函数

让我们使用函数 MyConstructor 作为构造函数来创建一个新对象。

function MyConstructor(){
}

var obj = new MyConstructor()

console.log(Object.getPrototypeOf(obj));  // {}

以下是三个相关的事情:

• MyConstructor(函数)
• obj(从 MyConstructor 创建的对象)
• obj.__proto__ --> MyConstructor.prototype

所以obj.__proto__是MyConstructor.prototype。证明如下:

MyConstructor.prototype === Object.getPrototypeOf(obj)  // true

让我们向 MyConstructor 添加一个方法

function MyConstructor(){
  this.func1 = function(){
    console.log("this is func1");
  };
}

var obj = new MyConstructor();

obj.func1();  // this is func1

从上面你可以看到，你可以调用构造函数中声明的方法。事实上，如果我们看一下，由于 javascript 创建对象的方式，我们声明的方法 func1 实际上是 obj 的一部分。

console.log(obj); // MyConstructor { func1: [Function] }

我们还可以通过将方法添加到原型(prototype)中来添加 obj 可以使用的方法。例如

MyConstructor.prototype.func2 = function(){
  console.log("this is func2");
};

obj.func2(); // this is func2

MyConstructor 和 MyConstructor.prototype 方法将可用于使用此设置使用 MyConstructor 创建的所有对象。

有用的引用资料

Definitive Guide to Object-Oriented JavaScript

Understanding JavaScript: Inheritance and the prototype chain

A Plain English Guide to JavaScript Prototypes