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 相关文章推荐
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 Javascript
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
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
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
Javascript 遍历对象中的子对象
2009/07/03 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
Python open读写文件实现脚本
2008/09/06 Python
python检测远程服务器tcp端口的方法
2015/03/14 Python
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
python cs架构实现简单文件传输
2020/03/20 Python
python如何删除文件中重复的字段
2019/07/16 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
python常用数据重复项处理方法
2019/11/22 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
升职自荐信怎么写
2015/03/05 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python