• 本文目录导读：
• 1、文章总结

在JavaScript中，每个对象都有一个原型（prototype）属性。这个属性指向了另一个对象，称为该对象的原型。当试图访问一个对象的某个属性时，如果这个对象本身没有这个属性，那么JavaScript就会去它的原型中找是否有这个属性，如果还是找不到就会去原型的原型中查找直到最顶层为止。而所有的这些关联起来形成了所谓的“原型链”。

那么什么是“原型”呢？我们可以将其理解为一种模板或者蓝图，在创建新实例时使用。在JavaScript中，“构造函数”就是用来创建特定类型对象实例的函数。

举例来说：

“`

function Person(name, age) {

this.name = name;

this.age = age;

}

Person.prototype.sayHello = function() {

console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);

const john = new Person(‘John’, 25);

john.sayHello(); // Hello, my name is John and I am 25 years old.

上面代码中，我们定义了一个名为`Person` 的构造函数，并给它添加了两个参数：`name` 和 `age` 。接着，在该构造函数的 `prototype` 属性上添加了一个方法 `sayHello()` ，用于输出人物信息。

现在我们使用 `new` 关键字创建出新实例 `john` ，并调用它的 `sayHello()` 方法。由于实例对象没有 `sayHello()` 方法，JavaScript就会去它的原型中找，也就是`Person.prototype` 对象中找到了该方法并执行。

那么“原型链”又是什么呢？我们可以将其理解为一条连接所有对象实例和它们构造函数的“链”。在JavaScript中，所有对象都有一个私有属性称为 `[[Prototype]]` （即我们常说的“隐式原型”），而这个属性所指向的值就是该对象实例对应的构造函数（或者说类） 的原型。如果需要访问一个对象上不存在的属性时，JavaScript 引擎会沿着这个 “链” 依次查找每个相关联对象上是否存在该属性。

举个栗子：

function Animal(name) {

Animal.prototype.eat = function() {

console.log(`${this.name} is eating.`);

function Dog(name) {

Dog.prototype.bark = function() {

console.log(`${this.name} is barking.`);

// 设置Dog.prototype 的隐式原型为 Animal.prototype

Dog.prototype.__proto__ = Animal.prototype;

const snoopy = new Dog(‘Snoopy’);

snoopy.bark(); // Snoopy is barking.

snoopy.eat(); // Snoopy is eating.

在上面代码中，首先定义了两个构造函数：`Animal` 和 `Dog` 。然后给它们分别添加了各自对应类型的方法。接着，我们将 `Dog` 的原型 `__proto__` 属性设置为 `Animal.prototype` ，这样就将两个构造函数连接起来了。

最后，我们创建了一个名为 `snoopy` 的新实例，并调用它的方法。由于实例对象本身没有该方法，JavaScript 引擎就会沿着“原型链”依次查找每个相关联对象上是否存在该方法。

那么原型和原型链有什么区别呢？简单来说：

– 原型是用于创建新实例的模板或者蓝图；

– 原型链是一条连接所有对象实例和它们构造函数的“链”。

总结：在JavaScript中，每个对象都有一个隐式原型指向其对应的构造函数（或者说类） 的 prototype 属性。而所有这些关联起来形成了所谓的“原型链”。通过使用原型和隐式链接，JavaScript 实现了基于面向对象编程（OOP）中继承机制。

文章总结

在本文中，我们对 JavaScript 中的 “原型” 和 “原型链” 进行了简单理解和介绍。

首先我们定义了一个名为 Person 的构造函数，并给它添加了两个参数：name 和 age 。接着，在该构造函数的 prototype 属性上添加了一个方法 sayHello() ，用于输出人物信息。现在我们使用 new 关键字创建出新实例 john ，并调用它的 sayHello() 方法。由于实例对象没有 sayHello() 方法，JavaScript就会去它的原型中找，也就是Person.prototype对象中找到了该方法并执行。

接着我们又通过一个栗子来介绍了“原型链”的概念。在这个栗子中，我们定义了两个构造函数：Animal 和 Dog 。然后给它们分别添加了各自对应类型的方法。接着，我们将 Dog 的原型 __proto__ 属性设置为 Animal.prototype ，这样就将两个构造函数连接起来了。

最后，我们总结出 “原型” 和 “原型链” 的区别： 原型是用于创建新实例的模板或者蓝图；而原型链则是一条连接所有对象实例和它们构造函数（或者说类）之间关系的“链”。

最后附上五个 TAGS: JavaScript、面向对象编程、OOP、prototype、prototype chain