全面理解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中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
微信小程序提交form操作示例
Dec 30 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中动态显示签名和ip原理
2007/03/28 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
PHP中集成PayPal标准支付的实现方法分享
2012/02/06 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
python3音乐播放器简单实现代码
2020/04/20 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
python 多个参数不为空校验方法
2019/02/14 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
实现Python与STM32通信方式
2019/12/18 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
django admin 添加自定义链接方式
2020/03/11 Python
python将音频进行变速的操作方法
2020/04/08 Python
Python调用C/C++的方法解析
2020/08/05 Python
重构Python代码的六个实例
2020/11/25 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
一名老师的自我评价
2014/02/07 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python