全面理解JavaScript中的继承(必看)

 更新时间:2016年06月16日 08:52:11   投稿:jingxian   我要评论
下面小编就为大家带来一篇全面理解JavaScript中的继承(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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监听全部Ajax请求事件的方法

    分享JavaScript监听全部Ajax请求事件的方法

    最近在做一个小项目,引入了第三方js文件,这个文件会调用XMLHttpRequest向服务器发送 Ajax请求,但是我有需要监听其Ajax请求的某些事件,以便额外地执行其他脚本。于是稍微看了看监听 Ajax请求的事件方法,在这里分享给大家。有需要的朋友们可以参考借鉴。
    2016-08-08
  • 关于原生js中bind函数的简单实现

    关于原生js中bind函数的简单实现

    下面小编就为大家带来一篇关于原生js中bind函数的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 收藏一个代码

    收藏一个代码

    收藏一个代码...
    2006-08-08
  • AngularJs+Bootstrap实现漂亮的计算器

    AngularJs+Bootstrap实现漂亮的计算器

    这篇文章主要为大家详细介绍了angularJs+Bootstrap实现漂亮的计算器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • javascript中callee与caller的区别分析

    javascript中callee与caller的区别分析

    有些小伙伴可能会问caller,callee 是什么?在javascript 中有什么样的作用?那么本篇会对于此做一些基本介绍。希望能够对大家理解javascript中的callee与caller有所帮助。
    2015-04-04
  • layui 表单标签的校验方法

    layui 表单标签的校验方法

    今天小编就为大家分享一篇layui 表单标签的校验方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js parentElement和offsetParent之间的区别

    js parentElement和offsetParent之间的区别

    这里主要说的是 offsetParent 属性,这个属性在 MSDN 的文档中也没有解释清楚,这就让人更难理解这个属性。 这几天在网上找了些资料看看,再加上自己的一些测试,对此属性有了那么一点的了解,在这里总结一下。
    2010-03-03
  • Bootstrap CSS组件之导航(nav)

    Bootstrap CSS组件之导航(nav)

    这篇文章主要为大家详细介绍了Bootstrap CSS组件之导航(nav),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • javascript的alert box在java中如何显示多行

    javascript的alert box在java中如何显示多行

    这篇文章主要介绍了javascript的alert box在java中如何显示多行,需要的朋友可以参考下
    2014-05-05
  • Vim快速合并行及vim 将文件所有行合并到一行

    Vim快速合并行及vim 将文件所有行合并到一行

    Vim是一个类似于Vi的著名的功能强大、高度可定制的文本编辑器,在Vi的基础上改进和增加了很多特性.这篇文章主要介绍了Vim快速合并行及vim 将文件所有行合并到一行,需要的朋友可以参考下
    2017-11-11

最新评论