从入门到精通：JavaScript 继承揭秘

前端

2023-10-25 23:54:56

JavaScript 继承指南：解锁对象的可重用性和扩展性

踏上 JavaScript 继承之旅

欢迎来到 JavaScript 继承的世界，这是一个令人着迷的领域，可以释放代码的强大可重用性和扩展性。准备好在对象之间建立联系，让它们共享属性和行为吧！

揭秘 JavaScript 继承机制

JavaScript 通过构造函数和原型来实现继承。构造函数负责创建对象，而原型充当共享属性和方法的蓝图。

构造函数：对象的骨架

当我们创建对象时，JavaScript 会自动创建一个与之关联的原型对象。这个原型包含了该特定类型对象的共性。

原型：共享特性的宝库

原型对象就像一个宝库，存储着对象共享的属性和方法。我们可以通过 __proto__ 属性访问原型：

const cat = new Cat('Whiskers');
console.log(cat.__proto__); // {name: 'Whiskers'}

原型继承：建立对象之间的联系

JavaScript 采用原型继承，这意味着一个对象可以继承另一个对象的原型特性。我们可以通过将一个对象的原型对象赋值给另一个对象的 __proto__ 属性来实现：

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

Animal.prototype.speak = function() {
  console.log(`My name is ${this.name}`);
};

const cat = new Cat('Whiskers');
Cat.prototype = Animal.prototype;

cat.speak(); // My name is Whiskers

在这里，Cat 继承了 Animal 的 speak 方法。

ES6 class 继承：简洁的继承语法

ES6 引入了 class，为 JavaScript 继承提供了一种更现代、更简洁的语法：

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

  speak() {
    console.log(`My name is ${this.name}`);
  }
}

class Cat extends Animal {
  constructor(name) {
    super(name); // Calls the parent class constructor
  }
}

const cat = new Cat('Whiskers');
cat.speak(); // My name is Whiskers