js---OOP淺談

對象化編程-------簡單地去理解就是把javascript能涉及到的范圍分成各種對象，對象下面再次划分對象。編程出發點多是對象，或者說基於對象。所說的對象既包含變量，網頁，窗口等等
 
對象的含義
          對象可以是文字，表單等等。對象包含一下
屬性-------對象的某些特定的性質
方法-------對象能做的事情
事件-------能響應發生在對象上的事情
     注意：對象只是一種特殊的數據

     2.  基本對象
        
         我們一般划分的角度還是從數據類型這方面
Number
String
Array
Math
Data  
這邊我只是簡單地羅列出來部分，具體的可以參考http://www.w3school.com.cn/js/js_obj_intro.asp
 
不過我這邊還是想講一下比較流行的一道前端面試題，也是我當初來百度面試的時候問我的（題目的來源好像是方榮大俠的某個web前端研發工程師編程能力成長之路的文檔里面的）
廢話少說

出題：
                       “輸出字符串--今天是星期幾”

 

var _str = ""; 
var _today = new Date().getDay(); 
if(_today == 0){ 
   _str = "今天是星期日"； 
}else if(_today  == 1){ 
  _str = "今天是星期一"； 
}else if(_today  == 2){ 
  _str = "今天是星期二"； 
}else if(_today  == 3){ 
  _str = "今天是星期三"； 
}else if(_today  == 4){ 
  _str = "今天是星期四"； 
}else if(_today  == 5){ 
  _str = "今天是星期五"； 
}else if(_today  == 6){ 
  _str = "今天是星期六"； 
} 

 

var _str ="今天是星期"; 

var _today=new Date().getDay(); 
switch(_today){ 
      case 0: 
           _str += "日"； 
           break; 
      case 1: 
           _str += "一"； 
           break; 
      case 2: 
           _str += "二"； 
           break; 
      case 3: 
           _str += "三"； 
           break; 
      case 4: 
           _str += "四"； 
           break; 
      case 5: 
           _str += "五"； 
           break; 
      case 6: 
           _str += "六"； 
           break; 
 
} 


var _str = "今天是星期"+"日一二三四五六".charAt(new Date().getDay()); 

　　

 3.
下面介紹創建類和對象的模式
簡單方式
        

var people ={}; 
Js代碼 
      people.name = "steven"; 
      people.age = 23; 
      people.getName = function(){ 
           return "People's name is "+ this.name; 
     }; 
console.log(people.getName());          //People's name is steven 
console.log(people.age);                    //23 

　　

不好的地方就是：在創建多個對象的場景下會產生 很多冗余的代碼，耦合度不高 
 

工廠模式下

function makePeople(name,age,job){ 
     var _obj = {}; 
     _obj.name = name; 
     _obj.age =age; 
     _obj.job = job; 
    _obj.getName = function(){ 
        return "People's name is "+ this.name; 
   }  
    return _obj; 
} 
 
var webdesigner = makePeople("steven",23,"wendesigner"); 
console.log(webdesigner.getName );       //People's name is steven 
console.log(webdesigner.job)                //wendesigner 

　　

 

Js代碼 
不好的地方就是：實例化比較頻繁 

原型模式（prototype）下

function People(){}; 
People.prototype = { 
       constructor :People, 
       name:"steven", 
       age:23, 
       job:"webdesigner", 
       getName:function(){ 
             return "People's name is "+this.name; 
      } 
} 
 
var webdesign = new People(); 
var carman = new People(); 
console.log(webdesign.getName());    //People's name is steven 
console.log(carman.getName());    //People's name is steven 

　　

 
Js代碼 
不好的地方就是：初始化參數不支持傳遞，還有就是原型的所有屬性和方法會被所有的實例共享 

混合模式（原型+構造函數）下
 
 
 

function People(name.age.job){ 
Js代碼 
this.name = name; 
Js代碼 
       this.age = age; 
       this.job = job; 
}; 
People.prototype = { 
      constructor:People, 
      getName: function(){ 
           return "People's name is "+this.name; 
      } 
} 
 
var webdesigner  = new People("steven",23,"webdesigner"); 
var carman = new People("zyc",24,"carman"); 
console.log(webdesigner.getName())   //People's name is steven 
console.log(carman.getName())   //People's name is zyc 

　　

 
Js代碼 
不好的地方就是:對象的屬性和方法也多是公用的 
 
 
閉包下的私有變量模式

(function(){ 
    var name =""; 
    People = function(val){ 
        name = val; 
   }; 
    People.prototype ={ 
       constructor:People, 
       getName:function(){ 
              return "People's name is "+ name ; 
      } 
   }; 
})(); 
 
 
var webdesigner = new People("steven"); 
console.log(webdesigner.name);           //undefined 
console.log(webdesigner.getName());      //People's name is steven 
 
var carman= new People("zyc"); 
console.log(carman.name);           //undefined 
console.log(carman.getName());      //People's name is zyc 
 

　　

Js代碼 
不好的地方就是:初級程度代碼不是很讓人理解 

轉載自： 作者“zhangyaochun”