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 相关文章推荐
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
关于ExtJS4.1:快捷键支持的问题
Apr 24 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
React Ant Design树形表格的复杂增删改操作
Nov 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
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
document.createElement()用法
2013/03/13 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
Python3中的2to3转换工具使用示例
2015/06/12 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
Python爬虫与反爬虫大战
2020/07/30 Python
九年级家长会邀请函
2014/01/15 职场文书
支教自我鉴定
2014/01/18 职场文书
会计个人实习计划书
2014/08/15 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
二审代理词范文
2015/05/25 职场文书
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android