全面理解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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
javascript测试题练习代码
Oct 10 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 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多种序列化与反序列化的方法
2013/06/06 PHP
PHP CodeBase:将时间显示为"刚刚""n分钟/小时前"的方法详解
2013/06/06 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
经验几则 推荐
2006/09/05 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
python查找指定具有相同内容文件的方法
2015/06/28 Python
python sys.argv[]用法实例详解
2018/05/25 Python
python实现多张图片拼接成大图
2019/01/15 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
Pytorch之保存读取模型实例
2019/12/30 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
巴西网上药房:onofre
2016/11/21 全球购物
行政人员工作职责
2013/12/05 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
承诺书模板
2014/08/30 职场文书
七一建党日演讲稿
2014/09/05 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
安全温馨提示语大全
2015/07/14 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android