首页 > 代码库 > Javascript面向对象研究心得

Javascript面向对象研究心得

2024-07-14 01:18:46   219人阅读

这段时间正好公司项目须要，须要改动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 = http://www.mamicode.com/object[0]; i < length &&  !== false; value = object[++i]) {}>
上述中，回调函数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<segments.length; i++) {		var segment = segments[i];		var element = segment.element;		if (element) {			callback(segment, element, 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 ? $("<div/>") : finalContainer;
在JS中，推断语句会将传入值转换成Boolean后推断
转换规则：
数据类型转为true的值转为false的值
Booleantruefalse
String不论什么非空字符串“”空字符串
Number不论什么非零数值0和NaN
Object不论什么对象null
Undefinedn/aundefined

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";
  3.         
  4.         var object = {
  5.             name : "My Object",
  6.         
  7.             getNameFunc : function(){
  8.                 return function(){
  9.                     return this.name;
  10.                 };
  11.             }
  12.         };
  13.         
  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循环外部依旧起作用。
注意：在函数内部未使用varkeyword产生的变量，可在全局訪问

5.闭包
简单的说，闭包就是内层函数引用外层变量的手段,而外层则无法訪问内层的变量，是否闭包是对外层变量的封装，函数是否作为隔离之用？（在函数的生命周期内，外层无法影响变量）
结合《Javascript 面向对象编程》和 网上找的各种资料，我总结了闭包的下面几种使用方法。

（1）简单的封装函数，把实现业务的代码和參数分开，避免混乱的代码调用方式。
    下面为演示样例代码（取自：《Javascript 面向对象编程》）
//用来延迟显示消息的通用函数function delayedAlert( msg, time ) {//初始化一个被封套的函数setTimeout(function(){//此函数使用了来自封套它的函数的变量msgalert( msg );}, time );}
其实本人感觉，这好像并没体现出闭包的什么特点，倒反而像是简单的封装
（2）匿名自运行函数
    在JS编写过程中，经常会在全局存放非常多变量，包含非常多暂时变量，这经常会对其它的函数造成影响，使用闭包能够解决这一问题。
    下面样例来自 http://blog.csdn.net/sunlylorn/article/details/6534610
  1. var datamodel = {  
  2.     table : [],  
  3.     tree : {}  
  4. };  
  5.    
  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.     }  
  13.      
  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";     
  3.      
  4.     return {  
  5.        getName : function(){  
  6.            return name;  
  7.        },  
  8.        setName : function(newName){  
  9.            name = newName;  
  10.        }  
  11.     }  
  12. };  
  13.    
  14.    
  15. var john = Person();  
  16. print(john.getName());  
  17. john.setName("john");  
  18. print(john.getName());  
  19.    
  20. var jack = Person();  
  21. print(jack.getName());  
  22. jack.setName("jack");  
  23. print(jack.getName());  
  24.  
  25. 执行结果例如以下：
  26.  
  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 );        };    })();}
        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.         }
      11.         
      12.         var person1 = createPerson("Nicholas", 29, "Software Engineer");
      13.         var person2 = createPerson("Greg", 27, "Doctor");
      14.         
      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.         }
      4.         
      5.         SuperType.prototype.getSuperValue = function(){
      6.             return this.property;
      7.         };
      8.         
      9.         function SubType(){
      10.             this.subproperty = false;
      11.         }
      12.         
      13.         //inherit from SuperType
      14.         SubType.prototype = new SuperType();
      15.         
      16.         SubType.prototype.getSubValue = function (){
      17.             return this.subproperty;
      18.         };
      19.         
      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;
      兴许有心的东西还会有所补充


      联系
      我们