JavaScript碎片———函數閉包（模擬面向對象）

時間 2019-11-12

標籤 javascript 碎片函數閉包模擬面向對象欄目 JavaScript 简体版

原文原文鏈接

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

具體來講實現模擬面向對象主要是利用JavaScript函數閉包這個概念。因爲JavaScript中的每個function都會造成一個做用域，而若是變量聲明在這個域中，那麼外部是沒法直接去訪問，要想訪問必須new出一個實例來，至關於Java中class。首先讓咱們來了解一下prototype方法：函數

一、不使用prototype屬性定義的對象方法，是靜態方法，只能直接用類名進行調用！另外，此靜態方法中沒法使用this變量來調用對象其餘的屬性！
　　二、使用prototype屬性定義的對象方法，是非靜態方法，只有在實例化後才能使用！其方法內部能夠this來引用對象自身中的其餘屬性！this

Tips ：全部的變量，若是不加上var關鍵字，則默認的會添加到全局對象的屬性上去！spa

具體來講模擬類有如下5種常見寫法：prototype

第一種寫法：具體介紹見如下代碼註釋。code

 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 ) );

第三種寫法：主要思想是本身先實例化出一個對象，在往這個對象裏添加屬性及方法blog

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) );

第五種寫法：此方法與前三種大同小異，不過據說這種寫法不多人用，不建議推薦使用哦！！ip

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());