三分钟快速理解什么是 JavaScript 的继承

其实JavaScript中的继承，就是指的是一种机制，它允许一个对象（子对象）获取另一个对象（父对象）的属性和方法。这样的话子对象可以重用父对象的代码，同时还可以添加自己的特定功能。

JavaScript是使用原型继承的方式来实现对象之间的继承关系。

首先你肯定得知道一些基本概念：

对象：在JavaScript中，几乎所有的东西都是对象，包括数组、函数和日期等。每个对象都有属性和方法。
构造函数：构造函数是用于创建对象的特殊函数。它们通常以大写字母开头，用于创建具有相似属性和方法的对象。
原型：每个JavaScript对象都有一个原型（prototype）。原型是一个对象，它包含该对象共享的属性和方法。当我们访问对象的属性或方法时，JavaScript引擎会首先在对象本身中查找，如果找不到，就会去原型中查找。

举个简单的例子希望你能更好地理解JavaScript中的继承机制：

// 定义一个构造函数
function Animal(name) {
  this.name = name;
}

// 在原型上定义一个方法
Animal.prototype.sayName = function() {
  console.log("My name is " + this.name);
};

// 创建一个Animal对象
var animal = new Animal("Tom");
animal.sayName(); // 输出: My name is Tom

上面的例子，我们定义了一个名为Animal的构造函数。通过使用new Animal("Tom")创建了一个Animal对象，这个对象有一个名为name的属性和一个名为sayName的方法。我们将sayName方法添加到Animal.prototype中，以便所有通过Animal构造函数创建的对象都可以访问它。

再说一下继承的概念，在JavaScript里面，我们可以使用prototype来实现继承关系。

// 定义一个子构造函数
function Dog(name, breed) {
  Animal.call(this, name); // 调用父构造函数
  this.breed = breed;
}

// 创建一个原型链
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// 在子构造函数上定义一个方法
Dog.prototype.bark = function() {
  console.log("Woof!");
};

// 创建一个Dog对象
var dog = new Dog("Max", "Labrador");
dog.sayName(); // 输出: My name is Max
dog.bark(); // 输出: Woof!

这个例子，我们定义了一个名为Dog的子构造函数。我们使用call方法在子构造函数中调用了父构造函数Animal，以确保子对象也具有name属性。然后，我们使用Object.create方法将Animal.prototype作为Dog.prototype的原型，从而建立了原型链。这意味着Dog.prototype继承了Animal.prototype的属性和方法。

接着，我们将Dog.prototype.constructor设置为Dog，以确保构造函数引用正确。这是因为在创建原型链时，Dog.prototype.constructor会被设置为Animal，我们需要将它恢复为Dog。

最后，我们在子构造函数Dog.prototype上定义了一个新的方法bark，这个方法是子对象特有的。

现在我们可以创建一个Dog对象dog，调用继承自Animal的sayName方法以及Dog自身定义的bark方法。

通过原型链的方式，Dog对象继承了Animal对象的属性和方法，还可以添加自己特定的功能。

需要注意的是，原型继承是基于对象的。这意味着当我们修改原型对象时，所有继承自该原型的对象也会受到影响。

除了原型继承，ES6（ECMAScript 2015）也引入了类和继承的概念，让JavaScript中的继承更加易于理解和使用。

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

  sayName() {
    console.log("My name is " + this.name);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log("Woof!");
  }
}

var dog = new Dog("Max", "Labrador");
dog.sayName(); // 输出: My name is Max
dog.bark(); // 输出: Woof!

ES6中引入的class关键字简化了类的定义和继承。在上面的例子中，我们定义了Animal类和Dog类，通过extends关键字实现了继承关系。super关键字用于调用父类的构造函数。

JavaScript的继承机制使用原型链来实现对象之间的继承关系。通过继承，子对象可以获取父对象的属性和方法，并且可以添加自己的特定功能。原型继承是基于对象的，通过修改原型对象，所有继承自该原型的对象都会受到影响。ES6中引入的类和继承语法使得JavaScript中的继承更加易于理解和使用。

黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程

三分钟快速理解什么是 JavaScript 的继承

猜你喜欢