全面理解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 继承的实现
Jul 09 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
Javascript执行流程细节原理解析
May 14 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
js和php邮箱地址验证的实现方法
2014/01/09 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
模拟select的代码
2011/10/19 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
angular2使用简单介绍
2016/03/01 Javascript
js轮播图代码分享
2016/07/14 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
python操作MySQL数据库具体方法
2013/10/28 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
python实现支付宝转账接口
2019/05/07 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
Django models文件模型变更错误解决
2020/05/11 Python
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书