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 相关文章推荐
JavaScript CSS菜单功能 改进版
Dec 20 Javascript
JS backgroundImage控制
May 19 Javascript
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
js触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
关于JS管理作用域的问题
Apr 10 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
详解如何在Vue项目中发送jsonp请求
Oct 25 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新手上路(十四)
2006/10/09 PHP
PHP中的extract的作用分析
2008/04/09 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
Python 字典dict使用介绍
2014/11/30 Python
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
Python常见异常分类与处理方法
2017/06/04 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
电大自我鉴定
2013/10/27 职场文书
商务英语毕业生自荐信范文
2013/11/08 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
2014年度个人工作总结
2014/11/07 职场文书
给客户的检讨书
2014/12/21 职场文书
辞职信格式模板
2015/02/27 职场文书