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 相关文章推荐
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
简述Jquery与DOM对象
Jul 10 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
vue项目中v-model父子组件通信的实现详解
Dec 10 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
javascript实现切割轮播效果
Nov 28 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/12/14 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
详解Python中的日志模块logging
2015/06/19 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
python重试装饰器的简单实现方法
2019/01/31 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
python创建文本文件的简单方法
2020/08/30 Python
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
为什么使用接口?
2014/08/13 面试题
外贸业务员求职信范文
2013/12/12 职场文书
亲子活动总结
2014/04/26 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
2016春季运动会前导词
2015/11/25 职场文书
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android