要搞懂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. centos 用户名密码忘记了怎么办?

    进入互动式命令行 打开虚拟机,进入模式选择界面,即有两个模式的主界面,然后在时间结束前按e, 进入编辑选项菜单 按↓键定位到类似 linux16 /vmlinuz-3.10.0-123.el7.x86 ...

  2. 小学四则运算口算练习app---No.1

    因为对app不是很了解,对环境的配置也不是很舒心,今天主要配置了环境,了解了一些相关app的简单操作以及安卓stdiuo的使用!如下: 我自己连接的自己的手机(还是不要拿自己的手机做测试哦!模拟器虽然 ...

  3. Docker Hello-World镜像运行测试

    一.命令:docker run hello-world 命令解释:以docker客户端命令的方式运行hello-world镜像 命令运行结果: hadoop@Docker:/opt/docker$ d ...

  4. idea开发工具

    IDEA简介 IDEA 全称 IntelliJ IDEA,是java编程语言开发的集成环境.IntelliJ在业界被公认为最好的java开发工具之一,尤其在智能代码助手.代码自动提示.重构.J2EE支 ...

  5. 函数$f(x+1)$和$f(x-1)$的奇偶性

    前言 廓清认知 1.函数\(y=f(x)\)的奇偶性 ①\(y=f(x)\)为奇函数,则满足\(f(-x)+f(x)=0\),即关于点\((0,0)\)对称: ②\(y=f(x)\)为偶函数,则满足\ ...

  6. 常见网页编辑器(富文本,Markdown,代码编辑等)

    编辑器:网页不常用的功能,但却又是不可少的功能,如果要造个编辑器轮子,它可以把人玩死!!前端几大禁忌就有富文本, 为什么都说富文本编辑器是天坑? 下面记录一下常见的一些编辑器,该文随时更新: 富文本编 ...

  7. Qt :编译警告 LNK4042对象被多次指定,已忽略多余的指定 ....segmentLayout.obj

    解决办法: 步骤: 1.将segmentLayout.h .segmentLayout.cpp 从工程中删除(no  permanently delete),并清理工程 2.在代码文件目录重命名seg ...

  8. java并发编程(九)ThreadLocal & InheritableThreadLocal

    参考文档: https://blog.csdn.net/u012834750/article/details/71646700 threadlocal内存泄漏:http://www.importnew ...

  9. how to compile and replace ubuntu kernel

    how to compile and replace ubuntu kernel 0. environment -ubuntu 1804 64bit 1. prepare source code su ...

  10. 014 Vue学习笔记2

    1.组件化 在大型应用开发的时候,页面可以划分成很多部分.往往不同的页面,也会有相同的部分.例如可能会有相同的头部导航.但是如果每个页面都独自开发,这无疑增加了我们开发的成本.所以我们会把页面的不同部 ...