在继承方面,js还是弱项呀。发现在继承的时候constructor和initialize之分。网上文章没有说明二者关系。看了源码才发现二者的区别呀。

首先我用coffeescript来实现js的继承,过程中发现一个问题。

就是通过用Backbone来构造单页面程序的时候,如果父类或子类中定义了constructor而没有super。那么很高兴的告诉你,在子类注册的events是不工作滴。

这里提前告诉你是因为父类中如果没有super,择不会执行默认的构造器来构造Backbone.View类。而这个类在构造的时候工作是初始化类中的initialize和绑定events事件(基于Jquery的delegate)

不信你试试看。例如:

class OA extends Backbone.View
constructor:->
#super;
console.log "OA constructor";
initialize :->
console.log "OA init";
class A extends OA
constructor:->
#super;
console.log "A constructor";
initialize:->
console.log "A init";
events :
"click #btn1" : "btnClick"
btnClick : ->
console.log "btn click 1";

就是这样你在A中定义了constructor,而没有执行super,或者你在A中定义了construto且定义了super而在OA中的construtor构造中没有super。子类A中的events就没有执行。

根据这个一步步分析原因。

1:coffeescript在定义类中,如果类中没有构造constructor,则它会自己构造constructor。如果指定了constructor那么就会按照指定的来执行.

源码:

指定了constructor

OA = (function(){
function e(){console.log("OA constructor")}
})(Backbone.View)

未定义construto或定义并且super了

__extend = function(t,n){
function i(){
this.constructor = t;
}
for(var r in n) e.call(n,r) && (t[r]=n[r]);
i.prototype = n.prototype;
t.prototype = new i;
t.__super__ = n.prototype;
return t;
}
OA = (function(n){
function e(){
console.log("OA constructor")
_ref = e.__super__.constructor.apply(this,arguments);//这个等价于Backbone.View.prototype.constructor.apply(this,arguments);
}
__extend(e,n);//这个是用来继承的。
})(Backbone.View)

ok刨到这里还得继续往祖坟刨,看下这个源码再解释。

Backbone.View不用说。上面就几个属性和方法。可以看到为什么类定义了initialize后自动调用的原因了吧。

还有你也知道为什么view中events定义后就可以处理事件了吧(因为delegateEvents初始化了)。

这是部分代码,如果有js高级教程经验的可以看下backbone.js关于view类的源码。

Backbone.View.prototype是通过underscore的extend继承Events和opt拓展属性组合而成的(如果不懂underscore.js的extend请看这里:http://underscorejs.org/#extend)。View.prototype==Backbone.View因为function是引用调用,公用一片内存,

所以View.prototype的变化会影响到Backbone.View的prototype.

再看e.__super == Backbone.View.prototype之后Backbone.View.prototype.constructor就是由Backbone.View的构造的,所以e.__super__.constructor则就是Backbone.View.apply(this,arguments);所以执行Backbone.View就有了一些关于事件,initialize函数的一些初始化。在类中如果super了。就会执行parent的constructor。直到执行继承Backbone.View的constructor即可。

不知道大家明白了与否。

也就是super执行的流程如下:

child(constructor)->parent(constructor).......//如果constructor中有super.就是这个执行顺序。只要继承类中某个类没有super。择constructor就停止了构造。

ok,到了这里,我想大概都应该明白了。所以如果以后涉及到继承。请谨慎定义constructor。如果你需要在子类中定义事件,而有继承了父类。那你一定要检查一下父类的constructor和子类的constructor是否super了(coffee中的super就是调用父类的构造函数,然-child.__super__.constructor.apply(this,arguments)).否则你子类的events对象就不会初始化,从而导致点击无效果。

简说一下coffeescript的constructor是如何导致Backbone.View的事件无法正常工作的.的更多相关文章

  1. vue添加滚动事件,解决简书Carol_笑一笑方案中vue移除滚动事件失效的问题

    在写项目的时候,遇到了需要添加滚动事件的问题,在简书Carol_笑一笑这里找到了解决方案.代码如下 <script> export default { name:"vue-scr ...

  2. Java Annotation 及几个常用开源项目注解原理简析

    PDF 版: Java Annotation.pdf, PPT 版:Java Annotation.pptx, Keynote 版:Java Annotation.key 一.Annotation 示 ...

  3. CoffeeScript简介 <二>

    集合与迭代 .. 与 ... 先看例子: arr = ["a1", "a2", "a3", "a4", "a5 ...

  4. 《大道至简》第一章读后感(java语言伪代码)

    中秋放假之际读了建民老师介绍的<大道至简>的第一章,其中以愚公移山的故事形象的介绍向介绍编程的精义.愚公的出现要远远早于计算机发展的历史,甚至早于一些西方国家的文明史.但是,这个故事许是我 ...

  5. CentOS安装使用.netcore极简教程(免费提供学习服务器)

    本文目标是指引从未使用过Linux的.Neter,如何在CentOS7上安装.Net Core环境,以及部署.Net Core应用. 仅针对CentOS,其它Linux系统类似,命令环节稍加调整: 需 ...

  6. React中类定义组件constructor 和super

    刚开始学习React没多久,在老师的教程里看到了类组件的使用示例,但是和资料上有些冲突,而引发了一些疑问: 类组件中到底要不要定义构造函数constructor()? super()里边到底要不要传入 ...

  7. Scala编程--函数式对象

    本章的重点在于定义函数式对象,也就是说,没有任何可变状态的对象的类.作为运行的例子,我们将创造若干把分数作为不可变对象建模的类的变体.在这过程中,我们会展示给你Scala面向对象编程的更多方面:类参数 ...

  8. Backbone框架浅析

    Backbone是前端mvc开发模式的框架.它能够让view和model相分离,让代码结构更清晰简答,开发进度加快,维护代码方便.但是,现在出了一种mvvm框架,它是下一代前端mvc开发模式的框架,代 ...

  9. AngularJS服务中serivce,factory,provider的区别

    Angular服务是一个由服务工厂创建的单例对象.这些服务工厂是由 service provider 依次创建的.而service providers是构造函数.它们必须包含一个$get属性用于在实例 ...

随机推荐

  1. 邮件应用Acompli和日历应用Sunrise(传微软曾考虑以80亿美元收购企业通讯公司Slack)

    http://tech.163.com/16/0305/10/BHCU8EHO000915BD.html http://www.cnbeta.com/articles/480835.htm

  2. 与众不同 windows phone (4) - Launcher(启动器)

    原文:与众不同 windows phone (4) - Launcher(启动器) [索引页][源码下载] 与众不同 windows phone (4) - Launcher(启动器) 作者:weba ...

  3. Mac与Window之间的共享文件

    Mac访问Window: Finder 菜单 “前往” ,然后“连接服务器”,在服务器地址输入 smb://windows主机名或ip地址/共享名(前提window已设置共享文件) Windows访问 ...

  4. C++内存管理学习笔记(5)

    /****************************************************************/ /*            学习是合作和分享式的! /* Auth ...

  5. linux 查看网络负载

    netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' 前面的 netstat -n是netstat的命令,windo ...

  6. 再说Java EE

    说到JavaEE(曾经叫J2EE)是什么,你可能回答:JavaEE是一组规范,这么说是没错,可是自己不认为这个答案非常大.非常空么?什么又是规范?规范能组成应用么?能在JVM中跑起来么?要理解这些,先 ...

  7. 运行Dos命令并得到dos的输出文本(使用管道函数CreatePipe和PeekNamedPipe)

    function RunDOS(const CommandLine: string): string;var  HRead, HWrite: THandle;  StartInfo: TStartup ...

  8. jsp 中对jar 包的引用

    <%@ page language="java" import="你需要的带包名的类" pageEncoding="gb2312"%& ...

  9. Java泛型之<T>

    这里不讲泛型的概念和基础知识,就单纯的就我的理解说一下泛型中的<T> 一. <T> 下面的一段码就可以简单使用了<T>参数,注释就是对<T>的解释. p ...

  10. 使用Python在2M内存中排序一百万个32位整数

    译言网 | 使用Python在2M内存中排序一百万个32位整数 使用Python在2M内存中排序一百万个32位整数 译者:小鼠 发表时间:2008-11-13浏览量:6757评论数:2挑错数:0 作者 ...