让你彻底搞懂 JavaScript 原型链的图文攻略

透析JavaScript中的原型链：图文解析

什么是原型链？

在 JavaScript 中，每一个函数都有一个名为 prototype 的属性，这个属性指向该函数的原型对象。而原型对象又拥有自己的 prototype 属性，指向它的原型对象，如此递归下去，就形成了原型链。

原型链有什么用？

原型链的作用在于，它允许你为对象添加新属性和方法，而无需修改对象的构造函数。这使得 JavaScript 具有面向对象编程的特性。

如何理解原型链？

为了理解原型链，我们先从一个例子入手。假设我们有一个 Person 构造函数，它用来创建 person 对象。

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

现在，我们创建一个 person 对象：

const person = new Person('John');

我们可以使用点运算符访问 person 对象的 name 属性：

console.log(person.name); // 输出：'John'

但是，如果我们尝试访问 person 对象的另一个属性，比如 age，就会得到 undefined：

console.log(person.age); // 输出：undefined

这是因为 Person 构造函数中没有定义 age 属性。然而，我们可以使用原型链来给 person 对象添加 age 属性：

Person.prototype.age = 30;

现在，我们再访问 person 对象的 age 属性：

console.log(person.age); // 输出：30

可以看到，原型链使我们能够给对象添加新属性和方法，而无需修改对象的构造函数。

轻松利用原型链进行面向对象编程

理解了原型链之后，我们就可以利用它进行面向对象编程。

面向对象编程是一种编程范式，它将程序组织成由一个个对象组成的结构。每个对象都有自己的属性和方法，这些属性和方法可以被其他对象使用。

在 JavaScript 中，面向对象编程可以通过原型链来实现。

创建对象

我们可以使用构造函数来创建对象。构造函数是一个特殊的函数，它用来创建新对象。

例如，我们可以使用 Person 构造函数来创建 person 对象：

const person = new Person('John');

访问对象的属性和方法

我们可以使用点运算符来访问对象的属性和方法。

例如，我们可以使用点运算符来访问 person 对象的 name 属性：

console.log(person.name); // 输出：'John'

我们也可以使用点运算符来调用 person 对象的 greet 方法：

person.greet(); // 输出：'Hello, my name is John.'

修改对象的属性和方法

我们可以使用点运算符来修改对象的属性和方法。

例如，我们可以使用点运算符来修改 person 对象的 name 属性：

person.name = 'Bob';

我们也可以使用点运算符来修改 person 对象的 greet 方法：

person.greet = function() {
  console.log('Hello, my name is Bob.');
};

继承

在 JavaScript 中，我们可以使用原型链来实现继承。

继承是指一个对象从另一个对象那里获取属性和方法的能力。

例如，我们可以创建一个 Student 构造函数，它从 Person 构造函数继承属性和方法：

function Student(name, major) {
  Person.call(this, name);
  this.major = major;
}

现在，我们可以创建一个 student 对象：

const student = new Student('John', 'Computer Science');

student 对象继承了 Person 构造函数的属性和方法，因此它可以访问 Person 构造函数的属性和方法，比如 name 属性和 greet 方法。

console.log(student.name); // 输出：'John'
student.greet(); // 输出：'Hello, my name is John.'

student 对象还拥有自己的属性和方法，比如 major 属性：

console.log(student.major); // 输出：'Computer Science'

结语

通过这篇文章，我们已经对 JavaScript 中的原型链有了深入的了解。原型链是一个非常重要的概念，它可以帮助我们理解面向对象编程在 JavaScript 中的实现。

希望这篇文章能够帮助你对 JavaScript 原型链有一个更清晰的认识。