Prototype使用学习手册指南之base.js

文章出处：http://www.ijavascript.cn/prototype/manual-notes-for-prototype-base.js-32.html

一看名字就知道Class是基类了，先说下此类的作用，然后给大家细细的分析下base.js中的代码
类的创建与继承：

Class.create(): 创建一个类，例如 person=Class.create()

Object.extend(destination, source): 把source中方法属性copy到destination(使用for propertyin source)，需要注意的是，javascript中除了基本类型(Number, Boolean)外都是引用类型，所以这种copy一般只是copy引用而已，destination和source还是指向同一个方法或对象属性(function array object)

这面向对象的编程中，一般通过Class.create新建一个类，如果这个类继承于领一个类，一般使用Object.extend(class.prototype, parentClass.prototype)或者Object.extend(class.prototype, aparentClassInstance)

Object构造函数的扩展：

Object是其他对象实例的构造函数(var a=new Object())，也是所有其他类的父类，对Object直接扩展(注意不是扩展Object.prototype，扩展Object.prototype相当于添加实例方法)相当于为Object类添加静态方法

Object.inspect(object): 调用object的inspect(如果定义了)或toString方法，返回一个对象的字符串表示

Object.keys(object): 返回一个对象的所有属性和方法名称组成的数组, 例如Object.keys(document.body)

Object.values(object):返回一个对象的所有属性和方法的值组成的数组, 例如Object.values(docuement)

Object.clone(object): 返回一个对象的clone版本，其实是执行Object.extent方法把object中的方法属性copy到一个新对象中，然后返回这个对象

函数绑定：

定义了Function对象的两个方法，bind和bindAsEventListener，这两个方法是一个函数的两个方法，对于java、c#程序员来说，看到这个也许感到很惊讶，因为在他们看来函数只是一个程序语句组织结构而已—>怎么还有方法，而且还可以扩展？

这也是javascript等脚本语言相对于java等一个非常强大的功能，函数也是一个对象，函数名就是这个对象的名称，只要你愿意，你也可以使用new Function(…)来定义函数，所以为函数定义方法也就很正常不过了

这两个函数的主要作用是为了解决使用javascript面向对象风格编程中this的引用问题，在javasctipt中this关键字 始终指向调用该函数的对象或者指向使用call，apply方法指定的对象（具体这方面的知识可以自己google一下，以下系列对prototype的介绍也假设读者对javascript语言比较熟悉了，如果不熟悉可以找本 javascript权威指南这本书看看）

要理解这个问题首先要理解 始终指向这个问题，就是this这个关键字比较特殊，不能把他当成一般的变量名看待，最常见的一个错误就是在返回函数的调用中使用this，例如return function(){this.aMethod()}, 当你下次调用这个返回的匿名方法时，这个this引用的内容又指向了调用这个函数的对象了，记住的一点的this是个关键字，不是变量名，不会产生闭包

对Number的扩展(注意num也可以看成对象，其实是在使用的时候系统自动打包成Number对象)：

toColorPart：把数字转换为可以用于表示color的16进制值：例如 7.toColorPart()=>”07″，28.toColorPart()=>”1C”

succ: 返回num++, 但不改变num本身的值，其实就是 return this＋1

times：对从0到这个数字轮流调用一个函数, 例如function a(n){docuement.write(n)}, 10.times(a), 将显示012345678910, 注意函数也是一个对象，而且与其他对象并没有实质的区别

Try对象：

Try对象提供了一个很有趣的功能, 先看一下如下的代码：

var Ajax = {
  getTransport: function() {
    return Try.these(
      function() {return new XMLHttpRequest()},
      function() {return new ActiveXObject(’Msxml2.XMLHTTP’)},
      function() {return new ActiveXObject(’Microsoft.XMLHTTP’)}
    ) || false;
  }
}

Try对象提供了一个方法these, 这个方法接受一个函数类型的参数列表，然后轮流执行这些函数，当其中一个函数没有产生错误时，就停止执行，并且返回这个函数返回的值，自己慢慢体会吧

PeriodicalExecuter(周期性执行器)对象

这个对象是对setInterval方法的简单封装，使用方法如下
var a=new PeriodicalExecuter(callback, frequency) //callback: 执行的函数名 frequency: 每次执行的时间间隔
a.stop()

//一看名字就知道Class是基类了
var Class = {
create: function() {
//this.initialize并没有定义，但看名字就知道是初始化，arguments传递参数
return function() { 
this.initialize.apply(this, arguments);
}
}
}
//抽象类？
var Abstract = new Object();
//为Object对象添加静态方法extend，将source的域、方法(对js来说是一回事)拷贝到destination，也就实现了继承
Object.extend = function(destination, source) {
for (property in source) {
destination[property] = source[property];
}
return destination;
}
//再来一个类方法，这样调用dest=Object(dest,src)和desc=desc.extend(src)就一样了
Object.prototype.extend = function(object) {
return Object.extend.apply(this, [this, object]);
}
/*
为函数类添加bind类方法，应该是对别的对象应用自己，比如ObjectA.someFunction.bind(ObjectB)
补充：这个是prototype的一个核心方法
犀牛书：The first argument to both call( ) and apply( ) is the object on which the function is to be invoked; this //argument becomes the value of the this keyword within the body of the function. 

*/
Function.prototype.bind = function(object) {
var __method = this;
return function() {
__method.apply(object, arguments);
}
}
//同上，这就是经常用到的浏览器事件绑定。对于call和apply方法的区别，犀牛书是这么解释的：
//The apply( ) method is like the call( ) method, except that the arguments to be passed to the function are specified //as an array，所以基本上就是形式区别。
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return function(event) {
__method.call(object, event || window.event);
}
}
//返回hex颜色表示，这都想到了哈哈
Number.prototype.toColorPart = function() {
var digits = this.toString(16);
if (this < 16) return '0' + digits;
return digits;
}
//Try类
var Try = {
//就一个方法these，注意到prototype的类定义基本上用的都是对象直接量，应该高手都是这样写的吧
//这个方法就是把传过来的函数一一调用，返回第一个可用的。
these: function() {
var returnValue;
for (var i = 0; i < arguments.length; i++) {
//lambda估计也是一个和foobar一样的词，记得还有一篇rfc是专门讲解foo的由来的，哎别人的文化阿
var lambda = arguments[i];
try {
returnValue = lambda();
//如果第i个方法没有抛异常，这里就跳出循环了，赞
break;
} catch (e) {}
}
return returnValue;
}
}

/*--------------------------------------------------------------------------*/
//上面这条线是他画的。。。。

//这里创建对象就用到了最开始那个，不明白什么意思，也许这样比new Object()好看？
//看名字就可以知道，定时执行
var PeriodicalExecuter = Class.create();
PeriodicalExecuter.prototype = {
//到这里才看出来Class方法的initialize是怎么回事，同时也就可以解释为什么不用new Object()而用Class.create()了
//这样每次new一个对象都可以调用构造函数，厉害
//这里的两个参数，一个是回调函数，也就是定时执行的函数，另一个就是频率了，单位秒
initialize: function(callback, frequency) {
this.callback = callback;
this.frequency = frequency;
this.currentlyExecuting = false;
//设置了参数之后调用registerCallback，往下看
this.registerCallback();
},
//调用window对象的setInterval方法，this.onTimerEvent是什么？往下看。。。
registerCallback: function() {
setInterval(this.onTimerEvent.bind(this), this.frequency * 1000);
},
//也就是套了一层壳，加了一个try...finally块
onTimerEvent: function() {
if (!this.currentlyExecuting) {
try { 
this.currentlyExecuting = true;
this.callback(); 
} finally { 
this.currentlyExecuting = false;
}
}
}
}

/*--------------------------------------------------------------------------*/

//这个名字好奇怪
function $() {
var elements = new Array();
//循环参数
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
//ft，原来就是getElementById。。。。这个简化一般都得做的，但是用这个名字。。。哈哈，有创意
if (typeof element == 'string')
element = document.getElementById(element);
//一个参数的话就不返回数组了
if (arguments.length == 1) 
return element;
//push...照犀牛书的说法，低版本ie应该不支持吧？
//Availability
//JavaScript 1.2; JScript 5.5; ECMAScript v3 
elements.push(element);
}
return elements;
}

TAG: prototype指南 prototype教程 
kimi post in Prototype框架 at 2007-09-08 17:31:04. 
永久地址:http://www.ijavascript.cn/prototype/manual-notes-for-prototype-base.js-32.html 
在百度中搜索《Prototype使用学习手册指南之base.js》。