聊聊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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 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
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
php获取文件大小的方法
2014/02/26 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
javascript 关闭IE6、IE7
2009/06/01 Javascript
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
js实现旋转的星空效果
2019/11/01 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
python标准算法实现数组全排列的方法
2015/03/17 Python
在Python 字典中一键对应多个值的实例
2019/02/03 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
Python实现AI换脸功能
2020/04/10 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
古汉语文学求职信范文
2014/03/16 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
2015年环卫工作总结
2015/04/28 职场文书
发票退票证明
2015/06/24 职场文书
2016年校长新年寄语
2015/08/17 职场文书
《确定位置》教学反思
2016/02/18 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
解析redis hash应用场景和常用命令
2021/08/04 Redis
SQL语句多表联合查询的方法示例
2022/04/18 MySQL