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实现的一个include函数
Jul 21 Javascript
获取当前网页document.url location.href区别总结
May 10 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
JavaScript 常见的继承方式汇总
Sep 17 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
php中用数组的方法设置cookies
2011/04/21 PHP
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
js表单登陆验证示例
2016/10/19 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
python实现随机漫步算法
2018/08/27 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
什么是接口(Interface)?
2013/02/01 面试题
总经理司机职责
2014/02/02 职场文书
中学生获奖感言
2014/02/04 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
新娘婚礼致辞
2015/07/27 职场文书
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers
Python字符串常规操作小结
2022/04/03 Python
Hive日期格式转换方法总结
2022/06/25 数据库