化繁为简，理解JavaScript中prototype与proto的微妙关系

2023-12-26 14:42:04

在JavaScript的世界里，prototype和__proto__是两个经常让人混淆的概念。本文将以深入浅出的方式，通过示例和公式梳理这两个概念，帮助你轻松掌握JavaScript面向对象编程的基础。

首先，让我们从一个简单的实例开始：

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

// 实例化Person对象
const person = new Person('John', 30);

在这个例子中，Person是构造函数，它创建了person实例。instanceOf 操作符可以用来检查一个对象是否是某个构造函数的实例：

console.log(person instanceof Person); // 输出：true

JavaScript 中的每一个构造函数都有一个prototype属性，这个属性指向一个对象，称为构造函数的prototype对象。我们可以通过以下方式访问prototype对象：

console.log(Person.prototype); // 输出：{constructor: ƒ}

实例的__proto__属性指向构造函数的prototype对象。我们可以通过以下方式访问__proto__属性：

console.log(person.__proto__); // 输出：{constructor: ƒ}

构造函数是创建对象的模板。当我们使用 new 操作符调用构造函数时，就会创建一个新的对象，这个对象被称为构造函数的实例。实例继承了构造函数prototype对象上的所有属性和方法。

原型对象是一个特殊的对象，它包含了构造函数的所有属性和方法。当我们创建一个新的实例时，这个实例会自动继承prototype对象上的所有属性和方法。

原型链是一条从实例到prototype对象的路径。当我们访问实例的属性或方法时，JavaScript会首先在实例本身查找，如果找不到，就会沿着原型链向上查找，直到找到该属性或方法为止。

JavaScript 中的指针是指向另一个对象的引用。instanceOf 操作符可以用来检查一个对象是否是某个构造函数的实例，这实际上是检查对象的__proto__属性是否指向构造函数的prototype对象。

以下是几个有用的JS公式，可以帮助你深入理解prototype与__proto__之间的关系：

instance.__proto__ === Constructor.prototype：实例的__proto__属性指向构造函数的prototype对象。
instance instanceof Constructor：InstanceOf 操作符检查实例是否属于某个构造函数的实例。如果instances.__proto__指向 Constructor.prototype，则 instance 是 Constructor 的实例。
Constructor.prototype.isPrototypeOf(instance)：isPrototypeOf() 方法检查某个对象是否是另一个对象的prototype对象。如果 Constructor.prototype 是 instance 的prototype对象，则 Constructor.prototype.isPrototypeOf(instance) 为 true。