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与Number函数的区别
Jan 21 Javascript
flexigrid 参数说明
Nov 23 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 Javascript
基于vue实现简易打地鼠游戏
Aug 21 Javascript
js实现点击选项置顶动画效果
Aug 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缓存机制Output Control详解
2014/07/14 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
python监控文件并且发送告警邮件
2018/06/21 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
python对Excel的读取的示例代码
2020/02/14 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
怎样从/向数据文件读/写结构
2014/11/23 面试题
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
德育标兵事迹材料
2014/08/24 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
法院授权委托书格式
2014/09/28 职场文书
个人租房协议书范本
2014/09/30 职场文书
国庆横幅标语
2014/10/08 职场文书
向女朋友道歉的话
2015/01/20 职场文书
观看建国大业观后感
2015/06/01 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js