前言

面向对象编程的一个重要方面是对象继承. 继承的对象拥有被继承对象的所有属性和方法, 这对复用代码是非常有用的.

大部分面向对象的编程语言都是通过类(class)来实现对象继承的. 在ES5中, JS继承是通过"原型对象"(prototype)实现模拟对象继承的.

在ES6中通过class语法(extends)来实现对象继承

常用的JS模拟对象继承的方式有以下几种.

1. 原型链继承

这种方式关键在于: 子类型的原型为父类型的一个实例对象

// 父类型
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.play = [1, 2, 3];
  this.setName = function() {};
}
Person.prototype.setAge = function() {}

// 子类型
function Student(price) {
  this.price = price;
  this.setScore = function(){}
}
// 子类型的原型为父类型的一个实例对象 
Student.prototype = new Person();

var s1 = new Student(15000);
var s2 = new Student(14000);
console.log(s1, s2);

image.png

但这种方式实现的本质是通过将子类的原型指向父类的实例, 所以子类的实例就可以通过proto访问到Student.prototype也就是Person的实例, 这样就可以访问到父类的私有方法, 然后通过proto指向父类的prototype就可以获得父类原型上的方法. 因此, 做到了将父类的私有, 公有和属性都当做子类的公有属性.

我们知道, 在操作基本数据类型的时候, 操作的是值, 在操作引用类型的数据时, 操作的是内存地址. 如果父类的私有属性中有引用类型的属性, 那它被子类继承的时候会作为公有属性, 这样子类一操作这个属性的时候, 也会影响到子类二.

image.png

s1中play属性发生变化时, s2中play属性也会跟着变化 .

另外需要注意的是, 我们需要在子类中添加新的方法或者是重写父类的方法的时候, 切记一定要放到替换原型的语句之后.

// 父类型
function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.setAge = function() {
  console.log('111');
}

// 子类型
function Student(price) {
  this.price = price;
  this.setScore = function(){}
}
// 子类型的原型为父类型的一个实例对象 
Student.prototype = new Person();
Student.prototype.sayHello = function() {};
var s1 = new Student(15000);
console.log(s1);

这种实现方式的特点:

• 父类新增原型方法/原型属性, 子类都能访问到
• 简单, 易于实现
  缺点:
• 无法实现多继承
• 来自原型对象的所有属性被所有实例共享
• 创建子类实例时, 无法向父类构建函数传参
• 要想为子类新增属性和方法, 必须要在Student.prototype = new Person()之后执行, 不能放到构造器中.

2. 借用构造函数继承

这种实现方式的关键在于: 在子类型构造函数中通过call()调用父类型构建函数

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.setName = function(){};
}
Person.prototype.setAge = function() {};

function Student(name, age, price) {
  /*
    相当于:
    this.Person(name, age)

    this.name = name;
    this.age = age;
  */
  Person.call(this, name, age); 
  this.price = price;
}
var s1 = new Student('Tom', 20, 14000);
console.log(s1);

image.png

这种方式只是实现部分继承, 如果父类的原型还有方法和属性, 子类是拿不到这些方法和属性的.

image.png

特点:

• 解决了原型继承中子类实例共享父类引用属性的问题
• 创建子类实例时, 可以向父类传递参数
• 可以实现多继承(call多个父类对象)
  缺点:
• 实例并不是父类的实例, 只是子类的实例
• 只能继承父类的实例属性和方法, 不能继承父类的原型属性和方法
• 无法实现函数复用, 每个子类都有父类实例函数的副本, 增加了内存的消耗, 影响性能

3, 原型链+借用构造函数的组合继承

这种方式关键在于: 通过调用父类构造函数, 继承父类的属性并保留传参的优点, 然后通过将父类实例作为子类原型, 实现函数复用.

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.setAge = function() {}
}
Person.prototype.setAge = function () {
  console.log("111");
}

function Student(name, age, price) {
  Person.call(this, name, age);
  this.price = price
  this.setScore = function () {};
}
Student.prototype = new Person()
// 组合继承需要修复构造函数的指向
Student.prototype.constructor = Student
Student.prototype.sayHello = function () {}

var s1 = new Student('tome', 20, 16);
var s2 = new Student('james', 20, 14);
console.log(s1);
console.log(s1.constructor); // Student

image.png

这种方式融合原型链继承和构造函数的优点, 是JavaScript中最常用的继承模式, 不过也有缺点: 无论在什么情况下, 都会调用两次构造函数, 一次是在创建子类型原型的时候, 另一次是在子类型构造函数的内部, 子类型最终会包含父类型对象的全部实例属性, 但我们不得不在调用子类构造函数时重写这些属性.
优点:

• 可以继承实例属性/方法, 可以继承原型属性/方法
• 不存在引用属性共享问题
• 要传参
• 函数可复用
  缺点:
• 调用了两次父类构造函数, 生成了两份实例

4. 组合继承优化一

这种方式通过父类原型和子类原型指向同一个对象, 子类可以继承到父类的公有方法当做自己的公有方法, 而且不会初始化两次实例方法/属属性, 避免了组合继承的缺点

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.setAge = function() {};
}
Person.prototype.setAge = function() {
  console.log('111');
};
function Student(name, age, price) {
  Person.call(this, name, age);
  this.price = price;
  this.setScore = function() {};
}
Student.prototype = Person.prototype;
Student.prototype.sayHello = function () {};
var s1 = new Student('tom', 20, 15);
console.log(s1);

image.png

但这种方法没办法辨别对象是子类还是父类的实例化.

image.png

优点:

• 不会初始化两次实例方法/属性, 避免了组合继承的缺点
  缺点:
• 没办法辨别是子类还是父类创造的, 子类和父类的构造函数指向的是同一个

5. 组合继承优化二

借助原型可以基于已有的对象来创建. 例如 :

var B = Object.create(A)

以A对象为原型, 生成了B对象, B继承了A的所有属性和方法.

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.setAge = function() {
  console.log('111');
};
function Student(name, age, price) {
  Person.call(this, name, age);
  this.price = price;
  this.setScore = function() {};
}
Student.prototype = Object.create(Person.prototype); // 核心代码 
Student.prototype.constructor = Student; // 核心代码 
var s1 = new Student('tom', 20, 16);
console.log(s1 instanceof Student, s1 instanceof Person); 
console.log(s1.constructor);
console.log(s1);

image.png

同样的, Student继承了所有的Person原型对象的属性和方法,这应该是最完美的继承方式了.

image.png

6. ES6中class的继承

ES6中引入了class关键字，class可以通过extends关键字实现继承，还可以通过static关键字定义类的静态方法,这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。

需要注意的是，class关键字只是原型的语法糖，JavaScript继承仍然是基于原型实现的。

// 父类
class Person {
  // 构造函数
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  // 定义一般的方法
  showName() {
    console.log('调用父类的方法');
    console.log(this.name, this.age);
  }
}
let p1 = new Person('james', 18);
console.log(p1);
p1.showName();

// 子类
class Student extends Person{
   constructor(name, age, salary) {
      // 通过super调用父类的构造函数
      super(name, age);
      this.salary = salary;
  }
 showName() {
    console.log("调用子类的方法");
    console.log(this.name, this.age, this.salary);
  }
}
let s1 = new Student('james', 18, 1000000000);
console.log(s1);
s1.showName();

image.png

优点:

• 语法简单易懂, 操作更方便
  缺点:
• 并不是所有的浏览器都支持class关键字