要搞懂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;

缺点:构造函数原型上的属性在所有该构造函数构造的实例上是共享的,即属性没有私有化,原型上属性的改变会作用到所有的实例上。

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.flag) //依然是true,不会相互影响

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

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.constructor = Sub;
Super.prototype.getSubFlag = function(){
return this.flag;
}

注:

这里还有个小问题,Sub.prototype = new Super; 会导致Sub.prototype的constructor指向Super;然而constructor的定义是要指向原型属性对应的构造函数的,Sub.prototype是Sub构造函数的原型,所以应该添加一句纠正:Sub.prototype.constructor = Sub;

4.寄生继承

即将sub.prototype=new super改为sub.prototype=Object.creat(supper.prototype),避免了组合继承中构造函数调用了两次的弊端。

转:https://blog.csdn.net/qq_25461519/article/details/81060130

4.Javascript中实现继承的几种方法及其优缺点的更多相关文章

  1. javascript中实现继承的几种方式

    javascript中实现继承的几种方式 1.借用构造函数实现继承 function Parent1(){ this.name = "parent1" } function Chi ...

  2. JavaScript中数组去重的几种方法

    JavaScript中数组去重的几种方法 正常情况下,数据去重的工作一般都是由后端同事来完成的,但是前端也要掌握好处理数据的能力,万一去重的工作交给我们大前端处理,我们也不能怂呀.现在我总结了一些去重 ...

  3. javascript中数组去重的4种方法

    面试前端必须准备的一道问题:怎样去掉Javascript的Array的重复项.在最近面试中,百度.腾讯.盛大等都在面试里出过这个题目.这个问题看起来简单,但其实暗藏杀机. 考的不仅仅是实现这个功能,更 ...

  4. JavaScript中date日期的n种方法

    转自博客 https://blog.csdn.net/u013992330/article/details/54318737

  5. javascript中字符串截取的两种方法

    var testStr = "hello kay!"; 1.substr testStr.substr(1)   ->ello kay! testStr.substr(1,4 ...

  6. Javascript中创建函数的几种方法

    // 工厂函数模式 // 无法解决对象识别问题 function person0(name, age, job) { var obj = new Object(); obj.name = name; ...

  7. 浅谈JavaScript中的继承

    引言 在JavaScript中,实现继承的主要方式是通过原型链技术.这一篇文章我们就通过介绍JavaScript中实现继承的几种方式来慢慢领会JavaScript中继承实现的点点滴滴. 原型链介绍 原 ...

  8. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  9. JS学习笔记——JavaScript继承的6种方法(原型链、借用构造函数、组合、原型式、寄生式、寄生组合式)

    JavaScript继承的6种方法 1,原型链继承 2,借用构造函数继承 3,组合继承(原型+借用构造) 4,原型式继承 5,寄生式继承 6,寄生组合式继承 1.原型链继承. <script t ...

随机推荐

  1. destoon开发笔记-调取资讯标题图

    今天刚申请博客园的博客,申请速度挺快的.之前我的文章都是发在自己搭建的博客网站,但是是香港服务器,不想续费了,所以就关闭了.之前的数据也没有了,挺可惜了.不过既然加入博客园的大家庭,我就在这每天记录工 ...

  2. Java 基本类型、封装类型、常量池、基本运算

    基本数据类型: byte:Java中最小的数据类型,在内存中占8位(bit),即1个字节,取值范围-128~127,默认值0 short:短整型,在内存中占16位,即2个字节,取值范围-32768~3 ...

  3. this指向问题(改变它的指向)

    这个问题倒不是面向对象的,而是今天遇到js面向对象的时候一个例子的时候突然遇到了,call()方法,然后自己突然发现竟然忘记了,查了之后整理如下: xxx.call((对象名),参数a,参数b) xx ...

  4. Windbg的快捷键

    窗口切换 可以使用以下键盘快捷方式窗口之间进行切换. 项 效果 CTRL+TAB 调试信息窗口之间切换. 通过重复使用此密钥,你可以扫描通过的所有窗口,而不考虑是否浮动. 停靠本身,或选项卡式停靠窗口 ...

  5. PEPE规范 和 垃圾回收

    目录 1.python解释器的种类及特点 2.PEP8规范 3.解释型语言和编译型语言 4.bit.B.KB.MB.GB的关系 5.列举你所了解到python2和python3的区别 6.is和==的 ...

  6. ESA2GJK1DH1K开发教程: 来看看最新整理的整个开发板的教程大纲吧

    项目开发:教程大纲(测试板型号:ESA2GJK1DH1K) 购买链接: https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.25911deb ...

  7. axios二次封装

    import axios from "axios" //请求拦截器 axios.interceptors.request.use(function (config) { retur ...

  8. About Her

    突然想给黑寡妇写点儿东西......(也许很多都不是我写的,但是能表达我的心意) 1. 众人进量子领域前最后一句话是她笑着说"一分钟后见." 而最终没有回来的,只有她自己一个 2. ...

  9. 【CF573E】Bear and Bowling

    [CF573E]Bear and Bowling 题面 洛谷 题解 首先有一个贪心的结论: 我们一次加入每个数,对于\(\forall i\),位置\(i\)的贡献为\(V_i = k_i\times ...

  10. 【CF848B】 Rooter's Song

    题目链接 \(solution\) 类似于蚂蚁那道题的做法 弹性碰撞相当于交换位置并继续前进,考虑一个起点\((x,0)\),时间为\(t\)出发的\(dancer\),相当于从\((x,-t)\)的 ...