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 相关文章推荐
利用js对象弹出一个层
Mar 26 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
jQuery中队列queue()函数的实例教程
May 03 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
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
php浏览历史记录的方法
2015/03/10 PHP
文本加密解密
2006/06/23 Javascript
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
javascript 学习之旅 (3)
2009/02/05 Javascript
Script的加载方法小结
2011/01/12 Javascript
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
详解Python中with语句的用法
2015/04/15 Python
python如何获取服务器硬件信息
2017/05/11 Python
python放大图片和画方格实现算法
2018/03/30 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
Python Django view 两种return的实现方式
2020/03/16 Python
利用python在excel中画图的实现方法
2020/03/17 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
班组长安全生产职责
2013/12/16 职场文书
会计与审计毕业生自荐信范文
2013/12/30 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
作风建设年度心得体会
2014/10/29 职场文书
电工生产实习心得体会
2016/01/22 职场文书