1. 程式人生 > >JavaScript碎片———函數閉包(模擬面向對象)

JavaScript碎片———函數閉包(模擬面向對象)

var span alert 無法使用 hello 思想 實例 註釋 外部

經過這幾天的博客瀏覽,讓我見識大漲,其中有一篇讓我感觸猶深,JavaScript語言本身是沒有面向對象的,但是那些大神們卻深深的模擬出來了面向對象,讓我震撼不已。本篇博客就是在此基礎上加上自己的認知,如有錯誤,還請見諒。

具體來說實現模擬面向對象主要是利用JavaScript函數閉包這個概念。由於JavaScript中的每一個function都會形成一個作用域,而如果變量聲明在這個域中,那麽外部是無法直接去訪問,要想訪問必須new出一個實例來,相當於Java中class。首先讓我們來了解一下prototype方法:

1、不使用prototype屬性定義的對象方法,是靜態方法,只能直接用類名進行調用!另外,此靜態方法中無法使用this變量來調用對象其他的屬性!
   2、使用prototype屬性定義的對象方法,是非靜態方法,只有在實例化後才能使用!其方法內部可以this來引用對象自身中的其他屬性!

Tips :所有的變量,如果不加上var關鍵字,則默認的會添加到全局對象的屬性上去!

具體來說模擬類有以下5種常見寫法:

第一種寫法:具體介紹見以下代碼註釋。

 1     function Circle(r) {
 2         this.r = r;
 3     }
 4 
 5     Circle.PI = 3.14159;/*Circle.PI屬於全局變量  */
 6     Circle.prototype.area = function() {
 7         return Circle.PI * this.r * this
.r; 8 }/*Circle方法調用prototype屬性從而能用this調用 Circle方法中的r屬性*/ 9 10 var c = new Circle(1.0);/* 實例化 Circle*/ 11 alert(c.area());

第二種寫法:與Java類相似,推薦使用!

 1 var Circle = function() {  
 2        var obj = new Object();  /*先實例化Object方法,使之能調用 obj.PI屬性及obj.area方法*/
 3        obj.PI = 3.14159;  
 4
5 obj.area= function( r ) { 6 return this.PI * r * r; 7 } 8 return obj; 9 } 10 11 var c = new Circle(); 12 alert( c.area( 1.0 ) );

第三種寫法:主要思想是自己先實例化出一個對象,在往這個對象裏添加屬性及方法

var Circle = new Object();  
Circle.PI = 3.14159;  
Circle.Area = function( r ) {  
       return this.PI * r * r;  
}  
  
alert( Circle.Area( 1.0 ) );

第四種寫法:該寫法跳過new這一步驟,且電腦簡單清晰明了,個人推薦這種寫法!!

var Circle={  
           "PI":3.14159,  
         "area":function(r){  
                  return this.PI * r * r;  
                }  
        };  
        alert( Circle.area(1.0) );

第五種寫法:此方法與前三種大同小異,不過聽說這種寫法很少人用,不建議推薦使用哦!!

var Circle = new Function("this.PI = 3.14159;this.area = function( r ) {return r*r*this.PI;}");  
  
alert( (new Circle()).area(1.0) );  

想必各位朋友都在想既然是模擬面向對象,那是不是得有封裝繼承,getset方法???答案是肯定的,那讓我們來看看如下代碼:

封裝:在看看如下代碼我們能清晰的了解到封裝的使用,假若我們去掉 var name = "default"; 中的var,那麽結果又是怎麽樣??答案是與先前一樣的,由此可見無var定義的屬性只是再其變量作用域中充當全局,只有屬性在其作用域中是私有的,若要定義一個私有方法需要將其賦予一個變量充當屬性。還有本例中new 可加可不加,若不加可往其後添加()。

var person = function(){    
    //變量作用域為函數內部,外部無法訪問    
    var name = "default";       
       
    return {    
       getName : function(){    
           return name;    
       },    
       setName : function(newName){    
           name = newName;    
       }    
    }    
}();    
     

alert(person.name);//直接訪問,結果為undefined
alert(person.getName());
person.setName("abruzzi");
alert(person.getName());



實現類和繼承:該例的主要思想是定義一個變量,將一個方法賦予它,在根據prototype方法將需要繼承的類放入其中即可達到繼承的效果。。

function Person(){    
    var name = "default";       
       
    return {    
       getName : function(){    
           return name;    
       },    
       setName : function(newName){    
           name = newName;    
       }    
    }    
    }; /* 封裝好的一個類Person */  var Jack = function(){};
    //繼承自Person
    Jack.prototype = new Person();
    //添加私有方法
    Jack.prototype.Say = function(){
        alert("Hello,my name is Jack");
    };
    var j = new Jack();
    j.setName("Jack");
    j.Say();
    alert(j.getName()); 

註: 本貼代碼純屬參考各路大神,切不可以轉發哦!!!

JavaScript碎片———函數閉包(模擬面向對象)