Javascript面向对象研究心得

这段时间正好公司项目需要，需要修改fullcalendar日历插件，有机会深入插件源码。正好利用这个机会，我也大致学习了以下JS的面向对象编程，感觉收获还是比较多的。

所以写了下面这篇文章希望跟大家探讨探讨JS的面向对象，本人资历尚浅，还望各位大神多多指教。

总述：

现在的发展趋势是，JS越来越面向对象化。而JS本身并未像Java，C#等语言，实现了明显的继承，封装等，我们需要通过JS本身的方式来模拟这些面向对象的方式。

Jquery的一些东西：

1.each方法：

    这是在js面向对象编程中十分常用的一种方式，each方法使dom结构循环变得简洁，它可以遍历数组，对象，json等

$(selector).each(function(index,element)) 或  $.each(selector,function(index,element))

 调用例子：

 var arr1 = [ "aaa", "bbb", "ccc" ];      
  $.each(arr1, function(i,val){      
      alert(i);       //输出： 0，1，2
      alert(val);      //输出：aaa，bbb，ccc
  });  

参数selector可以是dom元素（ $("input:hidden") ），json（ { one: 1 , two: 2 , three: 3 } ）等等

当参数是json格式时，传入函数的index就变为了json元素的key

看下jQuery中的each实现（网络摘抄） 

    function (object, callback, args) {
//该方法有三个参数:进行操作的对象obj，进行操作的函数fn，函数的参数args
        var name, i = 0,length = object.length;
        if (args) {
            if (length == undefined) {
                for (name in object) {
                    if (callback.apply(object[name], args) === false) {
                        break;
                    }
                }
            } else {
                for (; i < length;) {
                    if (callback.apply(object[i++], args) === false) {
                        break;
                    }
                }
            }
        } else {
            if (length == undefined) {
                for (name in object) {
                    if (callback.call(object[name], name, object[name]) === false) {
                        break;
                    }
                }
            } else {
                for (var value = object[0]; i < length &&  !== false; value = object[++i]) {}
                /*object[0]取得jQuery对象中的第一个DOM元素，通过for循环，
                 得到遍历整个jQuery对象中对应的每个DOM元素，通过 callback.call( value,i,value);
                 将callback的this对象指向value对象，并且传递两个参数,i表示索引值，value表示DOM元素；
                 其中callback是类似于 function(index, elem) { ... } 的方法。
                 所以就得到 $("...").each(function(index, elem){ ... });
                 */
            }
        }
        return object;
    }
    来源： http://www.cnblogs.com/xiaojinhe2/archive/2011/10/12/2208740.html

上述中，回调函数callback作为参数传入， callback.call(value, i, value)这部分实际上限制了callback传入时只会使用i，value两个参数。

在把callback作为参数的函数中，会定义callback实际的参数列表，外部定义callback时，需遵循此参数列表，最常用的例子就是jqueryAJAX中，调用成功返回的success函数或error函数。

 

JS高级特性：

1.

     ===运算符

    

    || ，&& 运算符     

 

2.函数作为值进行参数传递

jquery的AJAX是函数作为值传递的好例子

js中的函数传递都是按值进行传递的，函数名就是对象的引用，它使得函数可以向任何对象一样作为参数进行传递，因为这一特性JS有了更大的灵活性。

我们可以定义带有函数参数的函数，限定传入函数的参数，而不限定对于参数的实现（callback的原理）

下图为研究fullcalendar插件时的，插件定义了对日历元素的遍历函数，对每个元素的操作则作为callback函数传入，这样我们可以对不同元素操做的遍历进行复用

function segmentElementEach(segments, callback) { // TODO: use in AgendaView?
	for (var i=0; i




注意下面这种时尚大气的用法，有点像接口，但更开放

// report the elements to the View, for general drag/resize utilities
		segmentElementEach(segments, function(segment, element) {
			reportEventElement(segment.event, element);
		});

		// attach mouse handlers
		//attachHandlers(segments, modifiedEventId);

		// call `eventAfterRender` callback for each event
		segmentElementEach(segments, function(segment, element) {
			trigger('eventAfterRender', segment.event, segment.event, element);
		});

4.JS boolean

    在JS编程中，尤其是面向对象编程，经常会向一些判断语句传入一些对象，如（fullcalendar插件中截取）：

// the container where the initial HTML will be rendered.
		// If `doAppend`==true, uses a temporary container.
		var renderContainer = doAppend ? $("
") : finalContainer;

在JS中，判断语句会将传入值转换成Boolean后判断

转换规则：

数据类型	转为true的值	转为false的值
Boolean	true	false
String	任何非空字符串	“”空字符串
Number	任何非零数值	0和NaN
Object	任何对象	null
Undefined	n/a	undefined

JS面向对象：

1.argument对象 

在JavaScript的每一个函数里存在一个上下文相关的名为arguments的变量，它的行 为 类 似 于一 个 伪 数组， 包含 了 传给 函 数的 所 有 参数，这个对象存在于每个函数的上下文中。

   argument[0]表示函数调用时传入的第一个参数， argument[1]表示第二个参数，由此类推

   若修改 argument的值，则对应的出入参数也跟着修改。

argument对象在JS模拟函数重载时有很大的用处

2.this

在任何语言中，包括操作系统，上下文这个概念总是不可获取，我们可以把上下文理解成当前程序执行的环境。

在JS中，这个上下文通过this来实现，this总是指向当前工作的上下文对象。在全局环境中，this指向window对象。

在函数调用时，可以通过call和apply方法来改变函数执行的上下文对象，this就会指向新的对象。这在后续的继承中也会提及。

关于this的访问：

在这个例子中，在getNameFunc函数内部取到的this不是object对象的this，而是window全局对象，因为object.getNameFunc()实际返回函数名getNameFunc，这时，调用函数的环境变为了全局环境，this因此变成了window。

JS中，每个函数调用时都会自动取得this和arguments两个特殊变量。

1. <script type="text/javascript">
2. var name = "The Window";
4. var object = {
5. name : "My Object",
7. getNameFunc : function(){
8. return function(){
9. return this.name;
10. };
11. }
12. };
14. alert(object.getNameFunc()()); //"The Window"
15. script>

3.函数重载

JS与java，c#的面向对象语言不同，函数没有重载的概念，同样的函数名后面的会覆盖前面的（JS函数名就是个引用）。

而JS的重载则可以通过 argument对象来实现，如下是从《Javascript 面向对象编程》一书中截取。

可以通过 argument的length属性判断函数调用时的参数列表，结合typeof类型判断，可以实现函数的重载

//一个简单的用来发送消息的函数
function sendMessage( msg, obj ) {
//如果同时提供了一个消息和一个对象
if ( arguments.length == 2 )
//就将消息发给该对象
obj.handleMsg( msg );

else	//否则，刚假定只有消息被提供

//于是显示该消息
alert( msg );
}

4.JS作用域

JS作用域以函数为界限，而没有块约束（for，if，while等），所以在for中定义的var变量实际上在for循环外部依然起作用。

注意：在函数内部未使用var关键字产生的变量，可在全局访问

5.闭包

简单的说，闭包就是内层函数引用外层变量的手段,而外层则无法访问内层的变量，是否闭包是对外层变量的封装，函数是否作为隔离之用？（在函数的生命周期内，外层无法影响变量）

结合 《Javascript 面向对象编程》和 网上找的各种资料，我总结了闭包的以下几种用法。

（1）简单的封装函数，把实现业务的代码和参数分开，避免混乱的代码调用方式。

    以下为示例代码（取自： 《Javascript 面向对象编程》 ）

//用来延迟显示消息的通用函数
function delayedAlert( msg, time ) {
//初始化一个被封套的函数
setTimeout(function(){
//此函数使用了来自封套它的函数的变量msg
alert( msg );
}, time );
}

其实本人感觉，这好像并没体现出闭包的什么特点，倒反而像是简单的封装

（2）匿名自执行函数

    在JS编写过程中，经常会在全局存放很多变量，包括很多临时变量，这常常会对其他的函数造成影响，使用闭包可以解决这一问题。

    以下例子来自  http://blog.csdn.net/sunlylorn/article/details/6534610

1. var datamodel = {
2. table : [],
3. tree : {}
4. };
6. (function(dm){
7. for(var i = 0; i < dm.table.rows; i++){
8. var row = dm.table.rows[i];
9. for(var j = 0; j < row.cells; i++){
10. drawCell(i, j);
11. }
12. }
14. //build dm.tree
15. })(datamodel);

我们无需去维护函数中的变量，执行结束后内部变量会被释放，而不会影响到全局（避免污染）

（3）设计模式中的单例模式

在single以外是无法访问unique的，并且采用匿名函数，只能初始化一次

1. var single = (function(){
2. var unique;
3. function Construct(){
4. // ... 生成单例的构造函数的代码
5. }
7. unique = new Constuct();
9. return unique;
10. })();
11. 来源： <http://blog.chinaunix.net/uid-26672038-id-3886959.html>

（4）模拟面向对象类模板

1. function Person(){
2. var name = "default";
4. return {
5. getName : function(){
6. return name;
7. },
8. setName : function(newName){
9. name = newName;
10. }
11. }
12. };
15. var john = Person();
16. print(john.getName());
17. john.setName("john");
18. print(john.getName());
20. var jack = Person();
21. print(jack.getName());
22. jack.setName("jack");
23. print(jack.getName());
25. 运行结果如下：
27. default
28. john
29. default
30. jack
31. 来源：http://blog.csdn.net/sunlylorn/article/details/6534610

(5)提供引用变量的创建值，而非其他变化后的值

//id为"main"的一个元素
var obj = document.getElementById("main");
//用来绑定的items数组
var items = [ "click", "keypress" ];
//遍历items中的每一项
for ( var i = 0; i < items.length; i++ ) {
//用自执行的匿名函数来激发作用域
    (function(){
//在些作用域内存储值
        var item = items[i];
//为obj元素绑定函数
        obj[ "on" + item ] = function() {
//item引用一个父级的变量，
//该变量在此for循环的上文中已被成功地scoped(?)
            alert( "Thanks for your " + item );
        };
    })();
}

1. 4.JS中方法访问范围

（1）共有方法

 介绍之前先说下prototype的概念。

prototype是所有JS对象共有的构造对象。prototype本身也是对象，可以给其附加方法，属性，prototype添加的方法，属性所有主对象的实例共享。

（2）私有方法

所有函数内部定义的属性，方法，未绑定到this上下文对象的，在函数外部是无法访问到的，例子如下：

1. function Person(){
2.  //都是私有的
3. var name;
4. function move(){
5.  
6. }
7. }

（3）成员方法（本人类比java，c#等语言，姑且叫他成员方法）

1. function Person(name){
2. var name;
3. function moveUp(){
4. alert(name+" move");
5. }
6. this.moveUp = moveUp;
8. }
9. var jack = new Person("jack");
10. jack.moveUp();

(4)通过成员方法访问变量，如上例访问name

(5)静态方法

静态方法类似于java等语言，可以直接通过累访问。

JS中的静态方法，实际可以看做函数对象的属性，而不是通过函数对象创建出的对象的属性。所以无法通过其实例访问函数对象。

5.构造（重要）

在JS中，创建对象有多种方式，相比java等语言比较灵活。

JS中，可以先创建Object的实例，再为其添加属性和方法（不展示例子，比较简单），或通过字面量的方式（大括号包裹属性和方法）。

但是，用上述的基本方式创建对象会产生大量重复代码。以下几种方式是比较推荐的方式。

(1)工厂模式

作为最常用的设计模式之一，在JS中同样可以模拟这种方式。工厂模式用函数封装创建对象的细节，只需要通过接口来创建对象。

1. function createPerson(name, age, job){
2. var o = new Object();
3. o.name = name;
4. o.age = age;
5. o.job = job;
6. o.sayName = function(){
7. alert(this.name);
8. };
9. return o;
10. }
12. var person1 = createPerson("Nicholas", 29, "Software Engineer");
13. var person2 = createPerson("Greg", 27, "Doctor");
15. person1.sayName(); //"Nicholas"
16. person2.sayName(); //"Greg"
17. 来源：《Javascript 高级程序设计》

（2）构造函数

    在java，c#等面向对象语言中，这是很常见的。

1. function Person(name){
2. var name;
3. function moveUp(){
4. alert(name+" move");
5. }
6. this.moveUp = moveUp;
7. }
8. var jack = new Person("jack");
9. jack.moveUp();

（3）原型Prototype模式

我们创建的每个函数，都有一个Prototype属性，该属性是个指针，指向一个用于包含特定类型所有实例共享属性和方法的对象。

每个构造函数都会有一个原型对象（指向原型对象的指针），而通过构造函数构造出的对象同样有指向相同原型对象的指针，这也是后面能够通过原型链实现继承的基础

(4)静态方法创建

静态方法类似于java等语言，可以直接通过累访问。

JS中的静态方法，实际可以看做函数对象的属性，而不是通过函数对象创建出的对象的属性。所以无法通过其实例访问函数对象。

6.继承（重要）

这里，我只介绍最基本的几种集成方式，一些基于设计模式的扩展，这里就不做赘述了。

（1）原型链法

    通过子类的原型对象引用父类的实例对象，该实例对象将引用父类原型对象，从而实现了原型链。

原型链的最上一级一定是Object对象。

原型链搜索机制：读取时，从实例对象开始，顺着原型链一直向上搜索，若找不到属性或方法，则会在最后一步停止。

1. function SuperType(){
2. this.property = true;
3. }
5. SuperType.prototype.getSuperValue = function(){
6. return this.property;
7. };
9. function SubType(){
10. this.subproperty = false;
11. }
13. //inherit from SuperType
14. SubType.prototype = new SuperType();
16. SubType.prototype.getSubValue = function (){
17. return this.subproperty;
18. };
20. var instance = new SubType();
21. alert(instance.getSuperValue()); //true

对于原型链法，我有一点疑问，为何子类指向父类原型实例而非原型本身，希望能有高人给与指点

（2）借用构造函数

这是我所见过的最常用的方式，其思想是在子类中调用超类的构造函数，主要通过借助apply和call方法，即用子类的this环境去调用超类的构造函数，实现将超类的属性，方法复制到子类的过程。这在fullcalendar插件中大量使用。

1. //以下是fullcalendar插件中穿件日历基础对象时继承事件处理类型EventManager的过程，t是用来存储this变量的，防止
2.         //切换对结果的影响this
3. // Imports
4. // -----------------------------------------------------------------------------------
7. EventManager.call(t, options);
8. var isFetchNeeded = t.isFetchNeeded;
9. var fetchEvents = t.fetchEvents;

后续有心的东西还会有所补充