對象在JavaScript中是很常見的,所有的事物都可以稱為對象欣鳖,包括數(shù)組、字符串茴厉、布爾值等等泽台。對象是包含了屬性和方法的是一個(gè)容器。例如你在游戲里創(chuàng)建了一個(gè)新角色矾缓,那這個(gè)角色就相當(dāng)于你定義了一個(gè)對象怀酷,角色的姓名,性別嗜闻,身高蜕依,膚色等等都是這個(gè)對象的屬性,而當(dāng)你操作這個(gè)角色進(jìn)行行走奔跑跳躍,就是執(zhí)行這個(gè)對象的方法样眠。由此可見友瘤,屬性是與對象相關(guān)的值,方法是能夠在對象上執(zhí)行的動作檐束。
了解了對象的基本概念辫秧,繼續(xù)來圍觀對象的創(chuàng)建方法。
var obj = {}被丧;這種簡單暴力的創(chuàng)建方法叫做對象字面量盟戏,一個(gè)對象的字面量就是包裹在花括號中的值或者方法。例如:
var obj = {
color :“red”甥桂,
width :“100”柿究,
height :“150”,
}
當(dāng)一個(gè)對象定義了一些屬性和方法后格嘁,如果想增加一個(gè)屬性或者查看一個(gè)屬性值等笛求,就涉及到很重要的四個(gè)字“增刪改查”,用上述例子做參考糕簿,增探入,就是增加一個(gè)屬性,如果我還想增加一個(gè)重量的屬性懂诗,可以這樣寫:
var obj = {
color :“red”蜂嗽,
width :“100”,
height :“150”殃恒,
}
obj.weight = “20”植旧;
這個(gè)語句中的點(diǎn)就相當(dāng)于引用,很多時(shí)候离唐,在控制臺是可以看見關(guān)鍵信息的病附,例如這些屬性值,可在控制臺打印亥鬓,而document.write不會顯示完沪。以此類推,如果是查嵌戈,那在后面加一句你要查看的屬性名:
console.log(obj.color)覆积;
此時(shí)控制臺就會打印出red。
修:修改的話直接在后面更換原屬性值熟呛,如:
obj.color = “yellow”宽档;
console.log(obj.color);
此時(shí)原先的顏色屬性值紅色就被改為黃色了庵朝。
增刪改查中唯一一個(gè)有點(diǎn)異于常人的就是“刪”吗冤。對象的屬性是可以刪除的又厉,但是不像其他三個(gè)那樣:(對象名.屬性名)之類,而是需要借助一個(gè)操作符:delete欣孤。
delete obj.width
delete操作符在前馋没,后面跟著對象的屬性,就會刪除這一屬性降传。
接下來分析第二種創(chuàng)建方法篷朵,構(gòu)造函數(shù)。
構(gòu)造函數(shù)分為兩種婆排,第一種是系統(tǒng)自帶的構(gòu)造函數(shù)声旺,構(gòu)造函數(shù)的方法的定義是object(),此為系統(tǒng)自帶段只。
加一個(gè)new腮猖,就可以返還一個(gè)真正的對象,即new object()赞枕,返還需要接受澈缺,所以這里需要聲明一個(gè)變量接收,即基本寫法為:
var obj = new object()炕婶;它與var obj = {}姐赡;沒有區(qū)別。
構(gòu)造函數(shù)依然可以自己增加屬性柠掂,
var obj = new object()项滑;
obj.color = “red”;
obj.width = “100”涯贞;
第二種構(gòu)造函數(shù)是自定義的:
function Obj(){
}枪狂;結(jié)構(gòu)上與函數(shù)沒有任何區(qū)別,為了后期讓人能辨別此為構(gòu)造函數(shù)宋渔,所以命名時(shí)候第一個(gè)字母大寫州疾。自定義的構(gòu)造函數(shù)執(zhí)行成一個(gè)對象需要加new,并且也需要聲明一個(gè)變量接收這個(gè)對象皇拣。
var obj = new Obj()孝治;
注意函數(shù)名,函數(shù)名首字母大寫审磁。
自定義函數(shù)的作用非常大,例如可以傳參岂座。
function Obj(color){
? ? Obj.color = color态蒂;
}
var obj? = new Obj(“yellow”);
上述例子中费什,創(chuàng)建了構(gòu)造函數(shù)钾恢,并且寫了一個(gè)形參color手素,函數(shù)體內(nèi)color屬性等于這個(gè)形參,當(dāng)外界有實(shí)參進(jìn)來瘩蚪,那color屬性就會跟著改變泉懦。對象中對象名稱還可以用this代替,this在對象的內(nèi)容里表示當(dāng)前的對象疹瘦。如:
function Obj(color){
? ? ? this.color = color崩哩;
? ? ? this.width = “100”;
? ? ? this.height = “150”言沐;
}
var obj = new Obj(“yellow”)邓嘹;
與上面那個(gè)效果一樣。這里的this就是指當(dāng)前的對象险胰。
加了new的構(gòu)造函數(shù)就會執(zhí)行并返回一個(gè)對象的原因是new操作符相當(dāng)于在函數(shù)體內(nèi)最頂端創(chuàng)建了一個(gè)空對象汹押,用上述例子闡述。有了new后起便,函數(shù)體中就創(chuàng)建了一個(gè)隱式的空對象var this = {}棚贾;在活動對象里也就有了這個(gè)空對象,程序執(zhí)行函數(shù)里的代碼時(shí)候榆综,就相當(dāng)于在這個(gè)空對象里加color妙痹、width、height這些屬性奖年,到最后函數(shù)體里代碼執(zhí)行完细诸,就會隱式return這個(gè)this。即生成了一個(gè)對象返回出來陋守。new操作符帶來的變化總結(jié)為三個(gè)步驟震贵,1:創(chuàng)建空對象2:給對象增加屬性賦值3:返回,且整個(gè)過程都是隱式水评。
但凡使用new操作符猩系,返回必須是對象值,不可以是原始值(Undefined中燥、Null寇甸、Boolean、Number疗涉、string)拿霉。
原始值是沒有屬性和方法的,
var test = 123咱扣;
test.color = “black”绽淘;
console.log(test.color)
剛說過原始值是不可能有屬性和方法的,但是上述例子就是一個(gè)原始值闹伪,且加了一個(gè)屬性沪铭,還不報(bào)錯(cuò)壮池,這種過程叫做包裝類。增加一個(gè)屬性時(shí)候杀怠,程序隱式的自動轉(zhuǎn)換一個(gè)數(shù)字對象:
new Number(123).color =“black” delete轉(zhuǎn)換完即銷毀并不保存椰憋,當(dāng)你下一次訪問時(shí)候,再繼續(xù)進(jìn)行一次轉(zhuǎn)會赔退,因?yàn)檫@兩次創(chuàng)建的對象并不是同一個(gè)橙依,所以當(dāng)你調(diào)用這個(gè)屬性值時(shí)候,系統(tǒng)會返回undefined离钝。在這里特別提到一點(diǎn)票编,string.length是可以執(zhí)行的,原理一樣卵渴,轉(zhuǎn)換成字符串對象慧域。