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. Windows Server 2008 R2 下载地址

    以下资源均来自微软 MSDN,是原汁原味的原版系统资源,值得系统爱好者收藏.以下多数链接是 ed2k 链接,推荐使用国外开源的 eMule 下载,亦可使用迅雷,但使用 eMule 更有利于共享资源. ...

  2. ORM模型

    一.创建及映射(orm_intro_demo文件) 在项目新建App下的models.py文件下新建ORM模型: from django.db import models #如果要将一个普通的类变成一 ...

  3. CSS基础学习(一) 之 line-height 与 height 属性区别

    官方定义: height:定义了了元素的高度.默认情况下,该属性订了 content area(内容区域) 的高度.如果box-sizing属性设置为 border-box,那么height就表示bo ...

  4. TestNG详解(单元测试框架)

    一.TestNG的优点 1.1 漂亮的HTML格式测试报告 1.2 支持并发测试 1.3 参数化测试更简单 1.4 支持输出日志 1.5 支持更多功能的注解 二.编写TestNG测试用例的步骤 2.1 ...

  5. 《Visual C#从入门到精通》第四章使用复合赋值和循环语句——读书笔记

    第1章 使用复合赋值和循环语句 4.1 使用复合赋值操作符 任何算术操作符都可以像这样与赋值操作符合并,从而获得复合赋值操作符. 不要这样写 要这样写 Variable=Variable*number ...

  6. selenium + firefox驱动版本对应。

    1)selenium 2.51.0====firefox 46 selenium 3.11.0 ====firefox 56 后来发现最新的火狐浏览器好多插件都不能用了.所以果断回到46.对应的2.5 ...

  7. 文件下载 路径中有中文 报错 提示 文件找不到 java.io.FileNotFoundException: http://192.168.1.141:8096/resources/card/comcard/????????/????????.png

    此问题主要是中文编码格式不对导致的,将路径中的中文部分设置下编码就可以啦 例如: String url =  "http://192.168.1.141:8096/resources/car ...

  8. Confluence 6 示例 - https://confluence.atlassian.com/

    这里是有关存储空间和内存使用的情况,数据更新于 2013年04月: 数据库大小 2827 MB Home 目录占用空间大小 116 GB 平均内存消耗 1.9 GB 选择实例的数据库表格 数据(Dat ...

  9. 八大排序算法——插入排序(动图演示 思路分析 实例代码java 复杂度分析)

    一.动图演示 二.思路分析 例如从小到大排序: 1.  从第二位开始遍历, 2.  当前数(第一趟是第二位数)与前面的数依次比较,如果前面的数大于当前数,则将这个数放在当前数的位置上,当前数的下标-1 ...

  10. libcurl编译使用,实现ftp功能

    Libcurl实现ftp的下载,上传功能.版本为curl-7.63.0 1.编译vs2015 参考资料:https://blog.csdn.net/yaojingkao/article/details ...