Prototype的Class.create函数解析


Posted in Javascript onSeptember 22, 2011
/** 
* 一个设计精巧的定时执行器 
* 首先由 Class.create() 创建一个 PeriodicalExecuter 类型, 
* 然后用对象直接量的语法形式设置原型。 
* 
* 需要特别说明的是 rgisterCallback 方法,它调用上面定义的函数原型方法bind, 并传递自己为参数。 
* 之所以这样做,是因为 setTimeout 默认总以 window 对象为当前对象,也就是说,如果 registerCallback 方法定义如下的话: 
* registerCallback: function() { 
* setTimeout(this.onTimerEvent, this.frequency * 1000); 
* } 
* 那么,this.onTimeoutEvent 方法执行失败,因为它无法访问 this.currentlyExecuting 属性。 
* 而使用了bind以后,该方法才能正确的找到this,也就是PeriodicalExecuter的当前实例。 
*/ 
var PeriodicalExecuter = Class.create(); 
PeriodicalExecuter.prototype = { 
initialize: function(callback, frequency) { 
this.callback = callback; 
this.frequency = frequency; 
this.currentlyExecuting = false; this.registerCallback(); 
}, 
registerCallback: function() { 
setTimeout(this.onTimerEvent.bind(this), this.frequency * 1000); 
}, 
onTimerEvent: function() { 
if (!this.currentlyExecuting) { 
try { 
this.currentlyExecuting = true; 
this.callback(); 
} finally { 
this.currentlyExecuting = false; 
} 
} 
this.registerCallback(); 
} 
}

具体Class.create()背后做了什么,具体来看看Class的实现。
/** 
* 创建一种类型,注意其属性 create 是一个方法,返回一个构造函数。 
* 一般使用如下 
* var X = Class.create(); 返回一个类型,类似于 java 的一个Class实例。 
* 要使用 X 类型,需继续用 new X()来获取一个实例,如同 java 的 Class.newInstance()方法。 
* 
* 返回的构造函数会执行名为 initialize 的方法, initialize 是 Ruby 对象的构造器方法名字。 
* 此时initialize方法还没有定义,其后的代码中创建新类型时会建立相应的同名方法。 
*/ 
var Class = { 
create: function() { 
return function() { 
this.initialize.apply(this, arguments); 
} 
} 
}

Class.create实际上是返回一个函数,那么new的时候,做了些什么呢。参照MDN

When the code new foo(...) is executed, the following things happen:

A new object is created, inheriting from foo.prototype.
The constructor function foo is called with the specified arguments and this bound to the newly created object. new foo is equivalent to new foo(), i.e. if no argument list is specified, foo is called without arguments.
The object returned by the constructor function becomes the result of the whole new expression. If the constructor function doesn't explicitly return an object, the object created in step 1 is used instead. (Normally constructors don't return a value, but they can choose to do so if they want to override the normal object creation process.)
new的时候会执行该返回的函数,即执行this.initialize.apply(this, arguments); 此时的this就是新生成的对象,这也就是说了所有对象的初始化工作全部委托给initialize函数了。

-------

这里为什么要把自己的initialize方法绑定到自己身上??

Javascript 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
vue组件生命周期详解
Nov 07 Javascript
vue mounted组件的使用
Jun 18 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
Javascript中的this绑定介绍
Sep 22 #Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 #Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 #Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 #Javascript
extjs 初始化checkboxgroup值的代码
Sep 21 #Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 #Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 #Javascript
You might like
网页自动跳转代码收集
2009/09/27 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
2014/10/29 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
wxpython 学习笔记 第一天
2009/02/09 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
白色公司:The White Company
2017/10/11 全球购物
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
药物学专业学生的自我评价
2013/10/27 职场文书
职业技术学校毕业生推荐信
2013/12/03 职场文书
报到证丢失证明
2014/01/11 职场文书
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
超市中秋节促销方案
2014/03/21 职场文书
竞聘书格式及范文
2014/03/31 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
党员演讲稿
2014/09/04 职场文书
工作证明格式及范本
2014/09/12 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
Python办公自动化解决world文件批量转换
2021/09/15 Python