聊聊JavaScript如何实现继承及特点


Posted in Javascript onApril 07, 2017

“继承”是面向对象编程里面经常提及到的概念,它的目的是实现代码复用。JavaScript并没有“类”的概念,那么,它如何实现继承呢?

(ES6有关键字class和extend,继承的语法与Java等面向对象语言类似,但是,ES6 class,只是JavaScript原型继承的语法糖而已)

1. 类式继承

关键点:通过构造函数实现继承。

父类:

function Parent(name) {
 this.name = name || "parent";
}
Parent.prototype.say = function() {
 return this.name;
}

子类:

function Child() {}

(1) 父类对象继承

Child.prototype = new Parent("child");

var child = new Child();
child.say(); // "child"

特点:使用这种继承模式,子类不仅仅会继承父类原型上的方法/属性,还会继承父类自身的属性。

这种模式的缺点是,在初始化父类对象指向给子类原型时,并不确定父类构造函数的初始化参数(Child.prototype = new Parent("child");),而且,往往这些参数并不是子类需要的。

(2) 借用构造函数

改造子类:

function Child(){
 Parent.apply(this, arguments);
}

特点:使用这种继承模式,子类只会继承父类自身的属性。

缺点很明显,它无法从原型链中继承任何方法/属性。

(3) 共享原型

Child.prototype = Parent.prototype;

这种方式的缺点是,子类原型和父类原型共享一个对象,那么,子类如果修改原型,必然会影响父类。

(4) 临时构造函数

function inherit(Child, Parent) {
 var F = function(){};
 F.prototype = Parent.prototype;
 Child.prototype = new F();
}

特点:利用一个空函数F()充当子类和父类之间的代理,既可以实现父类原型方法/属性的继承,又可以在子类原型上继续扩展方法/属性。

一般,我们可以利用ES5提供的新方法Object.create()来实现此类继承。

Child.prototype = Object.create(Parent.prototype);

2. 通过复制属性实现继承

复制属性分为浅拷贝深拷贝

浅拷贝不会复制对象类型,只会简单的将对象引用指向子类,代码如下:

function extend(parent, child) {
 var key;
 for(key in parent) {
  if (parent.hasOwnProperty(key)){
   child[key] = parent[key];
  }
 }
 return child;
}

深拷贝会做深度复制,如果某个属性为对象类型,那么,它会复制出该对象的属性,再拷贝给子类。代码如下:

function extendDeep(parent, child) {
 var key;
 for(key in parent) {
  if (parent.hasOwnProperty(key)){
   if (typeof parent[key] === 'object') {
    child[key] = (parent[key].toString() === "[object Array]")? []:{};
    extendDeep(parent[key], child[key]);
   } else {
    child[key] = parent[key];
   }
  }
 }
 return child;
}

3. "借用方法"模式复用父类函数

如果不想实现父子之间的完全继承,仅仅期望子类实现父类中一个或多个方法,那么可以利用apply, call, bind来调用父类函数,实现复用。

代码如下:

parent.say.call(child, "hello, child!");

小结

推荐采用“临时构造函数”模式实现继承。以上所述是小编给大家介绍的JavaScript如何实现继承,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript getElementsByClassName函数
Apr 01 Javascript
玩转方法:call和apply
May 08 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
详谈$.data()的用法和作用
Feb 13 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
webpack4的迁移的使用方法
May 25 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
three.js 如何制作魔方
Jul 31 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 Javascript
js简单实现网页换肤功能
Apr 07 #Javascript
JS简单实现获取元素的封装操作示例
Apr 07 #Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 #Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 #Javascript
JavaScript函数节流的两种写法
Apr 07 #Javascript
原生JS实现圆环拖拽效果
Apr 07 #Javascript
Zepto实现密码的隐藏/显示
Apr 07 #Javascript
You might like
优化使用mysql存储session的php代码
2008/01/10 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
JS动画效果代码3
2008/04/03 Javascript
var与Javascript变量隐式声明
2009/09/17 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
图文详解WinPE下安装Python
2016/05/17 Python
Python pandas库中的isnull()详解
2019/12/26 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
Python类成员继承重写的实现
2020/09/16 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
电子商务专业学生的学习自我评价
2013/10/27 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang
浅谈redis缓存在项目中的使用
2021/05/20 Redis