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.call(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中的继承的更多相关文章

  1. ES5和ES6中的继承

    看到一篇写的非常好的关于js继承的文章,其中对构造函数.原型.实例之间的关系的描述十分透彻,故转载作者文章以随时学习,并供大家共同进步! ES5 ES5中的继承,看图: function Super( ...

  2. ES5和ES6中的继承 图解

    Javascript中的继承一直是个比较麻烦的问题,prototype.constructor.__proto__在构造函数,实例和原型之间有的 复杂的关系,不仔细捋下很难记得牢固.ES6中又新增了c ...

  3. ES5和ES6中对于继承的实现方法

    在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...

  4. 浅谈es5和es6中的继承

    首先给大家介绍下在es5中构造函数的继承 function A(){ 2 //构造函数A 3 this.name="我是A函数"; 4 } 5 6 A.prototype={ 7 ...

  5. 前端面试之ES6中的继承!

    前端面试之ES6中的继承! ES6之前并没有给我们提供 extends继承.我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承. 1 call() 两个作用: 1 调用这个函数! 2 修改函数 ...

  6. JS创建对象、继承原型、ES6中class继承

    面向对象编程:java中对象的两个基本概念:1.类:类是对象的模板,比如说Leader 这个是泛称领导,并不特指谁.2:实例:实例是根据类创建的对象,根据类Leader可以创建出很多实例:liyi,y ...

  7. 在ES5实现ES6中的Object.is方法

    ES6中对象的扩展里面添加了一个Object.is方法,用于比较两个值是否严格相等.内部计算与 === 行为基本一致.那么我们怎么在不支持这个方法的ES5中实现呢? 首先我们需要搞清楚两点,1:Obj ...

  8. ES5和ES6中关于import & export的书写方式的区别

    ES6中输出变量的写法 情景1:单个变量 输出 export const less = 'less' 引用 import {less} from '../index.js' 情景2:多个变量 输出: ...

  9. 关于ES5中的prototype与ES6中class继承的比较

    ES5:继承: 1.ES5:继承 通过原型链实现继承.子类的prototype为父类对象的一个实例,因此子类的原型对象包含指向父类的原型对象的指针,父类的实例属性成为子类原型属性 2.ES6 的继承 ...

随机推荐

  1. Ubuntu 18.04拨号上网及校园网开启IPV6

    Ubuntu 18.04下有两种方法实现拨号上网,第一种是通过图形界面添加,需要开启自动连接,并且要关闭以太网的自动连接.(不推荐这种连接方式)这里介绍第二种,通过pppoeconf命令进行拨号. 关 ...

  2. linux驱动编写(pwm驱动)【转】

    本文转载自:https://blog.csdn.net/feixiaoxing/article/details/79889240 pwm方波可以用来控制很多的设备,比如它可以被用来控制电机.简单来说, ...

  3. 测试是否支持辨别tex公式

    1.首先启动博客园公式编写支持(latex) 2.编写公式 3.结果 $a+b=5$ $c+d=7$

  4. 《温故而知新》JAVA基础一

    一:基本环境 种类 javaSE(核心语法)+javaME(移动设备)+Java EE(JSP/服务等) JVM(java虚拟机) abc.java(源文件)--编译器--abc.class 字节码文 ...

  5. vue中插入Echarts示例(菜鸟记录)

  6. conda基本操作

    准备环境 # 下载并安装conda基础环境 $ wget https://mirror.tuna.tsinghua.edu.cn/anaconda/miniconda/Miniconda3-4.3.1 ...

  7. 4、NFS

    一.NFS简介 4.1.1:什么是NFS NFS(Network File System,网络文件系统)是由SUN公司开发,并于1984年推出的技术,通过使用NF,用户和程序可以向访问本地文件一样访问 ...

  8. test-overflow:ellipsis的应用----转载

    关键字: text-overflow:ellipsis 语法:text-overflow : clip | ellipsis 取值: clip :默认值 .不显示省略标记(...),而是简单的裁切. ...

  9. 微信小程序城市定位(百度地图API)

    概述 微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...

  10. java中double和float精度丢失问题及解决方法

    在讨论两位double数0.2和0.3相加时,毫无疑问他们相加的结果是0.5.但是问题总是如此吗? 下面我们让下面两个doubles数相加,然后看看输出结果: @Test public void te ...