聊聊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 相关文章推荐
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
基于jquery的cookie的用法
Jan 10 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
Vue中的transition封装组件的实现方法
Aug 13 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
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
浅谈编码,解码,乱码的问题
2016/12/30 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
Python读写文件基础知识点
2019/06/10 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
UNIX文件系统常用命令
2012/05/25 面试题
半年思想汇报
2013/12/30 职场文书
自我评价是什么
2014/01/04 职场文书
企业精神口号
2014/06/11 职场文书
六一儿童节活动总结
2014/08/27 职场文书
大学学生个人总结
2015/02/15 职场文书
四群教育工作总结
2015/08/10 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
python三子棋游戏
2022/05/04 Python