對象化編程——-簡單地去理解就是把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”