對(duì)于很多初學(xué)JavaScript的小白來(lái)說(shuō),剛接觸面向?qū)ο罂隙ㄊ且荒樸卤频?博主也是一樣.但經(jīng)過(guò)一段時(shí)間的工作,還是對(duì)于面向?qū)ο笥辛艘欢ǖ牧私?下面就是這些天學(xué)習(xí)面向?qū)ο蟮囊恍┬牡门c體會(huì),希望對(duì)大家有所幫助.
什么是面向?qū)ο?
相信對(duì)于面向?qū)ο蟮囊恍└拍畲蠹以诰W(wǎng)上看的也都不少,什么學(xué)會(huì)了面向?qū)ο笱骄湍苷覍?duì)象之類(lèi)的.好吧,言歸正傳,在JavaScript中,可以說(shuō)所有東西都是對(duì)象,對(duì)象就是包含一組變量和函數(shù)的集合.函數(shù)是一個(gè)對(duì)象,數(shù)組是一個(gè)對(duì)象.而對(duì)于面向?qū)ο髞?lái)說(shuō),我們把構(gòu)成問(wèn)題事務(wù)分解成各個(gè)對(duì)象,那么建立這些對(duì)象是為了描敘某個(gè)事物在整個(gè)解決問(wèn)題的步驟中的行為,而不是為了完成一個(gè)步驟椎木。
第一:如何創(chuàng)建對(duì)象
對(duì)象的每個(gè)屬性或者方法都有一個(gè)名字,而每個(gè)名字都映射到一個(gè)值
如下面的對(duì)象:
例1:
var person = {
name: "王先生",
age:22,
sex:"男"
}
對(duì)于person(人)這個(gè)對(duì)象來(lái)說(shuō),每個(gè)人肯定是有名字的,有年齡,也有性別,也就是說(shuō)person這個(gè)對(duì)象它有3個(gè)屬性.
那么像這種 name:"王先生" , 屬性名:屬性值 , 我們就稱(chēng)之為鍵值對(duì),一個(gè)鍵值對(duì)就是一個(gè)對(duì)象的屬性.
那么有人就會(huì)問(wèn)了,向剛剛上面的例子中,不管是name還是age都只是一個(gè)簡(jiǎn)單的數(shù)據(jù)類(lèi)型,像"王先生"是字符串,22是數(shù)字,這個(gè)對(duì)象中能不能有一些更牛的屬性呢,比如函數(shù)?答案是可以的.
對(duì)象中的屬性不僅僅可以是一些簡(jiǎn)單數(shù)據(jù)類(lèi)型,也可以是函數(shù),也可以是對(duì)象.這里我要科普一下,哪些是簡(jiǎn)單數(shù)據(jù)類(lèi)型呢?
簡(jiǎn)單數(shù)據(jù)類(lèi)型在JS中就是5種,分別是:
1.數(shù)字類(lèi)型 number;
2.布爾類(lèi)型 boolean;
3.字符串類(lèi)型 string;
4.undefined
5.null
除了以上5種數(shù)據(jù)類(lèi)型,其他的所有元素的數(shù)據(jù)類(lèi)型都是object類(lèi)型
所以我們想給對(duì)象person中添加函數(shù)應(yīng)該怎么做?這里你可以理解為函數(shù)也只是我們給對(duì)象中添加的一個(gè)屬性而已,所以用法也和添加簡(jiǎn)單數(shù)據(jù)類(lèi)型一樣.
如,我要給person添加一個(gè)eat函數(shù):
例2:
var person = {
name: "王先生",
age:22,
sex:"男",
eat:function(){
alert("王先生愛(ài)吃");
}
}
這里要提醒的一點(diǎn)是,對(duì)象中各個(gè)屬性直接是用逗號(hào)來(lái)隔開(kāi)的,而不是分號(hào).
第二:如何訪問(wèn)對(duì)象中的屬性
如果我們現(xiàn)在想訪問(wèn)例2中的name屬性,可以這樣寫(xiě):
對(duì)象名.屬性名
console.log(person.name);
另外也可以直接調(diào)用對(duì)象中的方法(函數(shù)):
person.eat(); //既然是調(diào)用方法(函數(shù)) 則一定還要添加()來(lái)表示方法的調(diào)用
也可以這樣寫(xiě):
對(duì)象名[屬性名]
console.log(person["name"])
倆種方式都可以使我們?cè)L問(wèn)到對(duì)象中的屬性,但也有一定的區(qū)別:
對(duì)象名.屬性名只適合知道了屬性的名字時(shí)使用,如果一個(gè)屬性名是個(gè)變量則會(huì)出現(xiàn)語(yǔ)法錯(cuò)誤;
對(duì)象名[屬性名]就沒(méi)有限制了,不過(guò)當(dāng)變量名是字符串常量,我們就要用" "引號(hào)引起來(lái),是變量的話則可以直接使用
person,age = 22;
var a = 'age';
console.log(person[a])
=>22
第三:如何修改對(duì)象中的屬性
修改對(duì)象中的屬性其實(shí)很簡(jiǎn)單,只需要獲取到你想修改的對(duì)象的屬性,然后給它重新賦值就可以了;
比如修改例2中的sex屬性和eat屬性:
person.sex = "女"
person.eat=function(){
alert("王先生不愛(ài)吃");
}
第四:如何給對(duì)象添加屬性
上面我們了解到了怎么訪問(wèn)對(duì)象屬性,修改對(duì)象屬性,那么現(xiàn)在想給對(duì)象中添加屬性應(yīng)該怎么做呢?
比如我現(xiàn)在還是想給例3中的person添加一個(gè)屬性hobby和play;
例3:
var person = {
name: "王先生",
age:22,
sex:"男",
eat:function(){
alert("王先生愛(ài)吃");
}
}
person.hobby="yun";
person.favorite=function(){
alert(this.name+"favorite is"+this.hobby);
}
第五:如何刪除對(duì)象中的屬性
刪除對(duì)象中屬性這里我們要用到一個(gè)操作符:delete;
如我要?jiǎng)h除例3中person的年齡屬性:
delete person.age;
//此時(shí)我們?cè)賵?zhí)行
console.log(person.age)
=>undefined //返回的是undefined ,說(shuō)明age這個(gè)屬性被刪除了
第六:如何遍歷對(duì)象
針對(duì)遍歷對(duì)象,可以有倆種變量對(duì)象的方式
1.通過(guò)for(...in...)來(lái)變量對(duì)象的各個(gè)屬性名稱(chēng)
for(var proName in p){ //var 可以省略 in前面表示的是p對(duì)象的屬性名稱(chēng)
console.log(proName); //在此輸出的只是p對(duì)象的各個(gè)屬性名稱(chēng)
}
for(var proName in p){
console.log(p[proName]) //在此輸出的是p對(duì)象的各個(gè)屬性的值
}
2.通過(guò)for(...of...)來(lái)變量對(duì)象的各個(gè)屬性的值
for(var pro of p){
console.log(pro); //在此輸出的是p對(duì)象的各個(gè)屬性的值
}
解析面向?qū)ο蟮膸追N創(chuàng)建方式
上面我們只是簡(jiǎn)單的用
var 對(duì)象名 = { 屬性名:屬性值, 屬性名:屬性值, }
來(lái)創(chuàng)建一個(gè)對(duì)象,這種方式稱(chēng)為字面量的創(chuàng)建方式,其實(shí)還有另外幾種創(chuàng)建對(duì)象的方式.
3.1 使用new Object( )
var p = new Object();
p.name = "小王",
p.eat = function(){
alert('函數(shù)')
}
3.2 工廠模式創(chuàng)建
function createP(name,age,sex){
var p = new Object();
p.name = name;
p.age = age;
p.sex = sex;
return p;
}
var p1 = createP("小王","22","男");
var p2 = createP("小張","23","女");
createPerson()函數(shù)可以多次調(diào)用特纤，每調(diào)用一次這個(gè)函數(shù)就會(huì)返回一個(gè)對(duì)象陆错，而且對(duì)象的類(lèi)型仍然是Object類(lèi)型的喘先。雖然解決了多個(gè)相似對(duì)象的問(wèn)題泊碑，但卻沒(méi)有解決對(duì)象類(lèi)型識(shí)別的問(wèn)題缕溉。
3.3 構(gòu)造函數(shù)創(chuàng)建
為了解決對(duì)象類(lèi)型識(shí)別問(wèn)題死陆，又提出了構(gòu)造函數(shù)模式待牵。
通俗來(lái)說(shuō),就是用 new 的方式來(lái)調(diào)用函數(shù)的時(shí)候,就是構(gòu)造函數(shù). 如: var p = new person();
這種模式其屏，其實(shí)在我們創(chuàng)建一些原生對(duì)象的時(shí)候，比如Array缨该、Object都是調(diào)用的他們的構(gòu)造函數(shù)偎行。
構(gòu)造函數(shù)的使用:
? 1.首先創(chuàng)建一個(gè)對(duì)象,這個(gè)對(duì)象的類(lèi)型就是構(gòu)造函數(shù)的名字
? 如例1中的p1就是創(chuàng)建的對(duì)象,這個(gè)對(duì)象的類(lèi)型就是createP
? 2.最后會(huì)把創(chuàng)建這個(gè)對(duì)象自動(dòng)的返回,所以不需要return
? 3.為什么使用構(gòu)造函數(shù):實(shí)際是給創(chuàng)建對(duì)象的一個(gè)初始化
? 4.函數(shù)作為構(gòu)造函數(shù)使用時(shí),this指代的是創(chuàng)建的這個(gè)對(duì)象;函數(shù)作為正常調(diào)用時(shí),this代指window
例1:
function createP(name,age,sex){
this.name = name; //在構(gòu)造函數(shù)中,this就是指代創(chuàng)建這個(gè)對(duì)象
this.age = age;
this.sex = sex;
}
var p1 = new createP("小王","22","男"); //使用new的方式來(lái)調(diào)用函數(shù)的時(shí)候,這個(gè)時(shí)候,這樣的函數(shù)就叫構(gòu)造函數(shù)
var p2 = new createP("小張","23","女");
構(gòu)造函數(shù)與普通函數(shù)的區(qū)別
上面我們?cè)趧?chuàng)建對(duì)象的時(shí)候用了一種通過(guò)構(gòu)造函數(shù)創(chuàng)建的方式,那么構(gòu)造函數(shù)與普通函數(shù)有什么區(qū)別呢?
他們的調(diào)用方式不同:
構(gòu)造函數(shù): new 函數(shù)( )
默認(rèn)返回創(chuàng)建的那個(gè)對(duì)象
所有單詞首字母大寫(xiě)
普通函數(shù): 函數(shù)( )
默認(rèn)返回undefined
