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 parseInt 函数分析(转)
Mar 21 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
微信小程序和百度的语音识别接口详解
May 06 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 Javascript
微信小程序实现倒计时功能
Nov 19 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
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
javascript不同页面传值的改进版
2008/09/30 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
Nodejs进阶之服务端字符编解码和乱码处理
2017/09/04 NodeJs
js中apply与call简单用法详解
2017/11/06 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
Python转码问题的解决方法
2008/10/07 Python
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
【python】matplotlib动态显示详解
2019/04/11 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
python3 xpath和requests应用详解
2020/03/06 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
Python读写Excel表格的方法
2021/03/02 Python
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
教师个人的自我评价分享
2014/01/02 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
国贸专业求职信
2014/06/28 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
MySQL多表查询机制
2022/03/17 MySQL
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技