概述
JavaScript是一种基于对象的编程语言。它是灵活的，既有面向过程（也就是面向函数）的编程，也有面向对象的编程。因此我称它是基于对象的编程语言。
对于JavaScript的面向过程的编程特性，就不用多说了，学过C语言的，就很容易理解什么是面向函数的编程。我看Prototype源码主要就是来理解在JavaScript中的面向对象编程的。
我在学习Prototype源码时，将结合C、C#、Java来学习和比较JavaScript中的面向对象编程。我阅读的Prototype的版本是1.7.1 。
学习Prototype需要的基础知识
1、什么是JavaScript对象？
在JavaScript中，对象很简单，就是一对花括号 { } 。
2、了解JavaScript编程的语法和句法
了解JavaScript编程的语法和句法，说白了就是了解JavaScript中编程中常用的符合、关键字、变量定义、控制语句、循环语句、数组等等。这些学过C语言的人都知道。
阅读Prototype源码需要的辅助工具
在学校宿舍，用的是路由器上网，联通老是拦截导致打不开网页。这样对学习是个很大的障碍，只能从官方网站上下载离线的API和Doc 。通过离线文档学习了。如果可以上网，就不必下载离线API和Doc了，并且还可以直接看官方提供的Demo的。
面向对象编程
从官方的文档上来看，将Prototype分为3大块，分别是Ajax Section、DOM Section、Language Section。我对这三块的理解是：Language是讲语言的，是基础。DOM Section是对HTML文档的操作。Ajax Section是使用JavaScript和后台通信。
先学习语言部分。
Language
Class对象
|
var Class = (function() { var IS_DONTENUM_BUGGY = (function(){ for (var p in { toString: 1 }) { if (p === 'toString') return false; } return true; })(); function subclass() {}; function create() { var parent = null, properties = $A(arguments); if (Object.isFunction(properties[0])) parent = properties.shift(); function klass() { this.initialize.apply(this, arguments); } Object.extend(klass, Class.Methods); klass.superclass = parent; klass.subclasses = []; if (parent) { subclass.prototype = parent.prototype; klass.prototype = new subclass; parent.subclasses.push(klass); } for (var i = 0, length = properties.length; i < length; i++) klass.addMethods(properties[i]); if (!klass.prototype.initialize) klass.prototype.initialize = Prototype.emptyFunction; klass.prototype.constructor = klass; return klass; } function addMethods(source) { var ancestor = this.superclass && this.superclass.prototype, properties = Object.keys(source); if (IS_DONTENUM_BUGGY) { if (source.toString != Object.prototype.toString) properties.push("toString"); if (source.valueOf != Object.prototype.valueOf) properties.push("valueOf"); } for (var i = 0, length = properties.length; i < length; i++) { var property = properties[i], value = source[property]; if (ancestor && Object.isFunction(value) && value.argumentNames()[0] == "$super") { var method = value; value = (function(m) { return function() { return ancestor[m].apply(this, arguments); }; })(property).wrap(method); value.valueOf = (function(method) { return function() { return method.valueOf.call(method); }; })(method); value.toString = (function(method) { return function() { return method.toString.call(method); }; })(method); } this.prototype[property] = value; } return this; } return { create: create, Methods: { addMethods: addMethods } }; })(); |
上面是Class对象的源码。
为什么说是Class对象呢？
从上面的代码的结构是var Class=(function(){})();
这个结构在JavaScript中，意思是：先声明一个匿名函数，然后就执行这个匿名函数。
在这个匿名函数的内部，有个return 语句，就是函数执行后返回的内容。返回的内容是一个对象：
|
{ create: create, Methods: { addMethods: addMethods } } |
也就是说，最后代码的样子是：
|
var Calss={ create: create, Methods: { addMethods: addMethods } } |
所以我说Class是个对象。
学习过程中，要按照浏览器处理的思维来学习Prototype框架。
浏览器预处理Class对象的过程是：
1）先知道了产生Class对象的匿名函数的整体结构：
然后执行该匿名函数。执行后返回一个对象，将这个返回的对象赋值给Class。
自定义定义工具类的2种方式
从这个匿名函数（也可以称之为匿名类）中，知道在这个函数中声明了3个函数。但是返回的对象中，却只有2个。
create方法的访问方式是Class.create,
addMethods方法的访问方式是Class.Methods.addMethods。但是继续往下看，addMethods并不这样去用。这个就先不管了。
Class.create 就是执行create方法。从这个写法上来看，让我们有种感觉，感觉这种写法和Java中的访问类的静态方法一样。
所以我可以暂且这样认为：在JavaScript中，函数也是类，不过是实例类。对象也可以是类，对象中的函数。因此在自己写工具类的时候，就可以这么做。
例如下面这个例子：将一个字符串倒序。
写了一个js文件StringUtil.js,写了这么一段代码
|
在下面的HTML文件中引用：
|
这个小程序，证明了，我的想法的可行性。但是如果写的工具类中，方法比较多的话，其中某一个或者一些方法只是在这个工具类中的其他方法中使用，也就是说不会开发使用，这样该如何做呢？
在java中，这样的方法，我们一般用private关键字来修饰的，但是JavaScript中没有private、public这样的关键字，怎么做呢？
其实我们可以像Class对象那样去定义自己的工具类。在Class对象中有个方法function subclass(){}
但是return中并没有这个方法。也就是说subclass（）是不能直接访问的。这样无形中就相当于给subclass(){}加了个private关键字一样。
两种方式比较，个人认为第二种方式更好一些。
UI框架中组件初始化的原理
看了Prototype中Clss的源码后，我理解了很多UI框架进行初始化的原理了。
譬如ligerUI、zTree、easyUI等。
|
var Class = (function() { var IS_DONTENUM_BUGGY = (function(){ for (var p in { toString: 1 }) { if (p === 'toString') return false; } return true; })(); function subclass() {}; function create() { // 如果在使用Class.create()时，传递的参数中，第一个是个方法（也就是类），那么就是要继承这个类 var parent = null, properties = $A(arguments); if (Object.isFunction(properties[0])) parent = properties.shift(); // klass代表你要创建的类 function klass() { this.initialize.apply(this, arguments); } // 将Class.Methods给了klass，Class.Methods是{addMethods}，如此就将addMethods方法给了要创建的类：klass // 也就是说，这句话是让你要创建的类的对象klass也具备了addMethods方法。 // 之所以让klass有addMethods方法，是想让klass对象也具备你在调用Class.create()中传递的参数作为属性。 Object.extend(klass, Class.Methods); klass.superclass = parent; klass.subclasses = []; if (parent) { subclass.prototype = parent.prototype; klass.prototype = new subclass; parent.subclasses.push(klass); } // 将传递的参数都变为klass对象的属性 for (var i = 0, length = properties.length; i < length; i++) klass.addMethods(properties[i]); // 判断你要创建的类klass有没有initialize方法，如果没有，就指定一个空方法给它 // 如此一来，你要创建的类中必定有initialize方法。如果你在使用Class.create来创建你的类的时候，传递了 // initialze方法就是表示你自定义了一个initialize方法 if (!klass.prototype.initialize) klass.prototype.initialize = Prototype.emptyFunction; klass.prototype.constructor = klass; return klass; } // 在调用Class.create方法时，你可能传递多个参数，每个参数又是一个自定义比较复杂的对象，这种情况是很有可能的。 function addMethods(source) { var ancestor = this.superclass && this.superclass.prototype, // 将每一个参数中所有的属性名取出赋值给properties properties = Object.keys(source); if (IS_DONTENUM_BUGGY) { // 如果你重写了toString、valueOf方法，那么就使用你自定义的toString、valueOf方法 if (source.toString != Object.prototype.toString) properties.push("toString"); if (source.valueOf != Object.prototype.valueOf) properties.push("valueOf"); } // 对Class.create中每一个参数对象，都要取得他们所有属性，然后再对每个属性进行遍历 for (var i = 0, length = properties.length; i < length; i++) { var property = properties[i], value = source[property]; // 如果属性是个函数，并且函数的第一个参数名是$super，那么就代表要调用父类的对应方法 // 例如子类继承父类，传递的参数中，有个参数中有一个方法和父类中的方法是同名的，并且 // 这个方法的第一个参数是$super，那么就是代表这个方式是使用父类中的这个方法。 if (ancestor && Object.isFunction(value) && value.argumentNames()[0] == "$super") { var method = value; value = (function(m) { return function() { return ancestor[m].apply(this, arguments); }; })(property).wrap(method); value.valueOf = (function(method) { return function() { return method.valueOf.call(method); }; })(method); value.toString = (function(method) { return function() { return method.toString.call(method); }; })(method); } this.prototype[property] = value; } return this; } return { create: create, Methods: { addMethods: addMethods } }; })(); |
官方的demo可以验证理解的正确性，也可用通过官方的demo来辅助自己理解：
