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中实现暂停的几篇文章
Mar 04 Javascript
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
纯JavaScript手写图片轮播代码
Oct 20 Javascript
详解JavaScript树结构
Jan 09 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 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
深入PHP FTP类的详解
2013/06/13 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
python基础教程之数字处理(math)模块详解
2014/03/25 Python
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
python 拼接文件路径的方法
2018/10/23 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
python3代码中实现加法重载的实例
2020/12/03 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
施工安全责任书
2014/04/14 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
拾金不昧表扬信
2015/01/16 职场文书
单位租车协议书
2015/01/29 职场文书
财政局长个人总结
2015/03/04 职场文书
科技活动总结范文
2015/05/11 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
深入理解go缓存库freecache的使用
2022/02/15 Golang
python_tkinter事件类型详情
2022/03/20 Python
python+opencv实现目标跟踪过程
2022/06/21 Python