要搞懂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. 3DMax下载与安装(注册机为网上收集,仅供学习与研究,支持正版)

    3DS Max 全称3D Studio Max,是Autodesk公司开发的三维动画制作和渲染软件(Autodesk AutoCAD 2012也是Autodesk公司的软件产品) 3DS Max广泛应 ...

  2. apache在linux下安装

    yum安装 主流Linux系统版本基本上都集成了apache服务器httpd,我们可以通过如下命令来查看我们的操作系统上是否已经安装了apache服务器httpd rpm -qa | grep htt ...

  3. 【pytorch】持续踩坑 & 错误解决经历

    报错 1.[invalid argument 0: Sizes of tensors must match except in dimension 0.] {出现在 torch.utils.data. ...

  4. token的验证过程

    1.用户向服务器发送用户名和密码. 2.服务端收到请求,验证用户名和密码. 3.验证成功后,服务端会签发一个token,并将这个token发送到客户端. 4.客户端收到token后将token存储起来 ...

  5. mysql 8创建远程访问用户以及连接mysql速度慢的解决方法

      mysql 8创建远程访问用户 [root@demo /]# mysql -u root -p  #登录服务器数据库 Enter password:123xxx >user mysql; & ...

  6. 洛谷 p1516 青蛙的约会 题解

    dalao们真是太强了,吊打我无名蒟蒻 我连题解都看不懂,在此篇题解中,我尽量用语言描述,不用公式推导(dalao喜欢看公式的话绕道,这篇题解留给像我一样弱的) 进入正题 如果不会扩展欧里几德的话请先 ...

  7. vue动态添加路由,跳转页面时,页面报错路由重复:vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: { name: "Login", path: "/login" }

    之前用了一个vue-element-admin做了一个小项目,里面用到了动态添加路由,动态展示侧边栏, 当我切换页面时,控制台总是警告提示路由重复,连续跳转几次页面后,控制台就被这些警告占满了, 于是 ...

  8. Spring Security教程之session管理(十一)

    1.1     检测session超时 1.2     concurrency-control 1.3     session 固定攻击保护 Spring Security通过http元素下的子元素s ...

  9. Rattle

    Rattle使用RGtk2 包提供的Gnome图形用户界面,可以在WINDOWS,MAC OS/X,Linux等多个系统中使用. Rattle基于大量的R包:RGtk2, pmml, colorspa ...

  10. 20165230田坤烨网络对抗免考报告_基于WIN10的渗透攻击

    目录 简单信息收集 主机发现 ping nmap 端口扫描 nmap OS及服务版本探测 nmap -sV 绕过防火墙尝试 诱饵 随机数据长度 随机顺序扫描目标 MAC地址欺骗 实现win10的渗透攻 ...