从不同视角深入理解JavaScript继承

2023-09-20 11:19:17

当我们谈论JavaScript的继承时，可能会听到许多术语，例如原型链、构造函数、类、ES6继承等。这些术语都指向了JavaScript继承的某个方面，但这些术语之间又是如何关联的呢？让我们从一个不同的角度来深入理解JavaScript继承，并提供清晰的示例代码，以便您轻松掌握这些抽象的概念。

1. 原型链：JavaScript继承的基础

原型链是JavaScript继承的基础。每个对象都有一个原型对象，原型对象又可能拥有自己的原型对象，如此层层向上，直到遇到一个没有原型对象的原型对象，即Object.prototype。

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.prototype是Person函数的原型对象，而person对象是Person函数的实例。当我们调用person.sayHello()方法时，JavaScript首先会在person对象中寻找该方法，如果没有找到，就会沿着原型链向上查找，直到找到该方法。

2. 构造函数：创建对象并初始化属性

构造函数用于创建对象并初始化对象的属性。当我们使用new运算符调用构造函数时，就会创建一个新的对象，并使用构造函数中的参数来初始化该对象的属性。

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

const person = new Person('John');

console.log(person.name); // John

在上面的示例中，当我们调用new Person('John')时，就会创建一个新的Person对象，并将name属性初始化为John。

3. 类：一种语法糖

在ES6中，我们可以使用class来定义类。类本质上就是一种语法糖，它本质上仍然是构造函数。

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

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

const person = new Person('John');
person.sayHello(); // Hello, my name is John.

上面的示例与使用构造函数创建对象是等价的。

4. 继承链：从父类继承属性和方法

继承链是指从父类继承属性和方法的机制。在JavaScript中，我们可以使用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;
  }

  study() {
    console.log(`I'm studying ${this.major}.`);
  }
}

const student = new Student('John', 'Computer Science');
student.sayHello(); // Hello, my name is John.
student.study(); // I'm studying Computer Science.

在上面的示例中，Student类继承了Person类，因此Student类可以继承Person类的属性和方法。

5. 多态：根据对象的类型调用不同的方法

多态是指根据对象的类型调用不同的方法的机制。在JavaScript中，我们可以使用重写和重载来实现多态。

重写是指在子类中重新定义父类的方法。

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

class Student extends Person {
  sayHello() {
    super.sayHello();
    console.log(`I'm a student.`);
  }
}

const person = new Person('John');
person.sayHello(); // Hello, my name is John.

const student = new Student('John');
student.sayHello(); // Hello, my name is John.
// I'm a student.

在上面的示例中，Student类重写了Person类的sayHello()方法，因此当我们调用student.sayHello()时，就会调用Student类中的sayHello()方法。

重载是指在同一个类中定义多个同名但参数不同的方法。

class Person {
  sayHello(name) {
    console.log(`Hello, ${name}.`);
  }

  sayHello() {
    console.log('Hello, world.');
  }
}

const person = new Person();
person.sayHello(); // Hello, world.
person.sayHello('John'); // Hello, John.