《javascript设计模式》学习笔记二：Javascript面向对象程序设计继承用法分析

2023年5月27日上午6:25 • JavaScript

《javascript设计模式》学习笔记二：Javascript面向对象程序设计继承用法分析

一、前言

在Javascript中，对象继承有着重要的作用。深入学习Javascript的面向对象的程序设计，掌握继承用法，对于编写复杂的Javascript程序非常有用，本文将介绍Javascript中常用的继承方法和技巧。

二、原型链继承

原型链继承是Javascript中实现继承的一种方式，它通过原型继承来实现子类继承父类的属性和方法。

示例：

// 父类
function Animal(name) {
  this.name = name || 'Animal';
  this.sleep = function(){
    console.log(this.name + ' is sleeping.');
  }
}

// 子类
function Cat(){}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

// 测试代码
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());

在上面的例子中，Animal是一个父类，它的构造函数中包含了一个对象属性name和一个方法sleep。Cat是一个子类，它通过原型链继承了Animal类的属性和方法。

其中，通过Cat.prototype = new Animal()实现了原型链继承，将Cat的原型指向了Animal的实例，这样Cat就能够访问到Animal里面的属性和方法。

三、借用构造函数继承

借用构造函数继承是一种使用父类构造函数为子类实例化的方式，相比原型链继承来说更具有灵活性和可控性。

示例：

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

Animal.prototype.sleep = function(){
  console.log(this.name + ' is sleeping.');
}

function Cat(name) {
  Animal.call(this, name);
}

// 测试代码
var cat = new Cat('cat');
console.log(cat.name);
console.log(cat.sleep());

在上面的例子中，Cat类在实例化的时候调用了Animal类的构造函数，将Animal的属性和方法复制到了Cat的实例中，达到了继承的效果。这种方法可以通过传递参数来为子类实例化赋值，更加灵活，同时避免了共享原型带来的问题。

四、组合继承

组合继承是原型链继承和借用构造函数继承的结合，同时利用了原型链和借用构造函数的优点，是Javascript中最常用的继承方式之一。

示例：

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

Animal.prototype.sleep = function(){
  console.log(this.name + ' is sleeping.');
}

function Cat(name) {
  Animal.call(this, name);
}

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

// 测试代码
var cat = new Cat('cat');
console.log(cat.name);
console.log(cat.sleep());

在上面的例子中，Cat通过借用构造函数继承了Animal的属性和方法，同时通过原型链继承Animal类的原型，达到了共享方法的目的。其中Cat.prototype.constructor = Cat;的目的是将Cat的原型对象的constructor重新指向Cat，防止在调用instanceof操作符时出现误判。

五、ES6中的继承用法

在ES6中提供了class关键字，可以更加简洁地实现类的定义和继承。

示例：

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

  sleep() {
    console.log(this.name + ' is sleeping.');
  }
}

class Cat extends Animal {
  constructor(name) {
    super(name);
  }
}

// 测试代码
const cat = new Cat('cat');
console.log(cat.name);
console.log(cat.sleep());

在上面的例子中，Animal类使用了class定义，ES6中新增的关键字constructor表示类的构造函数，方法可以直接定义在类的原型对象上。

Cat类使用关键字extends继承了Animal类，使用super关键字可以调用父类的构造函数。可以看到，ES6中继承的实现更加简单和易于理解。