全面理解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 相关文章推荐
预加载css或javascript的js代码
Apr 23 Javascript
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
js替换字符串的所有示例代码
Jul 23 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
详解JS ES6编码规范
May 07 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
实用函数3
2007/11/08 PHP
php magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
PHP实时显示输出
2008/10/02 PHP
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
javascript调试说明
2010/06/07 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
js实现聊天对话框
2020/02/08 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
Vue $attrs & inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
Python enumerate内置库用法解析
2020/02/24 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
有针对性的求职自荐信
2013/11/14 职场文书
体育口号大全
2014/06/18 职场文书
支行行长竞聘报告
2014/11/06 职场文书
工程竣工验收申请报告
2015/05/15 职场文书