JavaScript+jQuery前端開發(fā)基礎(chǔ)教程（第2版）（微課版）第5章

JavaScript+jQuery前端開發(fā)基礎(chǔ)教程微課版第5章JavaScript的面向?qū)ο蟊菊轮饕獌?nèi)容：對(duì)象原型對(duì)象和繼承內(nèi)置對(duì)象類5.1對(duì)象在JavaScript中，基本類型（number、string、boolean、null、undefined和symbol）本身并不是對(duì)象。JavaScript的內(nèi)置對(duì)象（String、Number、Boolean、Object、Function、Array、Date、RegExp和Error等)都是是對(duì)象的一個(gè)子類型。在面向?qū)ο蟮某绦蛟O(shè)計(jì)中，類封裝了對(duì)象的共同屬性和方法。屬性表示對(duì)象的特征，方法表示對(duì)象的行為。具體的對(duì)象稱為類的實(shí)例對(duì)象，繼承了類的所有屬性和方法。雖然JavaScript不是純粹面向?qū)ο?，但同樣支持面向?qū)ο蟮奶匦?。JavaScript的對(duì)象同樣有屬性和方法，也支持繼承。一個(gè)對(duì)象可擁有多個(gè)屬性和方法，并可繼承原型對(duì)象的屬性和方法。對(duì)象的屬性可看作一個(gè)“鍵/值”對(duì)，鍵是屬性名，值是屬性的值。一個(gè)對(duì)象就是多個(gè)屬性名到值的映射，這類似于其他程序設(shè)計(jì)語言中的“映射”“散列”“字典”等概念。對(duì)象的屬性和方法均通過對(duì)象訪問。x

=

event.type

//使用事件對(duì)象的屬性，獲得事件類型名稱event.preventDefault()

//調(diào)用事件對(duì)象的方法，阻止事件默認(rèn)行為5.1.1創(chuàng)建對(duì)象JavaScript提供了3種創(chuàng)建對(duì)象的方法：字面量new關(guān)鍵字Object.create()方法1．使用字面量創(chuàng)建對(duì)象在JavaScript中，花括號(hào)括起來的多個(gè)“鍵/值”對(duì)是一個(gè)對(duì)象常量，可將其賦給一個(gè)變量。

var

x

=

{}

//創(chuàng)建一個(gè)空對(duì)象

var

a

=

{

name:

'JavaScript程序設(shè)計(jì)',

price:

25

}

//創(chuàng)建一個(gè)有name和price屬性的對(duì)象2．使用new關(guān)鍵字創(chuàng)建對(duì)象new關(guān)鍵字調(diào)用構(gòu)造函數(shù)來創(chuàng)建并初始化一個(gè)對(duì)象。JavaScript的內(nèi)置對(duì)象都包含內(nèi)置的構(gòu)造函數(shù)。例如，Object()、Array()、Date()等都是構(gòu)造函數(shù)。var

a

=

new

Object()

//創(chuàng)建空對(duì)象var

b

=

new

Object({

name:

'JavaScript程序設(shè)計(jì)',

price:

25

})

//創(chuàng)建帶有屬性的對(duì)象var

c

=

new

Array(1,

2,

3)

//創(chuàng)建一個(gè)數(shù)組對(duì)象var

d=new

Date()

//創(chuàng)建一個(gè)表示當(dāng)前日期時(shí)間的日期對(duì)象在JavaScript中，通過字面量創(chuàng)建的所有對(duì)象都有相同的原型對(duì)象，對(duì)象繼承原型對(duì)象的屬性和方法，可使用Ototype屬性引用原型對(duì)象。使用new關(guān)鍵字和構(gòu)造函數(shù)創(chuàng)建對(duì)象時(shí)，實(shí)質(zhì)是使用構(gòu)造函數(shù)的prototype屬性值作為原型對(duì)象。例如，newArray()以Atotype屬性值作為原型對(duì)象，newDate()以Dtotype屬性值作為原型對(duì)象3．使用Object.create()方法創(chuàng)建對(duì)象Object.create()方法用指定參數(shù)創(chuàng)建對(duì)象，參數(shù)為null時(shí)，創(chuàng)建一個(gè)空對(duì)象；參數(shù)為對(duì)象常量或其他對(duì)象時(shí)，將參數(shù)作為原型對(duì)象來創(chuàng)建對(duì)象，新對(duì)象繼承原型對(duì)象的所有屬性和屬性值。var

a

=

Object.create(null)

//創(chuàng)建一個(gè)空對(duì)象var

b

=

Object.create({

name:

'jQuery教程',

price:

30

})

//提供原型對(duì)象來創(chuàng)建對(duì)象5.1.2使用對(duì)象屬性對(duì)象屬性使用“.”運(yùn)算符來訪問，“.”左側(cè)為引用對(duì)象的變量名稱，右側(cè)為屬性名。也可用類似于數(shù)組元素的方式來訪問屬性。var

a

=

{name:'C++',price:12}document.write()document.write(a['name'])兩條語句中的和a['name']是等價(jià)的。如果讀取一個(gè)不存在或者未賦值的屬性，得到的值為undefined。對(duì)象的屬性是動(dòng)態(tài)的。在給對(duì)象屬性賦值時(shí)，如果屬性存在，則覆蓋原來的值，否則會(huì)為對(duì)象創(chuàng)建新的屬性并賦值。var

a

=

{

name:

'C++',

price:

12

}

=

'HTML'

//修改屬性值a.nmae

=

'JavaScript'

//本意是為name屬性賦值，輸入錯(cuò)誤，這會(huì)創(chuàng)建新的nmae屬性可使用delete刪除對(duì)象的屬性。delete

可使用for/in循環(huán)來遍歷對(duì)象的屬性。5.1.3對(duì)象的方法對(duì)象的方法就是通過對(duì)象調(diào)用的函數(shù)。在方法中可用this關(guān)鍵字來引用當(dāng)前對(duì)象。將函數(shù)賦給對(duì)象屬性，該屬性即可稱為方法，通過該屬性來引用函數(shù)。作為方法使用的屬性，可稱為方法屬性5.1.4構(gòu)造函數(shù)構(gòu)造函數(shù)是一個(gè)特殊的方法。在構(gòu)造函數(shù)中，使用this關(guān)鍵字訪問當(dāng)前對(duì)象。構(gòu)造函數(shù)需要和new關(guān)鍵字一起使用，以便創(chuàng)建并初始化對(duì)象。5.1.5with語句with語句的基本語法格式如下。with(對(duì)象){

語句}在with語句的代碼塊中，可直接使用對(duì)象的屬性和方法，而不需要“對(duì)象名.”作為前綴。5.2原型對(duì)象和繼承對(duì)象和原型對(duì)象之間是一種“繼承”的共享關(guān)系，對(duì)象繼承原型對(duì)象的所有屬性和方法。一條基本的原則：除了原型對(duì)象外，對(duì)象的屬性總是“私有的”，只屬于當(dāng)前對(duì)象。給不存在的屬性賦值時(shí)，總是為對(duì)象創(chuàng)建該屬性。在讀取一個(gè)對(duì)象屬性時(shí)，如果對(duì)象沒有該屬性，則查看原型對(duì)象是否有該屬性。如果有，則使用原型對(duì)象的屬性值，否則得到undefined。5.3內(nèi)置對(duì)象JavaScript常用內(nèi)置對(duì)象有Array（數(shù)組）對(duì)象、Math（數(shù)學(xué)）對(duì)象、Number（數(shù)字）對(duì)象、Date（日期）對(duì)象和String（字符串）對(duì)象。本節(jié)主要介紹Math對(duì)象、Date對(duì)象和String對(duì)象。5.3.1Math對(duì)象Math對(duì)象定義了常用的數(shù)學(xué)函數(shù)和常量，它沒有構(gòu)造函數(shù)。Math對(duì)象的主要屬性和方法如下。Math.E：返回?cái)?shù)學(xué)常量e。Math.LN10：返回10的自然對(duì)數(shù)。Math.LN2：返回2的自然對(duì)數(shù)。Math.LOG10E：返回以10為底e的對(duì)數(shù)。Math.LOG2E：返回以2為底e的對(duì)數(shù)。Math.PI：返回圓周率。Math.SQRT1_2：返回2的平方根的倒數(shù)。Math.SQRT2：返回2的平方根。Math.abs(x)：返回x的絕對(duì)值。Math.sin(x)：返回x的正弦值。Math.cos(x)：返回x的余弦值。Math.tan(x)：返回x的正切值。Math.acos(x)：返回x的反余弦值。Math.asin(x)：返回x的反正弦值。Math.atan(x)：返回x的反正切值。Math.ceil(x)：返回大于或等于x的最小整數(shù)。Math.exp(x)：返回e的x次方。Math.floor(x)：返回小于或等于x的最大整數(shù)。Math.log(x)：返回x的自然對(duì)數(shù)。Math.max(x,y,……)：返回參數(shù)中的最大值。Math.min(x,y,……)：返回參數(shù)中的最小值。Math.pow(x,y)：返回x的y次方。Math.random()：返回一個(gè)等于或大于0、小于1的隨機(jī)數(shù)。Math.round(x)：返回x的四舍五入值，0.5向上取整。例如，2.5舍入為3，-2.5舍入為-2。5.3.2Date對(duì)象Date對(duì)象的構(gòu)造函數(shù)如下。Date()：創(chuàng)建表示當(dāng)前日期時(shí)間的Date對(duì)象。Date(msecond)：創(chuàng)建整數(shù)msecond表示的Date對(duì)象。msecond為要?jiǎng)?chuàng)建的日期距離1970年1月1日00:00:00的毫秒值。Date(datestring)：用日期時(shí)間字符串datestring創(chuàng)建Date對(duì)象。Date(year,month,day,hour,minute,second,msecond)：創(chuàng)建指定了年、月、日、小時(shí)、分鐘、秒和毫秒的Date對(duì)象。Date對(duì)象的常用方法如下。getFullYear()：返回日期的四位年份（4位整數(shù)）。getMonth()：返回日期的月份（0-11），1月為0。getDate()：返回日期的日數(shù)（1-31）。getDay()：返回星期幾（0-6），星期日為0。getHours()：返回小時(shí)數(shù)（0-23）。getMinutes()：返回分鐘數(shù)（0-59）。getSeconds()：返回秒數(shù)（0-59）。getMilliseconds()：返回豪秒數(shù)（0-999）。getTime()：返回當(dāng)前時(shí)間，自1970年1月1日以來的毫秒數(shù)。setYear()：設(shè)置日期的年。setMonth()：設(shè)置日期的月。setDate()：設(shè)置日期的日。setDay()：設(shè)置星期幾。setHours()：設(shè)置小時(shí)數(shù)。setMinutes()：設(shè)置分鐘數(shù)。setSeconds()：設(shè)置秒數(shù)。setMilliseconds()：設(shè)置豪秒數(shù)。setTime()：用距1970年1月1日的毫秒數(shù)來設(shè)置時(shí)間。toString()：將Date對(duì)象轉(zhuǎn)換為字符串。toLocaleString()：將Date對(duì)象轉(zhuǎn)換為本地字符串。toDateString()：將Date對(duì)象轉(zhuǎn)換為只含日期的字符串。toLocaleDateString()：將Date對(duì)象轉(zhuǎn)換為只含日期的本地字符串。toTimeString()：將Date對(duì)象轉(zhuǎn)換為只含時(shí)間的字符串。toLocaleTimeString()：將Date對(duì)象轉(zhuǎn)換為只含時(shí)間的本地字符串。5.3.3String對(duì)象1．構(gòu)造函數(shù)String對(duì)象的構(gòu)造函數(shù)為String(s)，newString(s)創(chuàng)建一個(gè)保存字符串的對(duì)象，類型為object。參數(shù)s不是字符串時(shí)，JavaScript會(huì)將其轉(zhuǎn)換為字符串。內(nèi)置函數(shù)String(s)與String對(duì)象的構(gòu)造函數(shù)同名，它將參數(shù)s轉(zhuǎn)換為普通字符串，類型為string。2．String對(duì)象屬性length屬性用于返回字符串對(duì)象中保存的字符個(gè)數(shù)。var

n

=

"abc".length

//n的值為3這說明字符串“abc”是對(duì)象嗎？答案是否定的。在執(zhí)行該語句時(shí)，JavaScript會(huì)隱式地將字符串“abc”轉(zhuǎn)換為String對(duì)象，然后通過對(duì)象返回length屬性。3．String對(duì)象方法charAt(n)：返回字符串中的第n個(gè)字符，第1個(gè)字符位置為0。charCodeAt(n)：返回字符串中第n個(gè)字符的Unicode。contact(value1,value2,…)：將參數(shù)提供的多個(gè)值按順序添加到當(dāng)前字符串末尾，返回新的字符串。indexOf(s,start)：s為要查找的字符串，start為搜索開始位置（可省略）。方法從給定位置開始在原字符串中搜索給定字符串，返回該字符串第1次出現(xiàn)的位置。省略搜索位置時(shí)，從第1個(gè)字符開始搜索。如果不包含給定字符串，返回值為-1。lastIndexOf()：與indexOf()方法類似，返回給定字符串最后一次出現(xiàn)的位置。replace(a,b)：將字符串中與a匹配的字符替換為b中的字符串。a可以是一個(gè)正則表達(dá)式對(duì)象，a具有全局屬性g時(shí)，替換所有匹配的字符串，否則只替換第1個(gè)匹配字符串。a為簡(jiǎn)單字符串時(shí)，也只替換第1個(gè)匹配字符串。search(a)：在字符串對(duì)象中查找與a匹配的子字符串。若a不是正則表達(dá)式對(duì)象，會(huì)先將其轉(zhuǎn)換為正則表達(dá)式對(duì)象。如果包含匹配的字符串，返回第1個(gè)匹配的字符串位置，否則返回-1。slice(start,end)：返回字符串中從start位置開始的，end之前（不包含end）的子字符串。參數(shù)為負(fù)數(shù)時(shí)，從字符串末尾開始計(jì)算位置。-1表示字符串最后一個(gè)字符。split(dm,len)：使用dm指定的分隔符將字符串分解為字符串?dāng)?shù)組，數(shù)組最多l(xiāng)en個(gè)元素。len省略時(shí)，分解整個(gè)字符串。substring(m,n)：與slice()類似。區(qū)別在于，substring()將兩個(gè)參數(shù)中的較小值作為開始位置，將另一個(gè)參數(shù)作為結(jié)束位置。toLowerCase()：將字符串中所有字母轉(zhuǎn)換為小寫。toUpperCase()：將字符串中所有字母轉(zhuǎn)換為大寫。4．使用String對(duì)象將字符串轉(zhuǎn)換為HTML標(biāo)記的方法anchor()：將字符串轉(zhuǎn)換為<a>標(biāo)記，參數(shù)作為標(biāo)記name屬性的值。bold()：將字符串轉(zhuǎn)換為<b>標(biāo)記。italics()：將字符串轉(zhuǎn)換為<i>標(biāo)記。strike()：將字符串轉(zhuǎn)換為<strike>標(biāo)記。fixed()：將字符串轉(zhuǎn)換為<tt>標(biāo)記。fontcolor()：將字符串轉(zhuǎn)換為<font>標(biāo)記，設(shè)置顏色。fontsize()：將字符串轉(zhuǎn)換為<font>標(biāo)記，設(shè)置字號(hào)。link：將字符串轉(zhuǎn)換為<a>標(biāo)記，參數(shù)作為標(biāo)記href屬性的值。sub：將字符串轉(zhuǎn)換為<sub>標(biāo)記。5.4類在JavaScript中，對(duì)象是特定屬性的集合，類則是同一類對(duì)象的共享屬性和方法的集合。JavaScript的類使用基于原型的繼承機(jī)制，繼承同一個(gè)原型的所有對(duì)象是同一個(gè)類的實(shí)例（也稱實(shí)例對(duì)象或類的成員）。JavaScript一直允許定義類，只是沒有明確類的概念。ES6增加了類的相關(guān)語法，包括class關(guān)鍵字。5.4.1使用工廠函數(shù)定義類早期的JavaScript支持使用工廠函數(shù)創(chuàng)建對(duì)象，工廠函數(shù)可看作類的定義。工廠函數(shù)通過原型對(duì)象來定義類的屬性和方法。5.4.2使用構(gòu)造函數(shù)定義類JavaScript可使用new關(guān)鍵字調(diào)用構(gòu)造函數(shù)創(chuàng)建新對(duì)象，對(duì)新對(duì)象進(jìn)行初始化。構(gòu)造函數(shù)的prototype屬性值作為新對(duì)象的原型，這也說明使用同一個(gè)構(gòu)造函數(shù)創(chuàng)建的所有對(duì)象均繼承同一個(gè)原型，都是同一個(gè)類的實(shí)例對(duì)象。5.4.3使用class關(guān)鍵字定義類ES6增加了class關(guān)鍵字，使JavaScript具有了類似于Java和C++的類定義方式。class關(guān)鍵字定義類的基本語法格式如下。class

類名

{

constr