JavaScript碎片———函式閉包（模擬物件導向）

鍾離上河發表於2019-01-31
JavaScript函式物件

       經過這幾天的部落格瀏覽，讓我見識大漲，其中有一篇讓我感觸猶深，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()); 




                                                                                                                                                             注： 本貼程式碼純屬參考各路大神，切不可以轉發哦！！！


 




























相關文章