正文

JavaScript继承全解析：从原型链到类，一看就懂！

/0 浏览量
0415

JavaScript 作为一个函数式编程和面向对象编程的混合体，拥有独特的继承机制。无论是从原型链的古老方式到现代的类语法，理解 JavaScript 中的继承是掌握这门语言高级特性的关键。下面，我们就来一探究竟。

原型链：JavaScript 中的继承根基

在 JavaScript 中，每个对象都有一个原型（prototype）属性，该属性指向一个对象，这个对象是创建该对象实例时所使用的构造函数的原型对象。简单来说，就是每个对象通过原型链继承了一组属性和方法。

原型链的基本工作原理

  1. 当访问一个对象的属性时，如果该对象本身没有这个属性，那么会沿着原型链向上查找，直到找到该属性或到达原型链的尽头（Object.prototype）。

  2. 同样地，当调用一个对象的方法时，如果对象自身没有该方法，JavaScript 引擎会沿着原型链查找，直到找到该方法或到达原型链的尽头。

示例

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

Animal.prototype.sayName = function() {
  console.log(this.name);
};

let cat = new Animal('Kitty');
cat.sayName(); // Kitty

在这个例子中，cat 实例对象通过原型链继承自 Animal.prototype，因此能够访问 sayName 方法。

类：现代的继承方式

随着 ES6 的发布，JavaScript 引入了 class 关键字，为面向对象编程提供了更接近传统语言的写法。

类的基本用法

  1. 使用 class 关键字定义一个类。

  2. 在类中定义构造函数和方法。

  3. 通过 new 关键字创建类的实例。

示例

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

  sayName() {
    console.log(this.name);
  }
}

let dog = new Animal('Buddy');
dog.sayName(); // Buddy

在类语法中，我们定义了一个构造函数（constructor），它会在创建类实例时被调用。同时，我们也可以直接在类中定义方法。

类与原型链的关系

在 ES6 中，class 实际上是 prototype-based 继承的一个语法糖。当使用 class 时，JavaScript 引擎会自动创建一个原型对象，并将它赋给类的 prototype 属性。

示例

console.log(Animal.prototype === Animal.prototype); // true
console.log(Animal.prototype.constructor === Animal); // true

在上面的例子中，Animal.prototype 就是 Animal 类的原型对象。

继承的扩展：继承多个类

在 ES6 中，我们还可以使用 extends 关键字实现多重继承。

示例

class Mammal extends Animal {
  constructor(name) {
    super(name); // 调用父类构造函数
  }

  makeSound() {
    console.log('Moo!');
  }
}

let cow = new Mammal('MooCow');
cow.sayName(); // MooCow
cow.makeSound(); // Moo!

在这个例子中，Mammal 类继承自 Animal 类，并且能够访问 Animal 类的方法。同时，Mammal 类也定义了自己的方法 makeSound。

总结

JavaScript 的继承机制是语言中一个非常有趣且强大的特性。无论是使用原型链还是类语法，理解 JavaScript 中的继承对于编写高效、可维护的代码至关重要。通过本文的解析，希望您对 JavaScript 中的继承有了更深入的了解。

-- 展开阅读全文 --