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. luogu[愚人节题目3]现代妖怪殖民地 NTT

    U34272 [愚人节题目3]现代妖怪殖民地 fft 题目链接 https://www.luogu.org/problemnew/show/U34272 思路 虽然是个py题. ntt(或者fft)模 ...

  2. Intellij IDEA 设置启动JVM参数

    目录 采用CMS垃圾回收配置: 采用G1垃圾回收配置: 参数说明: 通用参数: CMS机制才有的参数: G1机制才有的参数: 参考: 打开 IDEA 安装目录,看到有一个 bin 目录,其中有两个 v ...

  3. 【SQL Server 问题记录】A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible.

    本文涉及的相关问题,如果你的问题或需求有与下面所述相似之处,请阅读本文 A network-related or instance-specific error occurred while esta ...

  4. Learning-Python【7】:Python数据类型(3)—— 字典、集合

    一.字典类型 1.用途:用来存放多个不同种类的值 2.定义方式:在{ }内用逗号分隔开多个key:value的元素,其中value可以是任意数据类型,而key的功能通常是用来描述value的,所以ke ...

  5. CBV与FBV

    FBV FBV(function base views)就是在 url 中一个路径对应一个函数 urls.py urlpatterns = [ url(r'^admin/', admin.site.u ...

  6. .Net中json序列化与反序列化

    NuGet中下载Newtonsoft.Json插件. public class JsonHelper<T>{ public static string ModelToJsonString( ...

  7. 廖雪峰 JavaScript 学习笔记(字符串、数组和对象)

    字符串 1.和python一样,也是用' '或" "括起来的字符表示.但多行字符串是用反引号(esc下键)``,与之相对的是Python用''' '''三引号表示: 2.转义字符: ...

  8. Codeforces Round #FF (Div. 2) D. DZY Loves Modification 优先队列

    D. DZY Loves Modification time limit per test 2 seconds memory limit per test 256 megabytes input st ...

  9. Katy Perry - E.T.

    作曲 : Katy Perry, Łukasz Gottwald, Max Martin, Joshua Coleman 作词 : Katy Perry, Łukasz Gottwald, Max M ...

  10. blob对象的应用

    demo:https://pan.baidu.com/s/1hsq2vgK 最近在学习blob,利用blob编写了两个业务场景,详情请下载demo查看 1:大文件分片下载,服务器端使用.net接收客户 ...