全面理解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 相关文章推荐
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
VUE2.0中Jsonp的使用方法
May 22 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 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的变量总结 新手推荐
2011/04/18 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
php fread函数使用方法总结
2019/05/28 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
js实时获取系统当前时间实例代码
2013/06/28 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
Python中logging模块的用法实例
2014/09/29 Python
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
深入Python函数编程的一些特性
2015/04/13 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
创业计划书中包含的9个方面
2013/12/26 职场文书
中学运动会广播稿
2014/01/19 职场文书
KTV员工管理制度
2015/08/06 职场文书
小学校本教研总结
2015/08/13 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
Go gorilla/sessions库安装使用
2022/08/14 Golang