讲解 JS 原型与原型链

JavaScript 是一种基于原型的语言，它的原型和原型链是理解 JavaScript 的核心概念之一。在本文中，我们将深入探讨 JavaScript 中的原型和原型链。

一. 普通对象与函数对象

在 JavaScript 中，所有的对象都是由函数创建的，这些函数可以是普通函数，也可以是构造函数。普通函数创建的对象被称为普通对象，而构造函数创建的对象被称为函数对象。

普通对象和函数对象之间的区别在于，函数对象有一个特殊的属性，即 prototype 属性。这个属性是一个指向原型对象的指针。

二. 构造函数

构造函数是一种特殊的函数，它用于创建对象。在 JavaScript 中，构造函数的命名约定是使用大写字母开头的单词。

例如，我们可以创建一个名为 Person 的构造函数，用于创建人的对象：

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

在这个构造函数中，我们使用了 this 关键字来指代新创建的对象。我们可以使用 new 关键字来调用这个构造函数，从而创建一个新的对象：

var person1 = new Person('Alice', 25);
var person2 = new Person('Bob', 30);
 

在这个例子中，我们创建了两个不同的 Person 对象，分别是 person1 和 person2。

三. 原型对象

在 JavaScript 中，每个函数对象都有一个 prototype 属性，这个属性指向一个原型对象。原型对象是一个普通的对象，它包含了一些属性和方法，这些属性和方法可以被函数对象的实例继承。

我们可以通过给原型对象添加属性和方法来实现继承。例如，我们可以给 Person 函数的原型对象添加一个 sayHello 方法：

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};
 

现在，我们可以通过 person1 和 person2 对象来调用 sayHello 方法：

person1.sayHello(); // 输出 "Hello, my name is Alice"
person2.sayHello(); // 输出 "Hello, my name is Bob"
 

在这个例子中，我们给 Person 函数的原型对象添加了一个 sayHello 方法。当我们创建 person1 和 person2 对象时，它们会继承这个方法。

四. proto

在 JavaScript 中，每个对象都有一个 proto 属性，这个属性指向它的原型对象。例如，我们可以通过 person1.__proto__ 来访问 person1 对象的原型对象。

我们可以使用 proto 属性来访问原型对象的属性和方法。例如，我们可以使用 person1.__proto__.sayHello() 来调用原型对象的 sayHello 方法。

然而，不建议使用 proto 属性来访问原型对象，因为它不是标准的 JavaScript API。相反，我们应该使用 Object.getPrototypeOf() 方法来访问原型对象：

Object.getPrototypeOf(person1).sayHello();
 

这个方法会返回 person1 对象的原型对象，然后我们可以调用它的 sayHello 方法。

五. 构造器

在 JavaScript 中，每个函数对象都有一个 constructor 属性，这个属性指向它的构造函数。例如，Person.prototype.constructor 指向 Person 函数本身。

我们可以使用 constructor 属性来判断一个对象的构造函数。例如，我们可以使用 person1.constructor === Person 来判断 person1 对象是否是由 Person 函数创建的。

六. 原型链

在 JavaScript 中，每个对象都有一个原型对象，这个原型对象又有自己的原型对象，这样一直延续下去，形成了一个原型链。

当我们访问一个对象的属性或方法时，JavaScript 引擎会先在这个对象本身查找，如果没有找到，就会去它的原型对象中查找，如果还没有找到，就会去原型对象的原型对象中查找，以此类推，直到找到或者到达原型链的末端。

例如，当我们调用 person1.sayHello() 方法时，JavaScript 引擎会先在 person1 对象中查找，如果没有找到，就会去 Person.prototype 对象中查找，如果还没有找到，就会去 Object.prototype 对象中查找，最终找到了 sayHello 方法。

七. Prototype

在 JavaScript 中，每个对象都有一个 Prototype 属性，这个属性指向它的原型对象。例如，person1.Prototype 指向 Person.prototype 对象。

我们可以使用 Prototype 属性来访问原型对象的属性和方法。例如，person1.Prototype.sayHello() 可以调用原型对象的 sayHello 方法。

总结

在 JavaScript 中，原型和原型链是非常重要的概念。每个对象都有一个原型对象，它包含了一些属性和方法，这些属性和方法可以被对象的实例继承。原型对象又有自己的原型对象，这样一直延续下去，形成了一个原型链。当我们访问一个对象的属性或方法时，JavaScript 引擎会先在这个对象本身查找，如果没有找到，就会去它的原型对象中查找，以此类推，直到找到或者到达原型链的末端。