全面理解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 注册事件代码
Jan 27 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
JS正则表达式验证中文字符
May 08 Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
vue - props 声明数组和对象操作
Jul 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读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
php输入流php://input使用浅析
2014/09/02 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
PHP队列用法实例
2014/11/05 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
vue3.0 上手体验
2020/09/21 Javascript
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
python opencv实现运动检测
2018/07/10 Python
简单谈谈python基本数据类型
2018/09/26 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
Java如何支持I18N?
2016/10/31 面试题
前台接待岗位职责
2013/12/03 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
运动员加油词
2015/07/18 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android