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是比较自由的，只要语法没有错误，你可以选择任何一和自己喜欢的方式去实现自己想要的效果。