不要再说不懂原型链了——深入浅出Prototype

2023-09-08 13:14:06

原型链是 JavaScript 中一个重要的概念，也是大家经常遇到的一个难点。理解原型链需要一定的 JavaScript 基础，但只要掌握了基本原理，你就会发现它其实并不复杂。

那么，什么是原型链呢？

原型链（Prototype Chain）是 JavaScript 语言中一个独特的机制，它允许对象继承其他对象的属性和方法。

每个对象都有一个内部属性叫做 __proto__，它指向该对象的原型对象。而原型对象也有自己的 __proto__ 属性，指向它的原型对象，依此类推，形成一条链式结构，这就是原型链。

比如，我们有一个 Person 对象，它的原型对象是 Object.prototype。那么，Person.prototype 的 __proto__ 就是 Object.prototype。而 Object.prototype 的 __proto__ 是 null，因为它是原型链的根对象。

我们来看一个简单的例子：

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

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}!`);
};

const person = new Person('John');

person.sayHello(); // Hello, my name is John!

在这个例子中，Person 函数是一个构造函数，它用来创建 Person 对象。Person.prototype 是 Person 构造函数的原型对象，它包含了一些公共属性和方法，比如 sayHello 方法。

当我们使用 new 操作符创建 person 对象时，JavaScript 会自动将 Person.prototype 作为 person 对象的原型对象。因此，person 对象就可以继承 Person.prototype 中的属性和方法。

这就是原型链的基本原理。

我们来看一个更复杂的例子：

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

Animal.prototype.eat = function() {
  console.log(`${this.name} is eating.`);
};

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);

Dog.prototype.bark = function() {
  console.log(`${this.name} is barking.`);
};

const dog = new Dog('Buddy');

dog.eat(); // Buddy is eating.
dog.bark(); // Buddy is barking.