ES6原型链是什么及怎么实现

1. 什么是原型链

在JavaScript中，每个对象都有一个原型（prototype），原型也是一个对象。当我们访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript引擎会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的顶端（null）。

这种通过原型链查找属性和方法的机制就是JavaScript中的继承机制。ES6引入了class语法糖，使得面向对象编程更加直观，但其底层仍然是基于原型链的。

2. 原型链的基本概念

2.1 原型对象

每个JavaScript对象（除了null）都有一个原型对象（__proto__），这个原型对象指向创建该对象的构造函数的prototype属性。

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

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

const person = new Person('Alice');
person.sayHello(); // 输出: Hello, my name is Alice

在上面的例子中，Person.prototype是person对象的原型对象。person对象通过__proto__属性指向Person.prototype。

2.2 原型链的形成

当我们访问一个对象的属性或方法时，JavaScript引擎会首先在该对象自身查找，如果找不到，就会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的顶端（null）。

console.log(person.__proto__ === Person.prototype); // 输出: true
console.log(Person.prototype.__proto__ === Object.prototype); // 输出: true
console.log(Object.prototype.__proto__ === null); // 输出: true

在上面的例子中，person对象的原型链如下：

person -> Person.prototype -> Object.prototype -> null

2.3 原型链的继承

通过原型链，我们可以实现对象之间的继承。子类的原型对象指向父类的实例，从而实现属性和方法的继承。

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

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

Student.prototype.sayGrade = function() {
    console.log(`I am in grade ${this.grade}`);
};

const student = new Student('Bob', 5);
student.sayHello(); // 输出: Hello, my name is Bob
student.sayGrade(); // 输出: I am in grade 5

在上面的例子中，Student类继承了Person类的属性和方法。Student.prototype指向Person.prototype，从而形成了原型链。

3. ES6中的原型链实现

ES6引入了class语法糖，使得面向对象编程更加直观。class语法糖底层仍然是基于原型链的。

3.1 class语法糖

class Person {
    constructor(name) {
        this.name = name;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

class Student extends Person {
    constructor(name, grade) {
        super(name);
        this.grade = grade;
    }

    sayGrade() {
        console.log(`I am in grade ${this.grade}`);
    }
}

const student = new Student('Bob', 5);
student.sayHello(); // 输出: Hello, my name is Bob
student.sayGrade(); // 输出: I am in grade 5

在上面的例子中，Student类通过extends关键字继承了Person类。super关键字用于调用父类的构造函数。

3.2 class语法糖的底层实现

class语法糖底层仍然是基于原型链的。extends关键字实际上是将子类的原型对象指向父类的实例。

console.log(Student.prototype.__proto__ === Person.prototype); // 输出: true
console.log(Person.prototype.__proto__ === Object.prototype); // 输出: true
console.log(Object.prototype.__proto__ === null); // 输出: true

在上面的例子中，Student类的原型链如下：

Student.prototype -> Person.prototype -> Object.prototype -> null

3.3 super关键字的实现

super关键字用于调用父类的构造函数或方法。在ES6中，super关键字的实现依赖于原型链。

class Person {
    constructor(name) {
        this.name = name;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

class Student extends Person {
    constructor(name, grade) {
        super(name); // 调用父类的构造函数
        this.grade = grade;
    }

    sayHello() {
        super.sayHello(); // 调用父类的方法
        console.log(`I am in grade ${this.grade}`);
    }
}

const student = new Student('Bob', 5);
student.sayHello(); // 输出: Hello, my name is Bob\nI am in grade 5

在上面的例子中，super(name)调用了父类Person的构造函数，super.sayHello()调用了父类Person的sayHello方法。

4. 总结

原型链是JavaScript中实现继承的核心机制。通过原型链，对象可以继承另一个对象的属性和方法。ES6引入了class语法糖，使得面向对象编程更加直观，但其底层仍然是基于原型链的。

理解原型链对于掌握JavaScript的面向对象编程至关重要。通过原型链，我们可以实现复杂的继承关系，构建出更加灵活和可维护的代码结构。