全面理解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 相关文章推荐
解决js正则匹配换行问题实现代码
Dec 10 Javascript
php与js的区别是什么
Aug 05 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 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截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
PHP可变函数学习小结
2015/11/29 PHP
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
Python中IPYTHON入门实例
2015/05/11 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
浅谈Python中(&,|)和(and,or)之间的区别
2019/08/07 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
阿尔卡特(中国)的面试题目
2014/08/20 面试题
歌唱比赛主持词
2014/03/18 职场文书
学校对教师的评语
2014/04/28 职场文书
党员目标管理责任书
2014/07/25 职场文书
学生逃课检讨书
2015/02/17 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS
mysql查询结果实现多列拼接查询
2022/04/03 MySQL
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS