理解JavaScript中的原型链、proto、constructor和prototype

2023-10-12 18:06:55

引言

在JavaScript的广阔世界中，原型链、proto、constructor和prototype扮演着至关重要的角色，共同构成了JavaScript面向对象编程的基石。对于初学者而言，这些概念往往令人困惑，但通过深入理解它们之间的关系，开发者可以充分利用JavaScript的强大功能。

原型链

原型链是一个连接对象及其原型对象的链表结构。每个对象都有一个内部属性__proto__，它指向其原型对象。原型对象本身也可以有一个__proto__属性，指向其自己的原型对象，依此类推。这种链式结构允许对象访问和继承其原型对象中的属性和方法。

proto

__proto__属性是对象的内部属性，指向其原型对象。它本质上是原型链的指针，可以通过以下方式访问：

const obj = {};
console.log(obj.__proto__); // 输出：Object.prototype

constructor

constructor属性指向创建对象的构造函数。它表示对象的类型或所属的类。可以通过以下方式访问：

const obj = new Object();
console.log(obj.constructor); // 输出：Function: Object

prototype

prototype属性是构造函数的内部属性，它指向一个对象。这个对象包含了该构造函数创建的所有对象的共有属性和方法。可以通过以下方式访问：

const Obj = function() {};
console.log(Obj.prototype); // 输出：{}

关系

这四个概念之间的关系如下图所示：

                          +--------------+
                          | Constructor  |
                          +--------------+
                                |
                                 \
                    +--------------+  +--------------+
                    |     Object   |  |    Prototype  |
                    +--------------+  +--------------+
                                  |
                                   \
                                    +--------------+
                                    |      Object    |
                                    +--------------+
                                         |
                                         |
                                         |
                                         +--------------+
                                         |    Instance   |
                                         +--------------+

构造函数创建对象。
prototype属性指向一个对象，该对象包含了该构造函数创建的所有对象的共有属性和方法。
__proto__属性指向对象的原型对象。
原型链是一个连接对象及其原型对象的链表结构。

示例

让我们通过一个示例来理解这些概念：

function Person(name) {
  this.name = name;
}

const person = new Person("John");

console.log(person.__proto__); // 输出：Person.prototype
console.log(Person.prototype.__proto__); // 输出：Object.prototype

在这个示例中：

Person是构造函数。
Person.prototype是Person构造函数的prototype属性。它包含了所有Person对象共有name属性。
person.__proto__指向Person.prototype，表明person对象继承了Person.prototype中的name属性。