js面向對象的幾種寫法

有段時間沒寫js了，復習了一下js相關的東西，把面向對象的部分挑出來做個記錄。以下代碼綜合別的博客，但都是經過自己驗證。

1，工廠方式

 var Circle = function(){

                
          var obj =   
          new Object(); 
          
    obj.PI = 3.14; 
          
 
          
    obj.area =  
          function(r){ 
          
         
          return  
          this.PI * r * r; 
          
    } 
          
 
          
     
          return obj; 
          
} 
          
 
          var c =  
          new Circle(); 
          
alert(c.area(1.0)); 
          // 
          結果為1 
         

2，比較正規的寫法 （構造函數的方式）

 

function Circle(r){
     this.r = r;
}

// 靜態變量
Circle.PI = 3.14;

// 原型方法
Circle.prototype.area =  function(){
     return Circle.PI *  this.r *  this.r ;
}

var c =  new Circle(3);

console.log(c.area()); //結果為28.259999999999998 

 總結 ： 無需在函數的內部重新創建對象，而使用this指代，並且函數無需明確的return

 

3，json寫法

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

console.log(Circle.area(2)); //結果為：12.56 

 

 第三種寫法的小實例

 var show = {

    btn : $('.div'),
    init :  function(){
         var that =  this;
        alert( this);
         this.btn.click( function{
            that.change();
            alert( this);
        });
    },
    change :  function(){
         this.btn.css({'background':'green'});
    }
}

show.init();//注意其中this的指向問題 

 

4,其實和第一種實質是一樣的

var Circle =  function(r){
     this.r = r;
}

Circle.PI = 3.14;
Circle.prototype = {
    area :  function(){
         return  this.r *  this.r * Circle.PI;
    }
}

var obj =  new Circle(4);

console.log(obj.area()); //結果為：50.24

 

5， 最后一種

var Circle =  new Function("this.PI = 3.14;this.area = function(r){return r*r*this.PI;}");
obj =  new Circle();

console.log(obj.area(4)); //結果為：50.24 

總結：個人不是很推薦這種寫法，有些混亂。 

 

其中我個人比較喜歡的寫法如下:

function Circle(r){
     this.r = r;
}

//  靜態變量
Circle.PI = 3.14;
// 原型方法
Circle.prototype.area =  function(){
     return  this.r *  this.r * Circle.PI;
}

var obj =  new Circle(4);

console.log(obj.area());  //結果為：50.24

 

 可以看到一樣的結果，感覺這種寫法更符合我的習慣，當然js是比較自由的，只要語法沒有錯誤，你可以選擇任何一和自己喜歡的方式去實現自己想要的效果。