ES5与ES6中的继承

Posted 学海无涯苦作舟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES5与ES6中的继承相关的知识,希望对你有一定的参考价值。

ES5继承
在ES5中没有类的概念,所以一般都是基于原型链继承,具体的继承方法有以下几种:

父类:
function Father (name) {
  this.name = name || ‘sam‘
  this.sleep = function () { // 实例方法
    return this.name + ‘正在睡觉‘
  }
}
Father.prototype.eat = funciton () { // 原型方法
  return this.name + ‘正在吃饭‘
}

一,原型链继承
核心:将父类的实例作为子类的原型

子类:
function Son () { 
  this.age = 12
}
Son.prototype = new Father()
Son.prototype.name = ‘Sam‘
var son = new Son()
document.write(son.age)
document.write(son.name) // Sam
document.write(son.sleep()) // Sam正在睡觉
document.write(son.eat()) // Sam正在吃饭

优点:

(1)非常纯粹的继承关系,实例是子类的实例,也是父类的实例
(2)父类新增的属性和方法,子类都能访问到
(3)简单,易于实现
缺点:

(1)无法实现多继承
(2)来自原型对象的引用属性是所有子类实例共享的
(3)创建子类实例时,无法向父类的构造函数传递参数

二,构造继承
核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类

子类:
function Son (age) {
  Father(this) //实现了继承 
  this.age = age
}
var son = new Son()
console.log(son.name) // 返回sam
console.log(son.sleep()) // 返回sam正在睡觉
console.log(son.eat()) // 报错Uncaught TypeError

优点:
(1)子类创建时,可以通过call或者apply向父类传递参数
(2)可以实现多继承(call多个父类对象)
缺点:
(1)实例并不是父类的实例,只是子类的实例
(2)只能继承父类的实例属性和方法,不能继承原型属性和方法
(3)无法实现函数复用,每个子类都有父类实例函数的副本,影响性能
三,实例继承
核心:为父类实例添加新特性,作为子类实例返回

子类:
function Son (name) {
var instance = new Father() instance.name = name || ‘Tom‘ return instance } var son = new Son() console.log(son.name) console.log(son.sleep()) console.log(son.eat())

缺点:
(1)实例是父类的实例,不是子类的实例
(2)不支持多继承
四,组合继承
核心:通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用

子类:
function Son (age) {
  Father.call(this,‘sam‘)
  this.age = age
}
Son.prototype = new Father()
var son = new Son()
console.log(son.name)
console.log(son.eat())
console.log(son.sleep())

优点:
(1)可以继承实例属性和方法,还可以继承原型属性和方法
(2)既是子类的实例,也是父类的实例
(3)不存在引用属性共享问题
(4)可传参
(5)函数可复用
缺点:调用了两次父类构造函数,生成了两份实例
ES6继承
ES6里面引入了类class的概念,class可以通过extends关键字实现继承,这比ES5通过修改原型链实现继承,要清晰和方便很多
父类(关于ES6中通过class定义一个实例对象的方法这里略过)

class Father {
  constructor (name) {
    this.name =name
  }
  eat () {
    return this.name + ‘正在吃饭‘
  }
  sleep () {
    return this.name + ‘正在睡觉‘
  }
} 
子类
class Son extends Father {
}
class Son extends Father {
  constructor () {
    super()
  }
}

以上两种写法是相等的。如果子类中没有定义constructor,这个方法会被默认添加,不管有没有显示定义,任何一个子类都有constructor方法。

子类
class Son extends Father {
  constructor (color) {
    this.color = color
  }
}
var son = new Son
console.log(son.color) // 报错

在子类的构造函数中,如果用了constructor方法,则必须调用super方法。只有调用super之后,才可以使用this关键字,否则会报错。这是因为子类实例的构建,是基于对父类实例的加工,只有super方法才能返回父类实例

class Son extends Father {
  constructor (name,age) {
    super (name)
    this.age = age
  }
  play () {
    return super.eat()+ ‘正在玩耍‘ 
  }
}
var son = new Son(‘sam‘)
console.log(son.play())

 

以上是关于ES5与ES6中的继承的主要内容,如果未能解决你的问题,请参考以下文章

关于es5与es6的继承比较

JavaScript之ES6中的class与继承

ES5和ES6中的继承 图解

ES5和ES6中的继承

ES5和ES6中的继承

ES6:class的定义与继承,从ES5转换成ES6