- 相關(guān)推薦
javascript的面向?qū)ο蠹夹g(shù)介紹
javascript中的對(duì)象還沒(méi)解釋清楚怎么回事,一上來(lái)就直奔主題,類(lèi)/繼承/原型/私有變量....
結(jié)果呢,看了大半天,有了一個(gè)大概的了解,細(xì)細(xì)一回味,好像什么都沒(méi)懂...
這篇文章是參考<>第7,8,9章而寫(xiě)成的,我也會(huì)盡量按照原書(shū)的結(jié)構(gòu)來(lái)說(shuō)明javascript的面向?qū)ο蠹夹g(shù)(對(duì)象/數(shù)組->函數(shù)-->類(lèi)/構(gòu)造函數(shù)/原型).對(duì)一些我自己也拿捏不準(zhǔn)的地方,我會(huì)附上原文的英文語(yǔ)句,供大家參考.
如果不做說(shuō)明,則文中出現(xiàn)的所有英文語(yǔ)句(程序體除外)都是引自<>.
-------------------------------------------------
對(duì)象和數(shù)組(Objects and Arrays)
什么是對(duì)象?把一些"名字-屬性"的組合放在一個(gè)單元里面,就組成了一個(gè)對(duì)象.我們可以理解為javascript中
的對(duì)象就是一些"鍵-值"對(duì)的集合(An object is a collection of named values. These named values are usually referred
to as properties of the object.--Section3.5).
"名字"只能是string類(lèi)型,不能是其他類(lèi)型,而屬性的類(lèi)型則是任意的(數(shù)字/字符串/其他對(duì)象..).可以用new Object()來(lái)創(chuàng)建一個(gè)空對(duì)象,也可以簡(jiǎn)單的用"{}"來(lái)創(chuàng)建一個(gè)空對(duì)象,這兩者的作用是等同的.
Js代碼
復(fù)制代碼 代碼如下:
var emptyObject1 = {}; //創(chuàng)建空對(duì)象
var emptyObject2 = new Object(); //創(chuàng)建空對(duì)象
var person = {"name":"sdcyst",
"age":18,
"sex":"male"}; //創(chuàng)建一個(gè)包含初始值的對(duì)象person
alert(person.name); //sdcyst
alert(person["age"]); //18
從上面的例子我們也可以看到，訪問(wèn)一個(gè)對(duì)象的屬性，可以簡(jiǎn)單的用對(duì)象名加"."后加屬性的名字，也可以用"[]"操作符來(lái)獲取,此時(shí)在[]里面的屬性名字要加引號(hào),這是因?yàn)閷?duì)象中的索引都是字符串類(lèi)型的.
javasript對(duì)象中屬性的個(gè)數(shù)是可變的,在創(chuàng)建了一個(gè)對(duì)象之后可以隨時(shí)對(duì)它賦予任何的屬性.
Js代碼
復(fù)制代碼 代碼如下:
var person = {};
person.name = "sdcyst";
person["age"] = 18;
alert(person.name + "__" + person.age); //sdcyst__18
var _person = {name:"balala","age":23}; //在構(gòu)建一個(gè)對(duì)象時(shí),屬性的名字可以不用引號(hào)來(lái)標(biāo)注(name),//但是仍舊是一個(gè)字符串類(lèi)型.在訪問(wèn)的時(shí)候[]內(nèi)仍舊需要引號(hào)
alert(_person["name"] + "__" + person.age); //balala__23
alert(_person[name]); //undefinied
通過(guò)"."操作符獲取對(duì)象的屬性,必須得知道屬性的名字.一般來(lái)說(shuō)"[]"操作符獲取對(duì)象屬性的功能更強(qiáng)大一些,可以在[]中放入一些表達(dá)式來(lái)取屬性的值，比如可以用在循環(huán)控制語(yǔ)句中,而"."操作符則沒(méi)有這種靈活性。
Js代碼
復(fù)制代碼 代碼如下:
var name = {"name1":"NAME1","name2":"NAME2","name3":"NAME3","name4":"NAME4"};
var namestring = "";
for(var props in name) { //循環(huán)name對(duì)象中的屬性名字
namestring += name[props];
}
alert(namestring); //NAME1NAME2NAME3NAME4
namestring = "";
for(var i=0; i<4; i++) {
namestring += name["name"+(i+1)];
}
alert(namestring); //NAME1NAME2NAME3NAME4
操作符可以刪除對(duì)象中的某個(gè)屬性,判斷某個(gè)屬性是否存在可以使用"in"操作符.
Js代碼
復(fù)制代碼 代碼如下:
var name = {"name1":"NAME1","name2":"NAME2","name3":"NAME3","name4":"NAME4"};
var namestring = "";
for(var props in name) { //循環(huán)name對(duì)象中的屬性名字
namestring += name[props];
}
alert(namestring); //NAME1NAME2NAME3NAME4
name.name1; //刪除name1屬性
name["name3"]; //刪除name3屬性
namestring = "";
for(var props in name) { //循環(huán)name對(duì)象中的屬性名字
namestring += name[props];
}
alert(namestring); //NAME2NAME4
alert("name1" in name); //false
alert("name4" in name); //true
需要注意,對(duì)象中的屬性是沒(méi)有順序的.
對(duì)象的constructor屬性
每一個(gè)javascript對(duì)象都有一個(gè)constructor屬性.這個(gè)屬性對(duì)應(yīng)了對(duì)象初始化時(shí)的構(gòu)造函數(shù)(函數(shù)也是對(duì)象).
Js代碼
復(fù)制代碼 代碼如下:
var date = new Date();
alert(date.constructor); //Date
alert(date.constructor == "Date"); //false
alert(date.constructor == Date); //true
數(shù)組
我們已經(jīng)提到過(guò),對(duì)象是無(wú)序數(shù)據(jù)的集合,而數(shù)組則是有序數(shù)據(jù)的集合,數(shù)組中的數(shù)據(jù)(元素)通過(guò)索引(從0開(kāi)始)來(lái)訪問(wèn),
數(shù)組中的數(shù)據(jù)可以是任何的數(shù)據(jù)類(lèi)型.數(shù)組本身仍舊是對(duì)象,但是由于數(shù)組的很多特性,通常情況下把數(shù)組和對(duì)象區(qū)別
開(kāi)來(lái)分別對(duì)待(Throughout this book, objects and arrays are often treated as distinct datatypes.
This is a useful and reasonable simplification; you can treat objects and arrays as separate types
for most of your JavaScript programming.To fully understand the behavior of objects and arrays,
however, you have to know the truth: an array is nothing more than an object with a thin layer of extra
functionality. You can see this with the typeof operator: applied to an array value, it returns
the string "object". --section7.5).
創(chuàng)建數(shù)組可以用"[]"操作符,或者是用Array()構(gòu)造函數(shù)來(lái)new一個(gè).
復(fù)制代碼 代碼如下:
var array1 = []; //創(chuàng)建空數(shù)組
var array2 = new Array(); //創(chuàng)建空數(shù)組
array1 = [1,"s",[3,4],{"name1":"NAME1"}]; //
alert(array1[2][1]); //4 訪問(wèn)數(shù)組中的數(shù)組元素
alert(array1[3].name1); //NAME1 訪問(wèn)數(shù)組中的對(duì)象
alert(array1[8]); //undefined
array2 = [,,]; //沒(méi)有數(shù)值填入只有逗號(hào),則對(duì)應(yīng)索引處的元素為undefined
alert(array2.length); //3
alert(array2[1]); //undefined
用new Array()來(lái)創(chuàng)建數(shù)組時(shí),可以指定一個(gè)默認(rèn)的大小,其中的值此時(shí)為undefined,以后可以再給他們賦值.但是由于
javascript中的數(shù)組的長(zhǎng)度是可以任意改變的,同時(shí)數(shù)組中的內(nèi)容也是可以任意改變的,因此這個(gè)初始化的長(zhǎng)度實(shí)際上
對(duì)數(shù)組沒(méi)有任何的約束力.對(duì)于一個(gè)數(shù)組,如果對(duì)超過(guò)它最大長(zhǎng)度的索引賦值,則會(huì)改變數(shù)組的長(zhǎng)度,同時(shí)會(huì)對(duì)沒(méi)有賦值
的索引處賦值undefined,看下面的例子.
復(fù)制代碼 代碼如下:
var array = new Array(10);
alert(array.length); //10
alert(array[4]); //undefined
array[100] = "100th"; //這個(gè)操作會(huì)改變數(shù)組的長(zhǎng)度,同時(shí)將10-99索引對(duì)應(yīng)的值設(shè)為undefined
alert(array.length); //101
alert(array[87]); //undefined
可以用操作符刪除數(shù)組的元素,注意這個(gè)刪除僅僅是將數(shù)組在該位置的元素設(shè)為undefined,數(shù)組的長(zhǎng)度并沒(méi)有改變.
我們已經(jīng)使用過(guò)了數(shù)組的length屬性,length屬性是一個(gè)可以讀/寫(xiě)的屬性,也就是說(shuō)我們可以通過(guò)改變數(shù)組的length屬性來(lái)
任意的改變數(shù)組的長(zhǎng)度.如果將length設(shè)為小于數(shù)組長(zhǎng)度的值,則原數(shù)組中索引大于length-1的值都會(huì)被刪除.如果length
的值大于原始數(shù)組的長(zhǎng)度,則在它們之間的值設(shè)為undefined.
復(fù)制代碼 代碼如下:
var array = new Array("n1","n2","n3","n4","n5"); //五個(gè)元素的數(shù)組
var astring = "";
for(var i=0; i<array.length; i++) { //循環(huán)數(shù)組元素
astring += array[i];
}
alert(astring); //n1n2n3n4n5
array[3]; //刪除數(shù)組元素的值
alert(array.length + "_" + array[3]) //5_undefined
array.length = 3; //縮減數(shù)組的長(zhǎng)度
alert(array[3]); //undefined
array.length = 8; //擴(kuò)充數(shù)組的長(zhǎng)度
alert(array[4]); //undefined
對(duì)于數(shù)組的其他方法諸如join/reverse等等,在這就不再一一舉例.
通過(guò)上面的解釋,我們已經(jīng)知道,對(duì)象的屬性值是通過(guò)屬性的名字(字符串類(lèi)型)來(lái)獲取,而數(shù)組的元素是通過(guò)索
引(整數(shù)型 0~~2**32-1)來(lái)得到值.數(shù)組本身也是一個(gè)對(duì)象,所以對(duì)象屬性的操作也完全適合于數(shù)組.
復(fù)制代碼 代碼如下:
var array = new Array("no1","no2");
array["po"] = "props1";
alert(array.length); //2
//對(duì)于數(shù)組來(lái)說(shuō),array[0]同array["0"]效果是一樣的(?不確定,測(cè)試時(shí)如此)
alert(array[0] + "_" + array["1"] + "_" + array.po);//no1_no2_props1
數(shù)組也是對(duì)象，所以數(shù)組可以有自己的屬性，但是屬性和值不是一個(gè)概念，"no1"和"no2"都是數(shù)組的值，而array["po"]是給數(shù)組添加了一個(gè)屬性，其長(zhǎng)度當(dāng)然就沒(méi)變了。
函數(shù)
javascript函數(shù)相信大家都寫(xiě)過(guò)不少了,所以我們這里只是簡(jiǎn)單介紹一下.
創(chuàng)建函數(shù):
function f(x) {........}
var f = function(x) {......}
上面這兩種形式都可以創(chuàng)建名為f()的函數(shù),不過(guò)后一種形式可以創(chuàng)建匿名函數(shù)
函數(shù)定義時(shí)可以設(shè)置參數(shù),如果傳給函數(shù)的參數(shù)個(gè)數(shù)不夠,則從最左邊起依次對(duì)應(yīng),其余的用undefined賦值,如果傳給函數(shù)
的參數(shù)多于函數(shù)定義參數(shù)的個(gè)數(shù),則多出的參數(shù)被忽略.
復(fù)制代碼 代碼如下:
function myprint(s1,s2,s3) {
alert(s1+"_"+s2+"_"+s3);
}
myprint(); //undefined_undefined_undefined
myprint("string1","string2"); //string1_string2_undefined
myprint("string1","string2","string3","string4"); //string1_string2_string3
因此,對(duì)于定義好的函數(shù),我們不能指望調(diào)用者將所有的參數(shù)全部傳進(jìn)來(lái).對(duì)于那些必須用到的參數(shù)應(yīng)該在函數(shù)體中
加以檢測(cè)(用!操作符),或者設(shè)置默認(rèn)值然后同參數(shù)進(jìn)行或(||)操作來(lái)取得參數(shù).
復(fù)制代碼 代碼如下:
function myprint(s1,person) {
var defaultperson = { //默認(rèn)person對(duì)象
"name":"name1",
"age":18,
"sex":"female"
};
if(!s1) { //s1不允許為空
alert("s1 must be input!");
return false;
}
person = person || defaultperson; //接受person對(duì)象參數(shù)
alert(s1+"_"+person.name+":"+person.age+":"+person.sex);
};
myprint(); //s1 must be input!
myprint("s1"); //s1_name1:18:female
myprint("s1",{"name":"sdcyst","age":23,"sex":"male"}); //s1_sdcyst:23:male
函數(shù)的arguments屬性
在每一個(gè)函數(shù)體的內(nèi)部,都有一個(gè)arguments標(biāo)識(shí)符,這個(gè)標(biāo)識(shí)符代表了一個(gè)Arguments對(duì)象.Arguments對(duì)象非常類(lèi)似
于Array(數(shù)組)對(duì)象,比如都有l(wèi)ength屬性,訪問(wèn)它的值用"[]"操作符利用索引來(lái)訪問(wèn)參數(shù)值,但是,二者是完全不同的
東西,僅僅是表面上有共同點(diǎn)而已(比如說(shuō)修改Arguments對(duì)象的length屬性并不會(huì)改變它的長(zhǎng)度).
復(fù)制代碼 代碼如下:
function myargs() {
alert(arguments.length);
alert(arguments[0]);
}
myargs(); //0 --- undefined
myargs("1",[1,2]); //2 --- 1
Arguments對(duì)象有一個(gè)callee屬性,標(biāo)示了當(dāng)前Arguments對(duì)象所在的方法.可以使用它來(lái)實(shí)現(xiàn)匿名函數(shù)的內(nèi)部遞歸調(diào)用.
復(fù)制代碼 代碼如下:
function(x) {
if (x <= 1) return 1;
return x * arguments.callee(x-1);
} (section8.2)
Method--方法
方法就是函數(shù).我們知道,每一個(gè)對(duì)象都包含0個(gè)或多個(gè)屬性,屬性可以是任意類(lèi)型,當(dāng)然也包括對(duì)象.函數(shù)本身就是一種
對(duì)象,因此我們完全可以把一個(gè)函數(shù)放到一個(gè)對(duì)象里面,此時(shí),這個(gè)函數(shù)就成了對(duì)象的一個(gè)方法.此后如果要使用該方法,
則可以通過(guò)對(duì)象名利用"."操作符來(lái)實(shí)現(xiàn).
復(fù)制代碼 代碼如下:
var obj = {f0:function(){alert("f0");}}; //對(duì)象包含一個(gè)方法
function f1() {alert("f1");}
obj.f1 = f1; //為對(duì)象添加方法
obj.f0(); //f0 f0是obj的方法
obj.f1(); //f1 f1是obj的方法
f1(); //f1 f1同時(shí)又是一個(gè)函數(shù),可以直接調(diào)用
f0(); //f0僅僅是obj的方法,只能通過(guò)對(duì)象來(lái)調(diào)用
方法的調(diào)用需要對(duì)象的支持,那么在方法中如何獲取對(duì)象的屬性呢?this!this關(guān)鍵字我們已經(jīng)很熟悉了,在javascript的方
法中,我們可以用this來(lái)取得對(duì)方法調(diào)用者(對(duì)象)的引用,從而獲取方法調(diào)用者的各種屬性.
復(fù)制代碼 代碼如下:
var obj = {"name":"NAME","sex":"female"};
obj.print = function() { //為對(duì)象添加方法
alert(this.name + "_" + this["sex"]);
};
obj.print(); //NAME_female
obj.sex = "male";
obj.print(); //NAME_male
下面我們來(lái)一個(gè)更加面向?qū)ο蟮睦?
復(fù)制代碼 代碼如下:
var person = {name:"defaultname",
setName:function(s){
this.name = s;
},
"printName":function(){
alert(this.name);
}}
person.printName(); //defaultname
person.setName("newName");
person.printName(); //newName
在上面的例子中,完全可以用person.name=..來(lái)直接改變person的name屬性,在此我們只是為了展示一下剛才提到的內(nèi)容.
另一種改變person屬性的方法就是:定義一個(gè)function,接收兩個(gè)參數(shù),一個(gè)是person,一個(gè)是name的值,看起來(lái)像是這樣:
changeName(person,"newName").哪種方法好呢?很明顯,例子中的方法更形象,更直觀一些,而且好像有了那么一點(diǎn)面向
對(duì)象的影子.
再次強(qiáng)調(diào)一下,方法(Method)本身就是是函數(shù)(function),只不過(guò)方法的使用更受限制.在后面的篇幅中,如果提到函數(shù),那么
提到的內(nèi)容同樣適用于方法,反之則不盡然.
【javascript的面向?qū)ο蠹夹g(shù)介紹】相關(guān)文章：
javascript面向?qū)ο笾械膶?duì)象怎么理解09-02
使用ajax操作JavaScript對(duì)象的方法09-28
關(guān)于javascript對(duì)象之內(nèi)置和對(duì)象Math的使用方法10-08
JavaScript高級(jí)程序設(shè)計(jì)：本地對(duì)象Array10-22