简单易懂，速学JavaScript原型链！

2023-11-15 05:37:43

JavaScript原型链是JavaScript中一个重要的概念，它用于实现继承。继承允许一个对象可以访问被继承的对象的属性和方法。在JavaScript中，继承有两种形式：

基于类的继承： 这种继承方式使用class来定义一个类，然后可以使用extends关键字来继承这个类。
基于原型的继承： 这种继承方式使用原型对象来实现继承。每个对象都有一个原型对象，原型对象包含了该对象的属性和方法。当一个对象访问一个不存在的属性或方法时，JavaScript引擎会自动沿着原型链向上查找，直到找到该属性或方法。

原型链是如何实现继承的？

为了理解原型链是如何实现继承的，我们先来看一个例子：

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

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

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

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

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

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

在这个例子中，Person函数是一个类，它定义了一个名为name的属性和一个名为sayHello的方法。Student函数也是一个类，它继承了Person类。Student类定义了一个名为major的属性。

当我们创建一个新的Student对象时，JavaScript引擎会自动创建一个新的对象，并将该对象的原型对象设置为Student.prototype。Student.prototype对象包含了Student类的属性和方法。

当student对象调用sayHello方法时，JavaScript引擎会沿着原型链向上查找，直到找到sayHello方法。在Student.prototype对象中找到了sayHello方法，因此JavaScript引擎会调用该方法。

在ES6中如何使用类来实现继承？

在ES6中，可以使用class关键字来定义一个类。类可以继承另一个类，使用extends关键字。例如：

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

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

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

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

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