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. 剑指offer(47)求1+2+3+...+n

    题目描述 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 题目分析 不能用乘除也就不能用公示了,并且不能 ...

  2. GlitchBot

    问题 F: GlitchBot 时间限制: 1 Sec  内存限制: 128 MB 提交: 230  解决: 113 [提交] [状态] [命题人:admin] 题目描述 One of our del ...

  3. 再谈git和github-深入理解

    git中的 objects 和 refs 是什么? 目录objects是仓库的 "对象库" , 是包含 代码, 提交, 日志, 信息, 索引等信息的关键所在 refs是一些 sha ...

  4. 论Object.keys(), Object.getOwnPropertyNames(), for in, Object.getOwnPropertySymbol()区别

    前不久,一朋友求助,让我给解释一波Object.keys(), Object.getOwnPropertyNames(), for in的区别,面试中好几次呗问了.所以,抽了点时间看了看,大概把我看的 ...

  5. 字符串转换整数 (atoi)

    题目: 请你来实现一个 atoi 函数,使其能将字符串转换成整数. 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止. 当我们寻找到的第一个非空字符为正或者负号时,则将该 ...

  6. 非递归遍历N-ary树Java实现

    2019-03-25 14:10:51 非递归遍历二叉树的Java版本实现之前已经进行了总结,这次做的是非递归遍历多叉树的Java版本实现. 在非递归遍历二叉树的问题中我个人比较推荐的是使用双whil ...

  7. [Hibernate] 分页查询

    @Test public void test9(){ //根据部门编号进行分组,再根据每个部门总工资>5000 Session ss=HibernateUtil.getSession(); St ...

  8. Multivariate normal distribution | 多元正态分布

    现在终于需要用到了.

  9. SWUST OJ(961)

    进制转换问题 #include<stdio.h> #include<stdlib.h> #define STACK_SIZE 100 #define STCK_INCREMEN ...

  10. 解决Android studio生成H文件时报找不到类文件错误

    今天整理思路时觉得在native直接调用java的方法显示这个办法挺不错 于是就用到了生成H文件 可能我的编译环境和他们的不一样 网上的教程如下 javah -d ../jni com.jm.prom ...