聊聊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 相关文章推荐
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
Angular.js之作用域scope'@','=','&'实例详解
Feb 28 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
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
论建造顺序的重要性
2020/03/04 星际争霸
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
PHP数据类型的总结分析
2013/06/13 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
Vue基础配置讲解
2019/11/29 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
python数据结构之二叉树的遍历实例
2014/04/29 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
Python装饰器用法示例小结
2018/02/11 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
python用插值法绘制平滑曲线
2021/02/19 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
python为什么要安装到c盘
2020/07/20 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
影视动画专业个人的自我评价
2013/12/31 职场文书
禁毒宣传标语
2014/06/19 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
领导干部考核评语
2015/01/04 职场文书
信访工作个人总结
2015/03/03 职场文书
大学生实习推荐信
2015/03/27 职场文书
刑事附带民事代理词
2015/05/25 职场文书