全面理解JavaScript中的继承(必看)


Posted in Javascript onJune 16, 2016

JavaScript中我们可以借助原型实现继承。

例如

function baz(){
this.oo="";
}

function foo(){

}
foo.prototype=new baz();
var myFoo=new foo();
myFoo.oo;

这样我们就可以访问到baz里的属性oo啦。在实际使用中这个样不行滴,由于原型的共享特点(数据保存在了堆上),

所有实例都使用一个原型,一但baz的属性有引用类型就悲剧了,一个实例修改了其他实例也都跟着变了...wuwuwu

自然就有了组合式继承

function baz(){
this.oo="";
}
baz.prototype.xx=function(){

}

function foo(){
baz.call(this);//第二次调用
}
foo.prototype=new baz();//第一次调用
var myFoo=new foo();
myFoo.oo;
myFoo.xx;

这样就会有一个问题,代码里也表明出来了,baz会被调用两次,身为处女座的怎么可以允许呢..

插一句,第二种方式就不用出现第一种方式的问题吗?答案是不会的。

原因是属性的查找是先从对象自身开始,没找到才会去原型中去找,call时就把属性给继承了。

再插一句,那这样只使用call继承不就行了吗?如果不使用原型这个是可行的,但是作为处女座怎么能不使用原型呢,

在原型上方法是共享的,这样性能就好了很多呀。

寄生组合式继承

__extends=function (p,c){
function ctor(){
this.constructor=c;//赋值构造函数
}
ctor.prototype=p.prototype;
c.prototype=new ctor();
}

function baz(){
this.oo=[1];
}
baz.prototype.xx=function(){

}
__extends(baz,foo);
function foo(){
baz.call(this);
}
var myFoo=new foo();
myFoo.oo;
myFoo.xx;

这样不但解决了两次调用的问题,还解决了对象调用构造函数时调用的是真实的创建对象的函数而不是原型链上其他的构造函数。

代码里有表明。

构造函数是原型对象上的一个属性,是对象的创建者。由于我们的原型属性被从新赋值了所以构造函数时继承来的。

这里要说一下,对象是怎样创建,也就是new都干了些什么。

例如:

var a=new b();

其实是这样的,a={};创建了一个给a,然后b.call(a);call里初始化a,在call之前还有一步,就是a的内部原型对象

设置为b的原型属性指向的原型对象。原型上有构造函数属性,构造函数用来创建对象分配内存控件。

大概就这些...看看时间也不早了,碎吧,保持平和的心态切勿浮躁,努力去改变明天,希望一切都会慢慢变好。

以上就是小编为大家带来的全面理解JavaScript中的继承(必看)的全部内容了,希望大家多多支持脚步之家。

Javascript 相关文章推荐
JavaScript触发器详解
Mar 10 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
百度地图自定义控件分享
Mar 04 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 #Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 #Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 #Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 #Javascript
jQuery动态加载css文件实现方法
Jun 15 #Javascript
异步加载JS、CSS代码(推荐)
Jun 15 #Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 #Javascript
You might like
PHP的栏目导航程序
2006/10/09 PHP
PHP与MySQL交互使用详解
2006/10/09 PHP
php生成文件
2007/01/15 PHP
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
物理教育专业毕业生推荐信
2013/11/03 职场文书
酒店员工检讨书
2014/02/18 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
学生保证书范文
2014/04/28 职场文书
药店促销活动策划方案
2014/08/24 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
五年级下册复习计划
2015/01/19 职场文书
简历中自我评价范文
2015/03/11 职场文书
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript