实现继承的几种方式以及他们的优缺点(参考文档1参考文档2参考文档3

  要搞懂JS继承,我们首先要理解原型链:每一个实例对象都有一个__proto__属性(隐式原型),在js内部用来查找原型链;每一个构造函数都有prototype属性(显示原型),用来显示修改对象的原型,实例.__proto__=构造函数.prototype=原型。原型链的特点就是:通过实例.__proto__查找原型上的属性,从子类一直向上查找对象原型的属性,继而形成一个查找链即原型链。

  1)原型链继承:

  我们使用原型继承时,主要利用sub.prototype=new super,这样连通了子类-子类原型-父类。

  核心:将父类的实例作为子类的原型。

//父类,带属性
function Super(){
this.flag = true;
}
//为了提高复用性,方法绑定在父类原型属性上
Super.prototype.getFlag = function(){
return this.flag;
}
//来个子类
function Sub(){
this.subFlag = false;
}
//实现继承
Sub.prototype = new Super;
//给子类添加子类特有的方法,注意顺序要在继承之后
Sub.prototype.getSubFlag = function(){
return this.subFlag;
}
//构造实例
var es5 = new Sub;

  特点:

  1. 非常纯粹的继承关系,实例是子类的实例,也是父类的实例

  2. 父类新增原型方法/原型属性,子类都能访问到

  缺点:

  来自原型对象的引用属性是所有实例共享的,即属性没有私有化,原型上属性的改变会作用到所有的实例上。

  2)构造函数继承:

  在构造子类构造函数时内部使用call或apply来调用父类的构造函数

  核心:使用父类的的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)

function Super(){
this.flag = true;
}
function Sub(){
Super.call(this) //如果父类可以需要接收参数,这里也可以直接传递
}
var obj = new Sub();
obj.flag = flase;
var obj_2 = new Sub();
console.log(obj_2.flag) //依然是true,不会相互影响

  优缺点:实现了属性的私有化,但是子类无法访问父类原型上的属性。

  特点:
  1. 解决了1中,子类实例共享父类引用属性的问题
  2. 创建子类实例时,可以向父类传递参数
  3. 可以实现多继承(call多个父类对象)
  缺点:
  1. 实例并不是父类的实例,只是子类的实例
  2. 只能继承父类的实例属性和方法,不能继承原型属性/方法
  3. 无法实现函数复用,每个子类都有父类实例函数的副本,影响性能

  3)组合继承:

  利用构造函数和原型链的方法,可以比较完美的实现继承

function Super(){
this.flag = true;
}
Super.prototype.getFlag = function(){
return this.flag; // 继承方法
}
function Sub(){
this.subFlag = flase
Super.call(this) // 继承属性
}
Sub.prototype = new Super;
var obj = new Sub();
// Sub.prototype = new Super; 会导致Sub.prototype的constructor指向Super;
// 然而constructor的定义是要指向原型属性对应的构造函数的,Sub.prototype是Sub构造函数的原型,
// 所以应该添加一句纠正:Sub.prototype.constructor = Sub;
Sub.prototype.constructor = Sub; // 修复构造函数指向
Super.prototype.getSubFlag = function(){
return this.flag;
}

  特点:
  1. 弥补了方式2的缺陷,可以继承实例属性/方法,也可以继承原型属性/方法
  2. 既是子类的实例,也是父类的实例
  3. 不存在引用属性共享问题
  4. 可传参
  5. 函数可复用
  缺点:
  1. 调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)

  4)寄生继承:

  核心:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点

  example1:

function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
(function(){
// 创建一个没有实例方法的类
var Super = function(){};
Super.prototype = Animal.prototype;
//将实例作为子类的原型
Cat.prototype = new Super();
})();
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true
Cat.prototype.constructor = Cat; // 需要修复下构造函数

  example2:

  特点:使用到了Object.create(Fu.prototype)实现原型链的浅拷贝
  优点:解决了原型链继承和构造函数继承的缺点

前端知识体系:JavaScript基础-原型和原型链-实现继承的几种方式以及他们的优缺点的更多相关文章

  1. web前端知识体系总结

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  2. 自己总结的web前端知识体系大全【欢迎补充】

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  3. web前端知识体系大全

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  4. web前端知识体系小结(转)

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  5. Web前端知识体系精简

    Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...

  6. 从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!

    前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...

  7. Web前端知识体系

    看到一篇不错的文章,拿来收藏和分享. 原文:http://mp.weixin.qq.com/s/UFTfdE7LYhHquWEzwZKLCQ Web前端技术由html.css和 javascript三 ...

  8. web前端知识体系大全【欢迎补充】

    大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人 ...

  9. web前端知识体系大全【转载】

    自己总结的web前端知识体系大全[欢迎补充]   1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在 ...

随机推荐

  1. 破周三,前不着村后不着店的,只好学pandas了,你该这么学,No.9

    如果图片无法观看,请移步 https://blog.csdn.net/hihell 周三了,一个星期最难的一天 大中间的,今天还这么热 5月份,36度的高温 天空飘过几个字 屋里学pandas最得劲 ...

  2. The timeout period elapsed prior to completion of the operation or the server is not responding.

    问题:更新数据的状态值时,部分报出如下异常: 即时有成功更新,时有报错问题出现. 在LOG中发现成功更新的数据,存在更新时间过长问题,将近30秒(EF默认的CommandTimeout为30秒): 代 ...

  3. [CF997C]Sky Full of Stars_二项式反演_等比数列_容斥原理

    Sky Full of Stars 题目链接:http://codeforces.com/problemset/problem/997/C 数据范围:略. 题解: 首先考虑拟对象,如果至少有一行完全相 ...

  4. hanlp分词工具应用案例:商品图自动推荐功能的应用

    本篇分享一个hanlp分词工具应用的案例,简单来说就是做一图库,让商家轻松方便的配置商品的图片,最好是可以一键完成配置的. 先看一下效果图吧: 商品单个推荐效果:匹配度高的放在最前面 这个想法很好,那 ...

  5. REST架构中的HTTP动词

    POST 增 DELETE 删 PUT 改 GET 查 GET(SELECT):从服务器取出资源(一项或多项). POST(CREATE):在服务器新建一个资源. PUT(UPDATE):在服务器更新 ...

  6. __setitem__和__getitem__和__delitem__

    __setitem__和__getitem__和__delitem__ class Foo: def __init__(self, name): self.name = name def __geti ...

  7. S02_CH10_ User GPIO实验

    S02_CH10_ User GPIO实验 在之前的第四章课程中,我们详细的讲解了如何在VIVADO软件下封装一个简单的流水灯程序.在ZYNQ开发过程中,有时候我们可能会需要与ARM硬核进行通信,在这 ...

  8. Scala学习二十一——隐式转换和隐式参数

    一.本章要点 隐式转换用于类型之间的转换 必须引入隐式转换,并确保它们可以以单个标识符的形式出现在当前作用域 隐式参数列表会要求指定类型的对象.它们可以从当前作用域中以单个标识符定义的隐式对象的获取, ...

  9. C# 批量设置窗体中控件状态的方法

    在开发中常遇到当点击某个按钮的时候,禁用文本框或按钮的的状态,以防止误操作,下面的代码是我已批量设置指定控件中的按钮状态的代码,同理可以延伸出很多操作. /// <summary> /// ...

  10. css———详解height与line_height

    定义 height指的是块级别元素的高度: line-height指的是元素内容的高度. height和line-height的联系 CSS中起高度作用的应该就是height以及line-height ...