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

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

=

event.type

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

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

var

x

=

{}

//創(chuàng)建一個空對象

var

a

=

{

name:

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

price:

25

}

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

a

=

new

Object()

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

b

=

new

Object({

name:

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

price:

25

})

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

c

=

new

Array(1,

2,

3)

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

d=new

Date()

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

a

=

Object.create(null)

//創(chuàng)建一個空對象var

b

=

Object.create({

name:

'jQuery教程',

price:

30

})

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

a

=

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

a

=

{

name:

'C++',

price:

12

}

=

'HTML'

//修改屬性值a.nmae

=

'JavaScript'

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

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

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

n

=

"abc".length

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

類名

{

constr