js—面向對象OOP淺談

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

     2.  基本對象
        
         我們一般劃分的角度還是從數據類型這方面
Number
String
Array
Math
Data  
這邊我隻是簡單地羅列出來部分,具體的可以參考asp”>http://www.w3school.com.cn/js/js_obj_intro.asp
 
不過我這邊還是想講一下比較流行的一道前端面試題,也是我當初來百度面試的時候問我的(題目的來源好像是方榮大俠的某個web前端研發工程師編程能力成長之路的文檔裡面的)
廢話少說——出題:
                       “輸出字符串–今天是星期幾”
 
答案1:
 
Js代碼 
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 = "今天是星期六"; 

 答案2:
 
Js代碼 
var _str ="今天是星期"; 
Js代碼 
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; 
 

 答案3:
 
Js代碼 
var _arr = new Array("日","一","二","三","四","五","六"); 
var _today = new Date().getDay(); 
var _str = "今天是星期"+_arr[_today ]; 
 
 答案4:
 
Js代碼 
var _str = "今天是星期"+"日一二三四五六".charAt(new Date().getDay()); 
 3.
下面介紹創建類和對象的模式
簡單方式
        
Js代碼 
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 
Js代碼 
不好的地方就是:在創建多個對象的場景下會產生 很多冗餘的代碼,耦合度不高 
 

工廠模式下
Js代碼 
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)下
Js代碼 
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代碼 
不好的地方就是:初始化參數不支持傳遞,還有就是原型的所有屬性和方法會被所有的實例共享 

混合模式(原型+構造函數)下
 
 
 
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代碼 
不好的地方就是:對象的屬性和方法也多是公用的 
 
 
閉包下的私有變量模式
Java代碼 
(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”
 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *