全面理解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实现的分页函数
Dec 22 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 Javascript
vue+iview实现文件上传
Nov 17 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
深入浅析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的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
php实现的二分查找算法示例
2017/06/20 PHP
PHP getName()函数讲解
2019/02/03 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
Python字符转换
2008/09/06 Python
python实现装饰器、描述符
2018/02/28 Python
Django框架实现的分页demo示例
2019/05/25 Python
python是否适合网页编程详解
2019/10/04 Python
如何用python免费看美剧
2020/08/11 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
优秀团支部事迹材料
2014/02/08 职场文书
采购助理岗位职责
2014/02/16 职场文书
幼儿园家长寄语
2014/04/02 职场文书
生物科学专业自荐书
2014/06/20 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书