重新理解JavaScript的六种继承方式


Posted in Javascript onMarch 24, 2017

类式继承(构造函数)

JS中其实是没有类的概念的,所谓的类也是模拟出来的。特别是当我们是用new 关键字的时候,就使得“类”的概念就越像其他语言中的类了。类式继承是在函数对象内调用父类的构造函数,使得自身获得父类的方法和属性。call和apply方法为类式继承提供了支持。通过改变this的作用环境,使得子类本身具有父类的各种属性。

var father = function() {
this.age = 52;
this.say = function() {
alert('hello i am '+ this.name ' and i am '+this.age + 'years old');
}
}
var child = function() {
this.name = 'bill';
father.call(this);
}
var man = new child();
man.say();

 原型继承

原型继承在开发中经常用到。它有别于类继承是因为继承不在对象本身,而在对象的原型上(prototype)。每一个对象都有原型,在浏览器中它体现在一个隐藏的__proto__属性上。在一些现代浏览器中你可以更改它们。比如在zepto中,就是通过添加zepto的fn对象到一个空的数组的__proto__属性上去,从而使得该数组成为一个zepto对象并且拥有所有的方法。话说回来,当一个对象需要调用某个方法时,它回去最近的原型上查找该方法,如果没有找到,它会再次往下继续查找。这样逐级查找,一直找到了要找的方法。 这些查找的原型构成了该对象的原型链条。原型最后指向的是null。我们说的原型继承,就是将父对像的方法给子类的原型。子类的构造函数中不拥有这些方法和属性。

var father = function() {
}
father.prototype.a = function() {
}
var child = function(){}
//开始继承
child.prototype = new father();
var man = new child();
man.a();

可以看到第七行实现了原型继承。很多人并不陌生这种方式。通过在浏览器中打印man我们就可以查看各个原型的继承关系。

重新理解JavaScript的六种继承方式

可以看到逐级的关系child->object(father实例化的对象)->father。child是通过中间层继承了father的原型上的东西的。但是为什么中间还有一层object呢, 为什么不把child.prototype = father.prototype。 答案是如果这样做child和father就没有区别了。大家应该还记得在prototype中有个constructor属性,指向的是构造函数。按照正常的情况我们要把constructor的值改回来指向child的构造函数。但如果直接把father.prototype赋值给child.prototype,那么constructor应该指向谁呢?所以很显然只能通过中间层才能使得child和father保持为独立的对象。

类式继承和原型继承的对比

构造函数(类)式继承

首先,构造函数继承的方法都会存在父对象之中,每一次实例,都会将funciton保存在内存中,这样的做法毫无以为会带来性能上的问题。

其次,类式继承是不可变的。无法复用,在运行时,无法修改或者添加新的方法,这种方式是一种固步自封的死方法。实践中很少单纯使用。

原型继承

优点:

原型链可改变:原型链上的父类可替换可扩展

可以通过改变原型链接而对子类进行修改的。另外就是类式继承不支持多重继承,而对于原型继承来说,你只需要写好extend对对象进行扩展即可。

但是原型链继承也有2个问题。

第一,包含引用类型值的原型属性会被所有实例共享(可以这样理解:执行sub1.arr.push(2);先对sub1进行属性查找,找遍了实例属性(在本例中没有实例属性),没找到,就开始顺着原型链向上找,拿到了sub1的原型对象,一搜身,发现有arr属性。于是给arr末尾插入了2,所以sub2.arr也变了)。

第二,在创建子类型的实例时,不能向超类型的构造函数中传递参数。(实际上,应该说没有办法在不影响所有对象实例的情况下,给超类型的构造函数传递参数)实践中很少单纯使用原型链。

function Super(){
this.val = 1;
this.arr = [1];
}
function Sub(){
// ...
}
Sub.prototype = new Super(); // 核心
var sub1 = new Sub();
var sub2 = new Sub();
sub1.val = 2;
sub1.arr.push(2);
alert(sub1.val); // 2
alert(sub2.val); // 1
alert(sub1.arr); // 1, 2
alert(sub2.arr); // 1, 2

总结:

类式继承在实例化时,父类可传参,不能复用(父类不可变,每一次实例都会将父类内容保存在内存中)

原型继承在实例化时,父类不可传参,可以复用(原型链可改变(父类可替换可扩展),父类不会保存在内存中,而是顺着原型链查找,但是结果是原型属性会被所有实例共享(尤其影响引用类型值))

组合继承(最常用)

组合继承将原型链和借用构造函数的技术结合到一起,发挥两者之长的一种继承模式。

思路是使用原型链实现对原型属性和方法的继承,通过借用构造函数实现对实例属性的继承。

function SuperType(name){
this.name = name;
this.numbers = [1,2,3];
}
SuperType.prototype.sayName = function(){
console.log(this.name);
}
function SubType(name,age){
SuperType.call(this,name);
this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function(){
console.log(this.age);
}
var instance1 = new SubType('aaa',21);
instance1.numbers.push(666);
console.log(instance1.numbers);
instance1.sayName();
instance1.sayAge();
var instance2 = new SubType('bbb',22);
console.log(instance2.numbers);
instance2.sayName();
instance2.sayAge();

把实例函数都放在原型对象上,通过Sub.prototype = new Super();继承父类函数,以实现函数复用。

保留借用构造函数方式的优点,通过Super.call(this);继承父类的基本属性和引用属性,以实现传参;

优缺点

优点:

  1. 可传参
  2. 函数可复用
  3. 不存在引用属性共享问题(图纸)

缺点:

(一点小瑕疵)子类原型上有一份多余的父类实例属性,因为父类构造函数被调用了两次,生成了两份,而子类实例上的那一份屏蔽了子类原型上的。。。又是内存浪费,比刚才情况好点,不过确实是瑕疵。

以上所述是小编给大家介绍的JavaScript的六种继承方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ASP.NET中AJAX 调用实例代码
May 03 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 22 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
vue路由缓存的几种实现方式小结
Feb 02 Javascript
Vue实现Layui的集成方法步骤
Apr 10 Javascript
JavaScript验证知识整理
Mar 24 #Javascript
Bootstrap常用组件学习(整理)
Mar 24 #Javascript
详解打造 Vue.js 可复用组件
Mar 24 #Javascript
JavaScript获取URL参数的方法之一
Mar 24 #Javascript
原生JS改变透明度实现轮播效果
Mar 24 #Javascript
深入理解vue路由的使用
Mar 24 #Javascript
原生JS实现导航下拉菜单效果
Nov 25 #Javascript
You might like
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
javascript函数库-集合框架
2007/04/27 Javascript
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python向日志输出中添加上下文信息
2017/05/24 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
大专毕业生简历的自我评价
2013/10/20 职场文书
大学生职业生涯规划书模板
2014/01/03 职场文书
公司企业表扬信
2014/01/11 职场文书
车辆委托书范本
2014/10/05 职场文书
土建技术员岗位职责
2015/04/11 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
会计做账心得体会
2016/01/22 职场文书
2019各种承诺书范文
2019/06/24 职场文书