全面理解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 判断指定字符串是否为有效数字
May 11 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
最佳JS代码编写的14条技巧
Jan 09 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 Javascript
Vue实现Layui的集成方法步骤
Apr 10 Javascript
用webAPI实现图片放大镜效果
Nov 23 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 smarty 二级分类代码和模版循环例子
2011/06/01 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
奇怪的PHP引用效率问题分析
2012/03/23 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
php上传excel表格并获取数据
2017/04/27 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
python+flask实现API的方法
2018/11/21 Python
Python字典遍历操作实例小结
2019/03/05 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
python判断自身是否正在运行的方法
2019/08/08 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
新闻发布会活动策划方案
2014/09/15 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
离婚律师函范本
2015/05/27 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
使用Apache Camel表达REST服务的方法
2022/06/10 Servers