彻底理解前端原型链

在JavaScript中，原型链（Prototype Chain）是一个核心概念，它定义了对象如何基于其原型继承和共享属性和方法。

一、基本概念

1. 对象：JavaScript中的对象是一组无序的键值对集合。对象可以通过字面量方式创建（{}），也可以通过构造函数创建。

2. 构造函数：是一种特殊的函数，主要用于创建对象。构造函数的函数名通常以大写字母开头，通过new关键字调用时，会执行一系列操作来初始化新对象。

3. prototype属性：每个函数都有一个prototype属性，它指向一个对象，这个对象默认拥有一个constructor属性，指向该函数本身。当通过new关键字创建一个实例时，这个实例会内部链接到一个原型对象，即其构造函数的prototype属性指向的对象。

4. __proto__属性：虽然__proto__不是一个官方标准属性，但它被广泛用来表示一个对象的原型。然而，在现代JavaScript开发中，建议使用Object.getPrototypeOf()来获取对象的原型。

二、原型链的形成

当通过new关键字调用构造函数创建一个新对象时，JavaScript会执行以下步骤：

1. 创建一个新对象。
2. 将这个新对象的内部[[Prototype]]（在ES5及以后，通常通过__proto__访问，但应使用Object.getPrototypeOf()）属性链接到构造函数的prototype对象。
3. 将构造函数的this指向这个新对象，并执行构造函数体内的代码。

例如：

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

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

const person1 = new Person("Alice");
person1.sayHello(); // 输出: Hello, Alice

在这个例子中，person1是Person构造函数的一个实例。person1的__proto__（或更准确地，通过Object.getPrototypeOf(person1)）指向Person.prototype，后者包含一个sayHello方法。因此，person1能够继承并调用sayHello方法。

三、原型链的作用

1. 实现继承：通过原型链，可以实现对象之间的继承，即子类可以继承父类的属性和方法。

2. 共享属性和方法：所有通过同一构造函数创建的对象都会共享构造函数的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.constructor = Dog; // 修复constructor指向

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

const dog1 = new Dog("Buddy");
dog1.eat(); // 继承自Animal的方法
dog1.bark(); // Dog特有的方法

在这个例子中，Dog通过Animal.call(this, name)继承了Animal的name属性，并通过设置Dog.prototype为Animal.prototype的一个新实例（使用Object.create），继承了Animal的eat方法。然后，Dog原型上添加了bark方法。这样，Dog的实例就可以访问到从Animal继承来的属性和方法，以及自己特有的方法。

五、总结

原型链是JavaScript中一个强大的特性，它允许对象通过原型来继承属性和方法。通过深入理解原型链的工作原理，我们能够编写出更加灵活和可扩展的JavaScript代码。在上面的代码演示中，我们展示了如何通过构造函数和原型链来实现继承和属性共享。