第三章-Javascript對象

1、第三章第三章 JavaScriptJavaScript對象對象 Page 2 1 2 3 4 JavaScriptJavaScript對象簡介對象簡介 JavaScriptJavaScript引用類型引用類型 JavaScriptJavaScript的基本包裝類型的基本包裝類型 JavaScriptJavaScript的內(nèi)置對象的內(nèi)置對象 Page 3 一、一、JavaScriptJavaScript對象簡介對象簡介 n JavaScript數(shù)據(jù)類型分為基本數(shù)據(jù)類型和引用類型兩種。 在ECMAScript中，引用類型是一種數(shù)據(jù)結(jié)構(gòu)，用于將數(shù)據(jù) 和功能組織在一起，這有點(diǎn)類似于傳統(tǒng)面向?qū)ο笳Z言中的

2、 “類”，但ECMAScript只是一種基于對象的語言，它不具 備傳統(tǒng)的面向?qū)ο笳Z言所支持的類和接口等基本結(jié)構(gòu)，因 此，在ECMAScript中，引用類型被稱為“對象定義”，它 描述一類對象所具有的屬性和方法。而引用類型的值則稱 為“對象”，它是引用類型的一個實(shí)例。 Page 4 一、一、JavaScriptJavaScript對象簡介對象簡介 n ECMAScript中的對象有三種： 本地對象：ECMA-262 把本地對象定義為“獨(dú)立于宿主環(huán) 境的 ECMAScript 實(shí)現(xiàn)提供的對象”。簡單來說，本地對 象就是 ECMA-262 定義的引用類型。它們包括：Object、 Function、

3、Array、String、Boolean、Number、Date、 RexExp。 內(nèi)置對象：ECMA-262 把內(nèi)置對象定義為“由 ECMAScript 實(shí)現(xiàn)提供的、獨(dú)立于宿主環(huán)境的所有對象，在 ECMAScript 程序開始執(zhí)行時出現(xiàn)”。這意味著開發(fā)者不 必明確實(shí)例化內(nèi)置對象，它已被實(shí)例化了。ECMA-262 只 定義了兩個內(nèi)置對象，即 Global 和 Math （它們也是本 地對象，根據(jù)定義，每個內(nèi)置對象都是本地對象）。 Page 5 一、一、JavaScriptJavaScript對象簡介對象簡介 宿主對象：所有非本地對象都是宿主對象，即由 ECMAScript 實(shí)現(xiàn)的宿主環(huán)境提供的

4、對象。如 BOM 和 DOM 對象都是宿主對象。 Page 6 一、一、JavaScriptJavaScript對象簡介對象簡介 n 創(chuàng)建本地對象：JavaScript中，創(chuàng)建對象有以下幾種常用 的方式： 使用new操作符后跟一個構(gòu)造函數(shù)來創(chuàng)建 如 var obj=new Object(); var d=new Date(); 使用對象字面量表示法 如 var person= name:“張三”, age:25, height:“78KG” Page 7 一、一、JavaScriptJavaScript對象簡介對象簡介 使用函數(shù)來構(gòu)造對象 如 function person(name,age,

5、height) =name; this.age=age; this.height=height; var person3=new person(王五,28,68kg); Page 8 一、一、JavaScriptJavaScript對象簡介對象簡介 n 訪問對象屬性 如 var arr=new Array(); alert(arr.length); n 調(diào)用對象方法 如 var d1=new Date(); alert(d1.getFullYear(); 例題3-1.html Page 9 二、二、ObjectObject類型類型 n Object類型用來創(chuàng)建一個通用的對象，

6、它是ECMAScript中 使用最多的一個類型，雖然Object的實(shí)例不具備多少功能， 但對于在應(yīng)用程序中存儲和傳輸數(shù)據(jù)來說，它是非常理想 的選擇。 n ECMAScript中的所有對象都由這個對象繼承而來，Object 對象中的所有屬性和方法都會出現(xiàn)在其他對象中 。 Page 10 二、二、ObjectObject類型類型 n Object類型的使用： 格式： var obj=new Object(value); obj必選項(xiàng)，代表要賦值為Object對象的變量名。 vaule可選項(xiàng)，可以是任意一種 JavaScript的基本數(shù) 據(jù)類型。（Number、Boolean、或 String。）如

7、果 value 為一個對象，返回不作改動的該對象。如果value 為 null、undefined，或者沒有給出，則產(chǎn)生沒有內(nèi)容的 對象。 例題3-2.html Page 11 二、二、ObjectObject類型類型 n Object對象的屬性和方法： 屬性屬性/ /方法方法說說 明明 constructor對象的構(gòu)造函數(shù) hasOwnProperty(propname)判斷對象是否有某個特定的屬性 isPrototypeof(0bject)判斷對象是否是另一個對象的原型 propertyIsEnumerable(propname) 判斷給定的屬性是否可以用 for.in 語句進(jìn)行枚舉 to

8、LocaleString()返回對象的本地化字符串 toString()返回對象的字符串形式 valueOf()返回對象的原始值 Page 12 三、三、ArrayArray類型類型 n Array類型也是ECMAScript中最常用的類型之一， ECMAScript中的數(shù)組與其他語言中的數(shù)組有著相當(dāng)大的區(qū) 別： ECMAScript中的數(shù)組的每一項(xiàng)可以保存任何類型的數(shù)據(jù)。 ECMAScript數(shù)組的大小是可以動態(tài)調(diào)整的，即可以隨著數(shù) 據(jù)的添加自動增長以容納新增數(shù)據(jù)。 Page 13 三、三、ArrayArray類型類型 n 數(shù)組的創(chuàng)建 使用Array()構(gòu)造函數(shù)創(chuàng)建 如 var arr1=n

9、ew Array(); var arr2=new Array(10); var arr3=new Array(“張三”); var arr4=Array(3); Page 14 三、三、ArrayArray類型類型 使用字面量形式創(chuàng)建 如 var colors=red,blue,green; var name=; n 訪問數(shù)組元素 使用方括號加索引值得形式。 如 colors0 colors2 Page 15 三、三、ArrayArray類型類型 n 數(shù)組的length屬性 ECMAScript中，數(shù)組的length屬性不是只讀的，通過改變 這個屬性，可以從數(shù)組的末尾移除數(shù)組元素或向數(shù)組中添

10、加新項(xiàng)。 如 var colors=red,blue,green; colors.length=2; /移除末尾項(xiàng)green colorscolors.length=black; /新增一項(xiàng) colors.lenght=5; /新增兩個空項(xiàng) 例題3-3.html Page 16 三、三、ArrayArray類型類型 n 檢測數(shù)組 要判斷某個對象是否為數(shù)組，ECMAScript 3使用 instanceof操作符檢測。在ECMAScript 5中則新增了一個 Array.isArray()方法來判斷。 Page 17 三、三、ArrayArray類型類型 n 數(shù)組對象的常用屬性和方法： 屬性屬性

11、/ /方法方法說說 明明 length數(shù)組的長度 toString()把數(shù)組的值轉(zhuǎn)換為字符串，并返回結(jié)果 toLocaleString()把數(shù)組轉(zhuǎn)換為本地化數(shù)組，并返回字符串結(jié)果 valueOf()返回?cái)?shù)組對象的原始值 push()向數(shù)組的末尾添加一個或多個數(shù)組元素，并返回?cái)?shù)組長度 pop()刪除并返回?cái)?shù)組的最后一個元素 shift()刪除并返回?cái)?shù)組的第一個元素 unshift()向數(shù)組的開頭添加一個或多個元素，并返回?cái)?shù)組長度 sort()對數(shù)組元素進(jìn)行排序 reverse()顛倒數(shù)組元素的排列順序 Page 18 三、三、ArrayArray類型類型 n 數(shù)組對象的常用屬性和方法： 例題3-

12、4.html 屬性屬性/ /方法方法說說 明明 join()把數(shù)組中的元素放入字符串。元素通過指定的分隔符進(jìn)行分 隔 concat()連接兩個或更多的數(shù)組，并返回結(jié)果 slice(start,end)返回?cái)?shù)組中的一部分元素（不含end位置元素） splice(start,deleteCount,value.)插入、刪除或替換數(shù)組中的元素 Page 19 四、四、DateDate類型類型 n Date對象提供了與日期、時間相關(guān)的操作功能。 ECMAScript中的Date類型是在早期java中的 java.util.Date類基礎(chǔ)上構(gòu)建的，它使用來自UTC(國際協(xié) 調(diào)時間)1970年1月1日零時

13、開始經(jīng)過的毫秒數(shù)來保存日期。 在使用這種數(shù)據(jù)存儲格式的條件下，Date類型保存的日期 能夠精確到1970年1月1日之前或之后285616年。 n 創(chuàng)建日期對象： var d1=new Date(); var d2=new Date(“May 25,2008”); Page 20 四、四、DateDate類型類型 n Date對象的常用屬性和方法： 例題3-5.html 屬性屬性/ /方法方法說說 明明 Date()返回當(dāng)日的日期和時間 getDate()返回日期對象中的天數(shù)，如超過了改月份應(yīng)有的天數(shù)，則增 加月份 getDay()返回日期對象中星期的星期幾（0-6） getMonth()返回日

14、期對象的月份（0-11） getFullYear()從日期對象中返回四位數(shù)字表示的年份 getYear()返回日期對象的年份（真實(shí)年份減去1900） getHours()返回日期對象中的小時（0-23） getMinutes()返回日期對象中的分鐘（0-59） getSeconds()返回日期對象中的秒（0-59） getMilliseconds()返回日期對象中的毫秒（0-999） Page 21 四、四、DateDate類型類型 n Date對象的常用屬性和方法： 屬性屬性/ /方法方法說說 明明 getTime()返回1970年1月1日至今的毫秒數(shù) getTimezoneOffset()

15、返回本地時間與格林威治標(biāo)準(zhǔn)時間的分鐘差 getUTCDate()根據(jù)世界時從 Date 對象返回月中的一天 (1 31)。 getUTCDay()根據(jù)世界時從 Date 對象返回周中的一天 (0 6)。 getUTCMonth()根據(jù)世界時從 Date 對象返回月份 (0 11)。 getUTCFullYear()根據(jù)世界時從 Date 對象返回四位數(shù)的年份。 getUTCHours()根據(jù)世界時返回 Date 對象的小時 (0 23)。 getUTCMinutes()根據(jù)世界時返回 Date 對象的分鐘 (0 59)。 getUTCSeconds()根據(jù)世界時返回 Date 對象的秒鐘 (0

16、 59)。 getUTCMilliseconds()根據(jù)世界時返回 Date 對象的毫秒(0 999)。 Page 22 四、四、DateDate類型類型 n Date對象的常用屬性和方法： 屬性屬性/ /方法方法說說 明明 parse()返回1970年1月1日零時到指定日期的毫秒數(shù) setDate()設(shè)置日期對象中的天數(shù)，如超過了改月份應(yīng)有的天數(shù)，則增 加月份 setDay()設(shè)置日期對象中星期的星期幾（0-6） setMonth()設(shè)置日期對象的月份（0-11） setFullYear()設(shè)置日期對象中年份（四位數(shù)字） setYear()設(shè)置日期對象的年份（請用setFullYear代替）

17、 setHours()設(shè)置日期對象中的小時（0-23） setMinutes()設(shè)置日期對象中的分鐘（0-59） setSeconds()設(shè)置日期對象中的秒（0-59） setMilliseconds()設(shè)置日期對象中的毫秒（0-999） Page 23 四、四、DateDate類型類型 n Date對象的常用屬性和方法： 屬性屬性/ /方法方法說說 明明 setTime()以毫秒數(shù)設(shè)置日期對象 setUTCDate()根據(jù)世界時設(shè)置 Date 對象月中的一天 (1 31)。 setUTCMonth()根據(jù)世界時設(shè)置 Date 對象中的月份 (0 11)。 setUTCFullYear()根據(jù)

18、世界時設(shè)置 Date 對象中的年份（四位數(shù)）。 setUTCHours()根據(jù)世界時設(shè)置 Date 對象中的小時 (0 23)。 setUTCMinutes()根據(jù)世界時設(shè)置 Date 對象中的分鐘 (0 59)。 setUTCSeconds()根據(jù)世界時設(shè)置 Date 對象中的秒鐘 (0 59)。 setUTCMilliseconds()根據(jù)世界時設(shè)置 Date 對象的中毫秒(0 999)。 toString()把Date對象轉(zhuǎn)為字符串 toTimeString()把Date對象的時間部分轉(zhuǎn)為字符串 toDateString()把Date對象的日期部分轉(zhuǎn)為字符串 Page 24 五、五、Re

19、gExpRegExp類型類型 n RegExp對象表示正則表達(dá)式，它是字符串執(zhí)行模式匹配的強(qiáng)大工具。 ECMAScript正則表達(dá)式使用類似Perl的語法。 n 創(chuàng)建正則表達(dá)式 格式： var expression=/pattern/flags; 或 var expression=new RegExp(pattern,flags); 參數(shù)說明： pattern:字符串，指定正則表達(dá)式的模式或其他正則表達(dá)式 flags:可選參數(shù) i-忽略大小寫 g-全局匹配 m-多行模式 如 var re1=new RegExp(abc,i); var re2=/abc/i; Page 25 五、五、RegEx

20、pRegExp類型類型 n 測試正則表達(dá)式 test()方法 如 alert(re1.test(abc1234edefg); alert(re2.test(ABCA1234edefg); 例題3-6.html 3-7.html 正則表達(dá)式的語法及詳細(xì)規(guī)則請參考PHP版正則表達(dá)式的 介紹?；?RegExp對象參考手冊 Page 26 五、五、RegExpRegExp類型類型 n RegExp對象的常用屬性和方法： 屬性屬性/ /方法方法說說 明明 globalRegExp對象是否具有標(biāo)志g ignoreCaseRegExp對象是否具有標(biāo)志i lastIndex一個整數(shù)，標(biāo)示開始下一次匹配的字符位

21、置 multilineRegExp對象是否具有標(biāo)志m source正則表達(dá)式的源文本 compile()編譯正則表達(dá)式 exec()檢查字符串中指定的值，返回找到的值，并確定其位置 test()檢查字符串是否包含指定的模式，返回true或false Page 27 六、六、FunctionFunction類型類型 n ECMAScript中最有趣的是函數(shù)實(shí)際上是對象。每個函數(shù) 都是Function類型的實(shí)例，而且都與其他引用類型一樣具 有屬性和方法。由于函數(shù)是對象，因此函數(shù)名實(shí)際上一個 指向函數(shù)對象的指針，不會與某個函數(shù)綁定。 n 函數(shù)可以使用function關(guān)鍵字來聲明 如 function

22、 sum(num1,num2) return num1+num2; Page 28 六、六、FunctionFunction類型類型 n 函數(shù)也通過函數(shù)表達(dá)式來定義 如 var sum=function(num1,num2) return num1+num2; ; n 也可以通過構(gòu)造函數(shù)來定義 var sum=new Function(“num1”,”num2”,”return num1+num2”); /不推薦 Page 29 七、基本包裝類型七、基本包裝類型 n 為了便于操作基本類型值，ECMAScript中還提供了3個特 殊的引用類型：Boolean、Number和String。這些類型

23、與 其他的引用類型相似，但同時也具有與各自的基本類型相 應(yīng)的特殊行為。 n 實(shí)際上，每當(dāng)讀取一個基本類型值得時候，后臺就會創(chuàng)建 一個對應(yīng)的基本包裝類型的對象，從而讓我們可以調(diào)用一 些方法來操作這些數(shù)據(jù)。 如 var s1=“Hello”; var s2=s1.substring(2); Page 30 七、基本包裝類型七、基本包裝類型 n 引用類型與基本包裝類型的主要區(qū)別就在于對象的生存期。 使用new操作符創(chuàng)建的引用類型的實(shí)例，在執(zhí)行流離開當(dāng) 前作用域之前一直都保存在內(nèi)存中；而自動創(chuàng)建的基本包 裝類型的對象，則只存在于一行代碼的執(zhí)行瞬間，然后立 即被銷毀。 如 var str=“Hello”

24、; str.color=“red”; alert(str.color); /輸出undefined 例題3-9.html Page 31 八、基本包裝類型八、基本包裝類型BooleanBoolean類型類型 n Boolean類型是與布爾值對應(yīng)的引用類型。 n 創(chuàng)建Boolean對象 如 var bool1=new Boolean(true); var bool2=new Boolean(false); n Boolean類型的對象重寫了valueOf()方法，返回基本類型 值true或false，重寫了toString()方法，返回字符 串”true”或”false”。 n Boolean對

25、象在ECMAScript中的用處不大，建議不要使用。 Page 32 九、基本包裝類型九、基本包裝類型NumberNumber類型類型 n Number類型是與數(shù)字值對應(yīng)的引用類型。 n 創(chuàng)建Number對象 var num=new Number(10); n 構(gòu)造函數(shù) Number() 可以不與運(yùn)算符 new 一起使用，而直接作為轉(zhuǎn) 化函數(shù)來使用。以這種方式調(diào)用 Number() 時，它會把自己的參數(shù)轉(zhuǎn) 化成一個數(shù)字，然后返回轉(zhuǎn)換后的原始數(shù)值（或 NaN）。 n 構(gòu)造函數(shù)通常還用作 5 個有用的數(shù)字常量的占位符，這 5 個有用的 數(shù)字常量分別是可表示的最大數(shù)、可表示的最小數(shù)、正無窮大、負(fù)無

26、窮大和特殊的 NaN 值。 注意，這些值是構(gòu)造函數(shù) Number() 自身的 屬性，而不是單獨(dú)的某個 Number 對象的屬性。 Page 33 九、基本包裝類型九、基本包裝類型NumberNumber類型類型 n Number對象的常用屬性和方法： 屬性屬性/ /方法方法說說 明明 Number.MAX_VALUE最大數(shù) Number.MIN_VALUE最小數(shù) Number.NaN非數(shù)字值 Number.NEGATIVE_INFINITY負(fù)無窮大 Number.POSITIVE_INFINITY正無窮大 toString()把數(shù)字轉(zhuǎn)換為字符串 toLocaleString() 把數(shù)字轉(zhuǎn)換為字

27、符串，使用本地?cái)?shù)字格式順序。 toFixed(digit)把數(shù)字轉(zhuǎn)換為字符串，小數(shù)點(diǎn)后有指定位數(shù)的數(shù)字。 toExponential(digit)把對象的值轉(zhuǎn)換為指數(shù)計(jì)數(shù)法。 toPrecision(n)把數(shù)字格式化為指定的長度。 valueOf()返回一個 Number 對象的基本數(shù)字值。 Page 34 十、基本包裝類型十、基本包裝類型StringString類型類型 n String類型是與字符串的對象包裝類型。 n 創(chuàng)建String對象 var str=new String(“Hello”); 或 var str=String(“Hello”); Page 35 十、基本包裝類型十、基

28、本包裝類型StringString類型類型 n String對象的常用屬性和方法： 屬性屬性/ /方法方法說說 明明 length字符串的長度 charAt(n)返回在指定位置的字符 charCodeAt(n)返回指定位置字符的unicode編碼 concat()連接字符串 slice(start,end)返回字符串的一部分 substring(start,end)提取字符串中兩個指定的索引號之間的字符。 substr(start,length)從起始索引號提取字符串中指定數(shù)目的字符。 indexOf()從前面開始向后檢索字符串 lastIndexOf()從后向前檢索字符串 trim()刪除字

29、符串前后空格 toLowerCase()把字符串轉(zhuǎn)為小寫 toUpperCase()把字符串轉(zhuǎn)為大寫 Page 36 十、基本包裝類型十、基本包裝類型StringString類型類型 n String對象的常用屬性和方法： 屬性屬性/ /方法方法說說 明明 match()找到一個或多個正則表達(dá)式的匹配。 replace()替換與正則表達(dá)式匹配的子串。 search()檢索與正則表達(dá)式相匹配的值。 split()把字符串分割為字符串?dāng)?shù)組 fromCharCode()接收多個字符編碼，轉(zhuǎn)換成字符串 Page 37 十一、單體內(nèi)置對象十一、單體內(nèi)置對象 n ECMA-262 把內(nèi)置對象定義為“由 E

30、CMAScript 實(shí)現(xiàn)提供 的、獨(dú)立于宿主環(huán)境的所有對象，在 ECMAScript 程序開 始執(zhí)行時出現(xiàn)”。這意味著開發(fā)者不必明確實(shí)例化內(nèi)置對 象，它已被實(shí)例化了。ECMA-262 只定義了兩個內(nèi)置對象， 即 Global 和 Math。 Page 38 十三、單體內(nèi)置對象十三、單體內(nèi)置對象-Global-Global對象對象 n Global（全局）對象是ECMAScript中最特別的對象，因?yàn)?實(shí)際上它根本不存在。但剛才不是說Global是對象嗎？沒 錯。這里需要理解的主要概念是，在ECMAScript中，不存 在獨(dú)立的函數(shù)，所有函數(shù)都必須是某個對象的方法。我們 前面介紹的函數(shù)，如isNaN()、isFinite()、parseInt() 和parseFloat()等，看起來都像獨(dú)立的函數(shù)。實(shí)際上，它 們都是Global對象的方法。 n Global對象不只有方法，它還有屬性。還記得那些特殊值 undefined、NaN和Infinity嗎？它們都是Global對象的屬 性。此外，所有本地對象的構(gòu)造函數(shù)也都是Global對象的 屬性。 Page 39 十三、