全面理解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 相关文章推荐
jQuery setTimeout()函数使用方法
Apr 07 Javascript
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
JS+Canvas绘制动态时钟效果
Nov 10 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 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分页类
2013/10/26 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
python difflib模块示例讲解
2017/09/13 Python
python+os根据文件名自动生成文本
2019/03/21 Python
python next()和iter()函数原理解析
2020/02/07 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
社区安全检查制度
2014/02/03 职场文书
八一慰问活动方案
2014/02/07 职场文书
《老山界》教学反思
2014/04/08 职场文书
竞聘演讲稿
2014/04/24 职场文书
工作散漫检讨书
2014/09/16 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
起诉书格式范文
2015/05/20 职场文书
盲山观后感
2015/06/11 职场文书
python xlwt模块的使用解析
2021/04/13 Python