关于javascript:JavaScript常见的六种继承方式

前言

面向对象编程很重要的一个方面，就是对象的继承。A 对象通过继承 B 对象，就能间接领有 B 对象的所有属性和办法。这对于代码的复用是十分有用的。

大部分面向对象的编程语言，都是通过“类”（class）实现对象的继承。传统上，JavaScript 语言的继承不通过 class(ES6 引入了 class 语法)，而是通过“原型对象”（prototype）实现。那么在 JS 中常见的继承形式有几种呢？

如需本文源码，请猛戳 常见的六种继承形式

形式一、原型链继承

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

// 父类型
 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) 

​
但这种形式实现的实质是通过将子类的原型指向了父类的实例，所以 子类的实例就能够通过__proto__拜访到 Student.prototype 也就是 Person 的实例，这样就能够拜访到父类的公有办法，而后再通过__proto__指向父类的 prototype 就能够取得到父类原型上的办法。于是做到了将父类的公有、私有办法和属性都当做子类的私有属性

子类继承父类的属性和办法是将父类的公有属性和私有办法都作为本人的私有属性和办法，咱们都晓得在操作根本数据类型的时候操作的是值，在操作援用数据类型的时候操作的是地址，如果说父类的公有属性中有援用类型的属性，那它被子类继承的时候会作为私有属性，这样子类 1 操作这个属性的时候，就会影响到子类 2。

s1.play.push(4)
console.log(s1.play, s2.play)
console.log(s1.__proto__ === s2.__proto__)//true
console.log(s1.__proto__.__proto__ === s2.__proto__.__proto__)//true 

​
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.sayHello = function () {}// 在这里写子类的原型办法和属性是有效的，// 因为会扭转原型的指向，所以应该放到从新指定之后
Student.prototype = new Person()
Student.prototype.sayHello = function () {}
var s1 = new Student(15000)
console.log(s1) 

特点：

• 父类新增原型办法 / 原型属性，子类都能拜访到
• 简略，易于实现

毛病：

• 无奈实现多继承
• 来自原型对象的所有属性被所有实例共享
• 创立子类实例时，无奈向父类构造函数传参
• 要想为子类新增属性和办法，必须要在Student.prototype = new Person() 之后执行，不能放到结构器中

形式二: 借用构造函数继承

这种形式关键在于:在子类型构造函数中通用 call()调用父类型构造函数

 function Person(name, age) {
    this.name = name,
    this.age = age,
    this.setName = function () {}
  }
  Person.prototype.setAge = function () {}
  function Student(name, age, price) {Person.call(this, name, age)  // 相当于: this.Person(name, age)
    /*this.name = name
    this.age = age*/
    this.price = price
  }
  var s1 = new Student('Tom', 20, 15000) 

​
这种形式只是实现局部的继承，如果父类的原型还有办法和属性，子类是拿不到这些办法和属性的。

console.log(s1.setAge())//Uncaught TypeError: s1.setAge is not a function 

特点：

• 解决了原型链继承中子类实例共享父类援用属性的问题
• 创立子类实例时，能够向父类传递参数
• 能够实现多继承(call 多个父类对象)

毛病：

• 实例并不是父类的实例，只是子类的实例
• 只能继承父类的实例属性和办法，不能继承原型属性和办法
• 无奈实现函数复用，每个子类都有父类实例函数的正本，影响性能

形式三: 原型链 + 借用构造函数的组合继承

这种形式关键在于:通过调用父类结构，继承父类的属性并保留传参的长处，而后通过将父类实例作为子类原型，实现函数复用。

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('Tom', 20, 15000)
var s2 = new Student('Jack', 22, 14000)
console.log(s1)
console.log(s1.constructor) //Student
console.log(p1.constructor) //Person 

​
这种形式交融原型链继承和构造函数的长处，是 JavaScript 中最罕用的继承模式。不过也存在毛病就是无论在什么状况下，都会调用两次构造函数：一次是在创立子类型原型的时候，另一次是在子类型构造函数的外部，子类型最终会蕴含父类型对象的全副实例属性，但咱们不得不在调用子类构造函数时重写这些属性。

长处：

• 能够继承实例属性 / 办法，也能够继承原型属性 / 办法
• 不存在援用属性共享问题
• 可传参
• 函数可复用

毛病：

• 调用了两次父类构造函数，生成了两份实例

形式四: 组合继承优化 1

这种形式通过父类原型和子类原型指向同一对象，子类能够继承到父类的私有办法当做本人的私有办法，而且不会初始化两次实例办法 / 属性，防止的组合继承的毛病。

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, 15000)
console.log(s1) 

​
但这种形式没方法分别是对象是子类还是父类实例化

console.log(s1 instanceof Student, s1 instanceof Person)//true true
console.log(s1.constructor)//Person 

长处：

• 不会初始化两次实例办法 / 属性，防止的组合继承的毛病

毛病：

• 没方法分别是实例是子类还是父类发明的，子类和父类的构造函数指向是同一个。

形式五: 组合继承优化 2

借助原型能够基于已有的对象来创建对象，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, 15000)
console.log(s1 instanceof Student, s1 instanceof Person) // true true
console.log(s1.constructor) //Student
console.log(s1) 

同样的，Student 继承了所有的 Person 原型对象的属性和办法。目前来说，最完满的继承办法！
​

形式六：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('kobe', 39)
console.log(p1)
// 定义一个子类
class Student extends Person {constructor(name, age, salary) {super(name, age)// 通过 super 调用父类的构造方法
    this.salary = salary
  }
  showName () {// 在子类本身定义方法
    console.log("调用子类的办法")
    console.log(this.name, this.age, this.salary);
  }
}
let s1 = new Student('wade', 38, 1000000000)
console.log(s1)
s1.showName() 

​
长处：

• 语法简略易懂, 操作更不便

毛病：

• 并不是所有的浏览器都反对 class 关键字

作者：浪里行舟
链接：JavaScript 常见的六种继承形式
起源：github
著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。