JavaScript 是一门广泛应用于网页开发、服务器开发等领域的脚本语言，其强大的灵活性和易用性得到了开发者的青睐。其中，原型链继承是 JavaScript 的核心特性之一，对于掌握 JavaScript 编程技能的开发者来说，理解和熟练应用原型链继承是必备的技能之一。本文将从 ECMAScript 2019 到 ES6，从基础概念到高级应用，详细介绍原型链继承的理论知识和实际应用。
原型链继承的基本概念
在 JavaScript 中，每个对象都有一个原型对象，通过原型对象可以实现对象之间的继承关系。JavaScript 对象之间的继承关系被称为原型链继承。原型链是由一系列对象组成的，每个对象都有一个链接到它的原型对象的指针。在访问对象的某个属性时，JavaScript 引擎会先查找对象本身是否有该属性，如果没有，则会查找对象原型是否有该属性，如果还没有，则继续查找对象原型的原型，直到找到该属性或到达原型链的顶端（也就是 Object.prototype）。
JavaScript 中的每个对象都有一个 proto 属性，指向该对象的原型。proto 属性是非标准的，实际上已经被 ECMAScript 2015 弃用。ES6 引入了新的语法，即 class 和 extends，使得 JavaScript 对象的继承更加简单和易于理解。下面将介绍如何在 ES6 中使用 class 和 extends 实现对象之间的原型链继承。
ES6 中的类和继承
ES6 引入了新的语法，即 class 和 extends，可以帮助我们更加轻松地实现对象之间的继承。在 ES6 中，可以通过 class 关键字来定义一个类，通过 extends 关键字来实现继承。
// javascriptcn.com 代码示例
class Animal {
constructor(name) {
this.name = name;
}
eat() {
console.log(this.name + ' is eating');
}
}
class Dog extends Animal {
constructor(name) {
super(name);
}
bark() {
console.log(this.name + ' is barking');
}
}
var dog = new Dog('Tom');
dog.eat(); // Tom is eating
dog.bark(); // Tom is barking在上面的例子中，Animal 是一个基类，Dog 继承了 Animal，并实现了 bark 方法。通过 super 关键字调用基类的构造函数，确保子类继承了基类的属性和方法。
原型链继承的实际应用
原型链继承在实际应用中非常广泛，常见的应用场景包括：
- 继承原生对象的方法和属性
// javascriptcn.com 代码示例
class MyArray extends Array {
constructor(...args) {
super(...args);
}
first() {
return this[0];
}
last() {
return this[this.length - 1];
}
}
var arr = new MyArray(1, 2, 3);
console.log(arr.length); // 3
console.log(arr.first()); // 1
console.log(arr.last()); // 3在上面的例子中，MyArray 继承了原生的 Array 对象，并添加了 first 和 last 方法，以便更方便地获取数组的第一个和最后一个元素。
- 复用已有的对象的方法和属性
// javascriptcn.com 代码示例
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' speaks');
}
}
class Cat extends Animal {
constructor(name) {
super(name);
}
}
var tom = new Cat('Tom');
tom.speak(); // Tom speaks在上面的例子中，Cat 继承了 Animal 的 speak 方法，以便更方便地实现猫叫的功能。
- 重写已有对象的方法
// javascriptcn.com 代码示例
class Square {
constructor(length) {
this.length = length;
}
area() {
return this.length * this.length;
}
}
class Cube extends Square {
constructor(length) {
super(length);
}
area() {
return super.area() * 6;
}
volume() {
return this.length * this.length * this.length;
}
}
var cube = new Cube(2);
console.log(cube.area()); // 24
console.log(cube.volume()); // 8在上面的例子中，Cube 继承了 Square 的 area 方法，并重写了该方法，以便更方便地计算一个立方体的表面积。
总结
本文从基础概念到实际应用，详细介绍了 JavaScript 的原型链继承，并且通过示例代码介绍了如何在 ES6 中使用 class 和 extends 实现对象之间的继承。相信经过学习，大家已经掌握了原型链继承的基本知识和高级应用，相信在实际的开发中也能够更加熟练地应用该技术。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/651d5b0b95b1f8cacd4eb015