JavaScript之引用類型


Object類型

  Object類型是JavaScript中使用最多的一種類型。雖然Object的實例不具備多少功能,但對於在應用程序中存儲和傳輸數據而言,它確實是非常理想的選擇。

  創建Object實例的方式有兩種,第一種是使用new操作符后跟Object構造函數。

    var person = new Object();
    person.name = "tt";
    person.age = 12;

  另一種方式是使用對象字面量表示法。

    var person = {
        name : 'tt',
        age : 12
    }

  另外,使用對象字面量語法時,如果留空其花括號,則可以定義值包含默認屬性和方法的對象。

    var person = {};            //與new Object()相同
    person.name = "tt";
    person.age = 12;

  雖然可以使用前面介紹的任何一種方法來定義對象,但開發人員更青睞第二種方法(對象字面量語法),因為這種語法要求的代碼量少,而且能給人封裝數據的感覺。實際上,對象字面量也是向函數傳遞大量可選參數的首選方式,例如:

    function showInfo(args)
    {
        if(args.name != undefined)
        {
            alert(args.name);
        }
        if(args.age != undefined)
        {
            alert(args.age);
        }
    }

    showInfo({
        name:'name',
        age:12
    });

    showInfo({name:'name'});

  一般來說,訪問對象屬性時使用的都是點表示法,這也是很多面向對象語言中通用的語法。不過,在JavaScript也可以使用方括號表示法來訪問對象的屬性。例如:

    alert(person.name);
    alert(person['name']);    

  從功能上看,這兩種訪問對象屬性的方法沒有任何區別。但方括號語法的主要優點是可以通過變量來訪問屬性。

    var propertyName = 'name';
    alert(person[propertyName]);

  通常,除非必須使用變量來訪問屬性,否則我們建議使用點表示法。

Array類型

  JavaScript中的數組與其他多數語言中的數組有着相當大的區別。雖然JavaScript數組與其他語言中的數組都是數據的有序列表,但與其他語言不同的是,JavaScript數組的每一項可以保持任何類型的數據。也就是說,可以用數組的第一個位置來保存字符串,用第二個位置來保存數值,用第三個位置來保存對象。而且,JavaScript數組的大小是可以動態調整的,即可以隨着數據的添加自動增長以容納新增數據。

  創建數組的基本方式有兩種。第一種是使用Array構造函數。

    var colors1 = new Array();
    var colors2 = new Array(20);                        
    var colors3 = new Array('red','blue','yellow');

  創建數組的第二種基本方式是使用數組字面量表示法。

    var colors1 = [];
    var colors2 = ['red','blue','yellow'];

  在讀取和設置數組的值時,要使用方括號並提供相應值的基於0的數字索引。

    var colors = ['red','blue','yellow'];    //定義一個字符串數組
    alert(colors[0]);                        //顯示第一項
    colors[2] = 'green';                     //修改第三項
    colors[3] = 'black';                     //新增第四項

  數組的長度保存在其length屬性中,這個屬性始終會返回0或更大的值。

    var colors = ['red','blue','yellow'];
    var names = [];
    alert(colors.length);        //3
    alert(names.length);        //0

  數組的length屬性很有特點——它不是只讀的。因此,通過設置這個屬性,可以從數組的末尾移除項或想數組中添加新項。

    var colors = ['red','blue','yellow'];
    colors.length = 2;
    alert(colors[2]);        //undefined

  這個例子中的數組colors一開始有3個值。將其length屬性設置為2會移除最后一項,結果再訪問colors[2]就會顯示undefined了。

  利用length屬性也可以方便地在數組末尾添加新項。

    var colors = ['red','blue','yellow'];
    colors[colors.length] = 'green';        //在位置3添加一種顏色
    colors[colors.length] = 'black';        //再在位置4添加一種顏色

  由於數組最后一項的索引始終是length-1,因此下一個新項的位置就是length。

  轉換方法

  所有對象都具有toLocaleString()、toString()和valueOf()方法。其中,調用數組的toString()和valueOf()方法會返回相同的值,即由數組中每個值的字符串形成拼接而成的一個以逗號分隔的字符串。實際上,為了創建這個字符串會調用數組每一項的toString()方法。

    var colors = ['red','blue','yellow'];
    alert(colors.toString());   //red,blue,yellow
    alert(colors.valueOf());    //red,blue,yellow
    alert(colors);              //red,blue,yellow

  我們首先顯式地調用了toString()和valueOf()方法,以便返回數組的字符串表示,每個值的字符串表示拼接成了一個字符串,中間以逗號分隔。最后一行代碼直接將數組傳遞給了alert()。由於alert()要接收字符串參數,所有它會在后台調用toString()方法,由此會得到與直接調用toString()方法相同的結果。

  另外,toLocaleString()方法經常也會返回與toString()和valueOf()方法相同的值,但也不總是如此。當調用數組的toLocaleString()方法時,它也會創建一個數組值的以逗號分隔的字符串。而與前兩個方法唯一的不同之處在於,這一次為了取得每一項的值,調用的是每一項的toLocaleString()方法,而不是toString()方法。例如:

    var person1 = {
        toLocaleString : function(){
            return "person1 : toLocaleString";
        },
        toString : function(){
            return "person1 : toString";
        }
    };
    var person2 = {
        toLocaleString : function(){
            return "person2 : toLocaleString";
        },
        toString : function(){
            return "person2 : toString";
        }
    };
    var people = [person1,person2];
    alert(people);                       //person1 : toString,person2 : toString
    alert(people.toString());            //person1 : toString,person2 : toString
    alert(people.toLocaleString());      //person1 : toLocaleString,person2 : toLocaleString

  數組繼承的toLocaleString()、toString()和valueOf()方法,在默認情況下都會以逗號分隔的字符串的形式返回數組項。而如果使用join()方法,則可以使用不同的分隔符來構建這個字符串。

    var colors = ['red','blue','yellow'];
    alert(colors.join(','));    //red,blue,yellow
    alert(colors.join('||'));    //red||blue||yellow

  注意:如果數組中的某一項的值是null或者undefined,那么該值在join()、toString()、toLocaleString()和valueOf()方法返回的結果中以空字符串表示。

  棧方法

  JavScript數組也提供了一種讓數組的行為類似於其他數據結構的方法。具體來說,數組可以表現得就像棧一樣,后者是一種可以限制插入和刪除項的數據結構。棧是一種后進先出后進先出的數據結構。而棧中項的插入(叫做推入)和移除(叫做彈出),只發生在一個位置——棧的頂部。JavaScript提供了push()和pop()方法,以便實現類似的棧行為。

  push()方法可以接收任意數量的參數,把它們逐個添加到數組末尾,並返回修改后數組的長度。而pop()方法則從數組末尾移除最后一項,減少數組的length值,然后返回移除的項。

    var colors = new Array();                    //創建一個數組
    var count = colors.push('red','blue');       //推入兩項
    alert(count);                                //2
    count = colors.push('yellow');               //再推入一項
    alert(count);                                //3
    var item = colors.pop();                     //取得最后一項
    alert(item);                                 //yellow
    alert(colors.length);                        //2

  隊列方法

  隊列數據結構的訪問規則是先進先出。隊列在列表的末端添加項,從列表的前端移除項。由於push()是向數組末端添加項的方法,因此要模擬隊列只需一個從數組前端取得項的方法。實現這一操作的數組方法就是shift(),它能夠移除數組中的第一個項並返回該項,同時將數組長度減1。結合使用shift()和push()方法,可以像使用隊列一樣使用數組:

    var colors = new Array();                    //創建一個數組
    var count = colors.push('red','blue');       //推入兩項
    alert(count);                                //2
    count = colors.push('yellow');               //再推入一項
    alert(count);                                //3
    var item = colors.shift();                   //取得第一項
    alert(item);                                 //red
    alert(colors.length);                        //2

  JavaScript還為數組提供了一個unshift()方法。顧名思義,unshift()與shift()的用途相反:它能在數組前端添加任意個項並返回新數組的長度。因此,同時使用unshift()和pop()方法,可以從反方向來模擬隊列,即在數組的前端添加項,從數組的末端移除項,例如:

    var colors = new Array();                    //創建一個數組
    var count = colors.unshift('red','blue');    //推入兩項
    alert(count);                                //2
    count = colors.unshift('yellow');            //再推入一項
    alert(count);                                //3
    var item = colors.pop();                     //取得第一項
    alert(item);                                 //blue
    alert(colors.length);                        //2

  注意:IE對JavaScript的實現中存在一個偏差,其unshift()方法總是返回undefined而不是數組的新長度。

  重排序方法

  數組中已經存在兩個可以直接用來重排序的方法:reverse()和sort(),reverse()方法會反轉數組項的順序。

    var values = [1,2,3,4,5];
    values.reverse();
    alert(values);                //5,4,3,2,1

  在默認情況下,sort()方法按升序排列數組項——即最小的值位於最前面,最大的值排在最后面。為了實現排序,sort()方法會調用每個數組項的toString()轉型方法,然后比較得到的字符串,以確定如何排序。即使數組中的每一項都是數值,sort()方法比較的也是字符串,如下所示:

    var values = [0,1,5,10,15];
    values.sort();
    alert(values);                //0,1,10,15,5

  可見,即使例子中值的順序沒有問題,但sort()方法也會根據測試字符串的結果改變原來的順序。因為數值5雖然小於10,但在進行字符串比較時,“10”則位於“5”的前面。因此sort()方法可以接收一個比較函數作為參數,以便我們指定哪個值位於哪個值的前面。

    function compare(value1,value2){
        if(value1 < value2){
            return 1;
        } else if(value1 > value2){
            return -1;
        } else{
            return 0;
        }
    }
    var values = [0,1,5,10,15];
    values.sort(compare);
    alert(values);                //15,10,5,1,0

  對於數值類型或者其valueOf()方法會返回數值類型的對象類型,可以使用一個更簡單的比較函數。這個函數主要用第二個值減第一個值即可。

    function compare(value1,value2){
        return value2 - value1;
    }

  操作方法

  JavaScript對操作數組提供了很多方法。其中,concat()方法可以基於當前數組中的所有項創建一個新數組,如果傳遞給concat()方法的是一或多個數組,則該方法會將這些數組中的每一項都添加到結果數組中。如果傳遞的值不是數組,這些值就會被簡單地添加到結果數組的末尾。

    var colors = ['red','green','blue'];
    var colors2 = colors.concat('yellow',['black' , 'brown']);
    alert(colors);        //red,green,blue
    alert(colors2);        //red,green,blue,yellow,black,brown

  slice()方法能夠基於當前數組中的一或多個項創建一個新數組。slice()方法可以接受一或兩個參數,即要返回項的起始和結束位置。在只有一個參數的情況下,slice()方法返回從該參數指定位置開始到當前數組末尾的所有項。如果有兩個參數,該方法返回起始和結束位置之前的項——但不包括結束位置的項。

    var colors = ['red','green','blue','yellow','black','brown'];
    var colors2 = colors.slice(1);
    var colors3 = colors.slice(1,4);
    alert(colors2);        //green,blue,yellow,black,brown
    alert(colors3);        //green,blue,yellow

  下面我們來介紹splice()方法,這個方法恐怕要算是最強大的數組方法了,splice()主要用途是向數組的中部插入項,但使用這種方法的方式則有如下3種。

  刪除——可以刪除任意數量的項,只需指定2個參數:要刪除的第一項的位置和要刪除的項數。例如,splice(0,2)會刪除數組中的前兩項。

  插入——可以向指定位置插入任意數量的項,只需提供3個參數:起始位置、0(要刪除的項數)、要插入的項。如果要插入多個項,可以再傳入第四、第五,以致任意多個項。例如,splice(2,0,'red','green')會從當前數組的位置2開始插入字符串'red'和'green'。

  替換——可以向指定位置插入任意數量的項,且同時刪除任意數量的項,只需指定3個參數:起始位置、要刪除的項數和要插入的任意數量的項。插入的項數不必與刪除的項數相等。例如,splice(2,1,'red','green')會刪除當前數組位置2的項,然后再從位置2開始插入字符串'red'和'green'。

    var colors = ['red','green','blue'];
    var removed = colors.splice(0,1);                 //刪除第一項
    alert(colors);                                    //green,blue
    alert(removed);                                   //red
    removed = colors.splice(1,0,'yellow','black');    //從位置1開始插入兩項
    alert(colors);                                    //green,yellow,black,blue
    alert(removed);                                   //返回一個空數組
    removed = colors.splice(1,1,'red','brown');       //插入兩項,刪除一項
    alert(colors);                                    //green,red,brown,black,blue
    alert(removed);                                   //yellow

Date類型

  JavaScript中的Date類型是在早期Java中的java.util.Date類基礎上構建的。為此,Date類型使用自UTC 1970年1月1日零時開始經過的毫秒數來保存日期。在使用這種數據存儲格式的條件下,Date類型保存的日期能夠精確到1970年1月1日之前或之后的285 616年。

  要創建一個日期對象,使用new操作符和Date構造函數即可。

    var now = new Date();

  在調用Date構造函數而不傳遞參數的情況下,新創建的對象自動獲得當前日期和時間。如果想根據特定的日期和時間創建日期對象,必須傳入表示該日期的毫秒數。為了簡化這一計算過程,JavaScript提供了兩個方法:Date.parse()和Date.UTC()。

  其中,Date.parse()方法接收一個表示日期的字符串參數,然后嘗試根據這個字符串返回相應日期的毫秒數。JavaScript沒有定義Date.parse()應該支持哪種格式,因此這個方法的行為因實現而異,而且通常是因地區而異。將地區設置為美國的瀏覽器通常都接受下列日期格式:

  ● "月/日/年",如:6/13/2204

  ● "英文月名 日,年",如:January 12,2004

  ● "英文星期幾 英文月名 日 年 時:分:秒 時區",如:Tue May 25 2004 00:00:00 GMT-0700

  例如,要為2004年5月25日創建一個日期對象,可以使用下面的代碼:

  var someDate = new Date(Date.parse("May 25 , 2004"));

  如果傳入Date.parse()方法的字符串不能表示日期,那么它會返回NaN。實際上,如果直接將表示日期的字符串傳遞給Date構造函數,也會在后台調用Date.parse()。換句話說,下面的代碼與前面的例子是等價的:

  var someDate = new Date('May 25 , 2004');

  Date.UTC()方法同樣也返回表示日期的毫秒數,但它與Date.parse()在構建值時使用不同的信息。Date.UTC()的參數分別是年份、基於0的月份(一月是0,二月是1,以此類推)。月中的哪一天(1到31)、小時數(0到23)、分鍾、秒以及毫秒數。在這些參數中,只有前兩個參數(年和月)是必需的。如果沒有提供月中的天數,則假設天數為1;如果省略其他參數,則統統假設為0。

  //GMT時間2000年1月1日零時
  var y2k = new Date(Date.UTC(2000, 0));
  //GMT時間2005年5月5日下午5:55:55
  var allFives = new Date(Date.UTC(2005,4,5,17,55,55));

  如同模仿Date.parse()一樣,Date構造函數也會模仿Date.UTC(),但有一點明顯不同:日期和時間都基於本地時區而非GMT來創建的。可以將前面的例子重寫如下:

  //本地時間2000年1月1日零時
  var y2k = new Date(2000,0);
  //本地時間2005年5月5日下午5:55:55
  var allFives = new Date(2005,4,5,17,55,55);

  Date類型還有一些專門用於將日期格式化為字符串的方法,這些方法如下:

  ● toDateString()——以特定於實現的格式顯示星期幾、月、日和年

  ● toTimeString()——以特定於實現的格式顯示時、分、秒和時區

  ● toLocaleDateString()——以特定於地區的格式顯示星期幾、月、日和年

  ● toLocaleTimeString()——以特定於實現的格式顯示時、分、秒

  ● toUTCString()——以特定於實現的格式完整的UTC日期

  以上這些字符串格式方法的輸出也是因瀏覽器而異的,因此沒有哪一個方法能夠用來在用戶界面中顯示一致的日期信息。

  以下是Date類型的所有方法:

方法 描述
Date() 返回當日的日期和時間。
getDate() 從 Date 對象返回一個月中的某一天 (1 ~ 31)。
getDay() 從 Date 對象返回一周中的某一天 (0 ~ 6)。
getMonth() 從 Date 對象返回月份 (0 ~ 11)。
getFullYear() 從 Date 對象以四位數字返回年份。
getYear() 請使用 getFullYear() 方法代替。
getHours() 返回 Date 對象的小時 (0 ~ 23)。
getMinutes() 返回 Date 對象的分鍾 (0 ~ 59)。
getSeconds() 返回 Date 對象的秒數 (0 ~ 59)。
getMilliseconds() 返回 Date 對象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒數。
getTimezoneOffset() 返回本地時間與格林威治標准時間 (GMT) 的分鍾差。
getUTCDate() 根據世界時從 Date 對象返回月中的一天 (1 ~ 31)。
getUTCDay() 根據世界時從 Date 對象返回周中的一天 (0 ~ 6)。
getUTCMonth() 根據世界時從 Date 對象返回月份 (0 ~ 11)。
getUTCFullYear() 根據世界時從 Date 對象返回四位數的年份。
getUTCHours() 根據世界時返回 Date 對象的小時 (0 ~ 23)。
getUTCMinutes() 根據世界時返回 Date 對象的分鍾 (0 ~ 59)。
getUTCSeconds() 根據世界時返回 Date 對象的秒鍾 (0 ~ 59)。
getUTCMilliseconds() 根據世界時返回 Date 對象的毫秒(0 ~ 999)。
parse() 返回1970年1月1日午夜到指定日期(字符串)的毫秒數。
setDate() 設置 Date 對象中月的某一天 (1 ~ 31)。
setMonth() 設置 Date 對象中月份 (0 ~ 11)。
setFullYear() 設置 Date 對象中的年份(四位數字)。
setYear() 請使用 setFullYear() 方法代替。
setHours() 設置 Date 對象中的小時 (0 ~ 23)。
setMinutes() 設置 Date 對象中的分鍾 (0 ~ 59)。
setSeconds() 設置 Date 對象中的秒鍾 (0 ~ 59)。
setMilliseconds() 設置 Date 對象中的毫秒 (0 ~ 999)。
setTime() 以毫秒設置 Date 對象。
setUTCDate() 根據世界時設置 Date 對象中月份的一天 (1 ~ 31)。
setUTCMonth() 根據世界時設置 Date 對象中的月份 (0 ~ 11)。
setUTCFullYear() 根據世界時設置 Date 對象中的年份(四位數字)。
setUTCHours() 根據世界時設置 Date 對象中的小時 (0 ~ 23)。
setUTCMinutes() 根據世界時設置 Date 對象中的分鍾 (0 ~ 59)。
setUTCSeconds() 根據世界時設置 Date 對象中的秒鍾 (0 ~ 59)。
setUTCMilliseconds() 根據世界時設置 Date 對象中的毫秒 (0 ~ 999)。
toSource() 返回該對象的源代碼。
toString() 把 Date 對象轉換為字符串。
toTimeString() 把 Date 對象的時間部分轉換為字符串。
toDateString() 把 Date 對象的日期部分轉換為字符串。
toGMTString() 請使用 toUTCString() 方法代替。
toUTCString() 根據世界時,把 Date 對象轉換為字符串。
toLocaleString() 根據本地時間格式,把 Date 對象轉換為字符串。
toLocaleTimeString() 根據本地時間格式,把 Date 對象的時間部分轉換為字符串。
toLocaleDateString() 根據本地時間格式,把 Date 對象的日期部分轉換為字符串。
UTC() 根據世界時返回 1970 年 1 月 1 日 到指定日期的毫秒數。
valueOf() 返回 Date 對象的原始值。

Function類型

  JavaScript中什么最有意思,我想那莫過於函數了——而有意思的根源,則在於函數實際上時對象。每個函數都是Function類型的實例,而且都與其他引用類型一樣具有屬性和方法。由於函數是對象,因此函數名實際上也是一個指向函數對象的指針,不會與某個函數綁定。

  函數通常是使用函數聲明語法定義的,如下面例子所示:

    function sum(num1,num2)
    {
        return num1 + num2;
    }

  這與下面使用函數表達式定義函數的方式幾乎相差無幾:

    var sun = function(num1,num2){
        return num1 + num2;
    };

  以上代碼定義了變量sum並將其初始化為一個函數。function關鍵字后面沒有函數名,這是因為在使用函數表達式定義函數時,沒有必要使用函數名——通過變量sum即可引用函數。另外,還要注意函數末尾有一個分號,就像聲明其他變量時一樣。

  最后一種定義函數的方式是使用Function構造函數。Function構造函數可以接收任意數量的參數,但最后一個參數始終都被看成是函數體,而前面的參數則枚舉出了新函數的參數。

  var sum = Function('num1','num2','return num1 + num2');        //不推薦使用此種方式

  由於函數名僅僅是指向函數的指針,因此函數名與包含對象指針的其他變量沒有什么不同。換句話說,一個函數可能會有多個名字,例如:

    function sum(num1,num2)
    {
        return num1 + num2;
    }
    alert(sum(10,10));           //20
    var anotherSum = sum;
    alert(anotherSum(10,10));    //20
    sum = null;
    alert(anotherSum(10,10));    //20

  注意:使用不帶括號的函數名是訪問函數指針,而非調用函數。

  函數聲明與函數表達式

  目前為止,我們一直沒有對函數聲明和函數表達式加以區別。而實際上, 解析器在向執行環境中加載數據時,對函數聲明和函數表達式並非一視同仁。解析器會率先讀取函數聲明,並使其在執行任何代碼之前可用(可以訪問);至於函數表達式,則必須等到解析器執行到它所在的代碼行,才會真正被解釋執行。

    alert(sum(10,10));
    function sum(num1,num2)
    {
        return num1 + num2;
    }

  以上代碼完全可以正常運行。因為在代碼開始執行之前,解析器就已經讀取函數聲明並將其添加到執行環境中了。如果像下面例子所示,把上面的函數聲明改為變量初始化方式,就會在執行期間導致錯誤。

    alert(sum(10,10));
    var sum = function(num1,num2)
    {
        return num1 + num2;
    }

  作為值的函數

  因為JavaScript中的函數名本身就是變量,所以函數也可以作為值來使用。也就是說,不僅可以像傳遞參數一樣把一個函數傳遞給另一個函數,而且可以將一個函數作為另一個函數的結果返回。

    function callSomeFunction(someFunction , someArgument)
    {
        return someFunction(someArgument);
    }

  這個函數接受兩個參數,第一個參數應該是一個函數,第二個參數應該是要傳遞給該函數的一個值。然后,就可以像下面的例子一樣傳遞函數了:

    function add(num)
    {
        return num + 10;
    }
    var result = callSomeFunction(add,10);
    alert(result);        //20

  當然,可以從一個函數中返回另一個函數,而且這也是極為有用的一種技術。

    function createSumFunction()
    {
        return function(num1,num2){
            return num1 + num2;
        };
    }
    var sumFunction = createSumFunction();
    alert(sumFunction(10,10));        //20

  函數內部屬性

  在函數內部,有兩個特殊的對象:arguments和this。其中,arguments是一個類數組對象,包含着傳入函數中的所有參數,而且可以使用length屬性來確定傳遞進來多少個參數。

    function sayHi()
    {
        alert(arguments.length);                        //2
        alert(arguments[0] + ',' + arguments[1]);        //hello,world
    }
    sayHi('hello','world');

  雖然arguments的主要用途是保存函數參數,但這個對象還有一個名叫callee的屬性,該屬性是一個指針,指向擁有這個arguments對象的函數。看下面這個非常經典的階乘函數:

    function factorial(num)
    {
        if(num <= 1){
            return 1;
        } else {
            return num * factorial(num-1);
        }
    }

  定義階乘函數一般都要用到遞歸算法;如上面的代碼,在函數有名字,而且名字以后也不會變的情況下,這樣定義沒有問題。但問題是這個函數的執行與函數名factorial緊緊耦合在一起。為了消除這種緊密耦合的現象,可以像下面這樣使用arguments.callee

    function factorial(num)
    {
        if(num <= 1){
            return 1;
        } else {
            return num * arguments.callee(num-1);
        }
    }

  在這個重寫后的factorial()函數的函數體內,沒有再引用函數名factorial。這樣,無論引用函數時使用是什么名字,都可以保證正常完成遞歸調用。例如:

    var trueFactorial = factorial;
    factorial = function(){
        return 0;
    };
    alert(trueFactorial(5));        //120
    alert(factorial(5));            //0

  函數內部的另一個特殊對象是this,this引用的是函數據以執行操作的對象——或者也可以說,this是函數在執行時所處的作用域(當在網頁的全局作用域中調用函數時,this對象引用的就是window)。看下面的例子:

    window.color = 'red';
    var o = {color:'blue'};
    
    function sayColor()
    {
        alert(this.color);
    }

    sayColor();                //red
    o.sayColor = sayColor;
    o.sayColor();              //blue

  上面這個函數sayColor()是在全局作用域中定義的,它引用了this對象。由於在調用函數之前,this的值並不確定,因此this可能會在代碼執行過程中引用不同的對象。當在全局作用域中調用sayColor()時,this引用的是全局對象 window;換句話說,對this.color求值會轉換成對window.color求值,於是結果就是'red'。而當把這個函數賦給對象o並調用o.sayColor()時,this引用的是對象o,因此對this.color求值會轉換成對o.color求值,結果就是'blue'。

  函數屬性和方法

  因為JavScript中的函數是對象,因此函數也有屬性和方法。每個函數都包含兩個屬性:length和prototype。其中,length屬性表示函數希望接收的命名參數的個數。

    function sayName(name)
    {
        alert(name);
    }
    function sayHi()
    {
        alert('hi');
    }

    alert(sayName.length);      //1
    alert(sayHi.length);         //0

  在JavaScript中最耐人尋味的就要數prototype屬性了。對於引用類型而言,prototype是保存它們所有實例方法的真正所在。諸如toString()和valueOf()等方法實際上都是保存在prototype名下,只不過是通過各自對象的實例訪問罷了。在創建自定義引用類型以及實現繼承時,prototype屬性的作用是極為重要的(這里就不對prototype屬性做詳細介紹了)。

  每個函數都包含兩個非繼承而來的方法:apply()和call()。這兩個方法的用途是在特定的作用域中調用函數,實際上等於設置函數體內this對象的值。首先,apply()方法接受兩個參數:一個是在其中運行函數的作用域,另一個是參數數組。其中,第二個參數可以是Array的實例,也可以是arguments對象。例如:

    function sum(num1,num2)
    {
        return num1 + num2;
    }
    function callSum1(num1,num2)
    {
        return sum.apply(this,arguments);
    }
    function callSum2(num1,num2)
    {
        return sum.apply(this,[num1,num2]);
    }
    alert(callSum1(10,10));                    //20
    alert(callSum2(10,10));                    //20

  在上面例子中,callSum1()在執行sum()函數時傳入了this作為作用域(因為是在全局作用域中調用的,所以傳入的就是window對象)和arguments對象。而callSum2同樣也調用了sum()函數,但它傳入的則是this和一個參數數組。

  call()方法與apply()方法的作用相同,它們的區別僅在於接收參數的方式不同。對於call()方法而言,第一個參數是作用域沒有變化,變化的只是其余的參數都是直接傳遞給函數的。

    function callSum2(num1,num2)
    {
        return sum.call(this,num1,num2);
    }
    alert(callSum2(10,10));                    //20

  事實上,傳遞參數並非apply()和call()真正的用武之地;它們真正強大的地方是能夠擴充函數賴以運行的作用域。看下面的例子:

    window.color = 'red';
    var o = {color:'blue'};
    
    function sayColor()
    {
        alert(this.color);
    }

    sayColor();                //red
    sayColor.call(this);    //red
    sayColor.call(window);    //red
    sayColor.call(o);        //blue

  在上面的例子中,當運行sayColor.call(o)時,函數的執行環境就不一樣了,因為此時函數體內的this對象指向了o,於是結果顯示"blue"。

  注意:每個函數都有一個非標准的caller屬性,該屬性指向調用當前函數的函數。一般是在一個函數的內部,通過arguments.callee.caller來實現對調用棧的追溯。目前,IE、FireFox、Chrome都支持該屬性,但建議將該屬性用於調試目的。

內置對象

  JavaScript中有兩個內置對象:Global和Math。

 Global對象

  Global(全局)對象可以說是JavaScript中最特別的一個對象了,因為不管你從什么角度上看,這個對象都是不存在的。JavaScript中的Global對象在某種意義上是作為一個終極的“兜底兒對象”來定義的。換句話說,不屬於任何其他對象的屬性和方法,最終都是它的屬性和方法。事實上,沒有全局變量或全局函數;所有在全局作用域定義的屬性和函數,都是Global對象的屬性。諸如isNaN()、parseInt()以及parseFloat(),實際上全都是Global對象的方法,Global對象還包含其他一些方法。

  URI編碼方法

  Global對象的encodeURI()和encodeURIComponent()方法可以對URI進行編碼,以便發送給瀏覽器。有效的URI中不能包含某些字符,例如空格。而這兩個URI編碼方法就可以對URI進行編碼,它們用特殊的UTF-8編碼替換所有無效的字符,從而讓瀏覽器能夠接受和理解。

  其中,encodeURI()主要用於整個URI(例如:http://www.test.com/test value.html),而encodeURIComponent()主要用於對URI中的某一段(例如前面URI中的test value.html)進行編碼。它們主要區別在於,encodeURI()不會對本身屬於URI的特殊字符進行編碼,例如冒號、正斜杠、問好和井號;而encodeURIComponent()則會對它發現的任何非標准字符進行編碼。

    var uri = "http://www.test.com/test value.html#start";
    //"http://www.test.com/test%20value.html#start"
    alert(encodeURI(uri));
    //"http%3A%2F%2Fwww.test.com%2Ftest%20value.html%23start"
    alert(encodeURIComponent(uri));

  一般來說,使用encodeURIComponent()方法的時候要比使用encodeURI()更多,因為在實踐中更常見的是對查詢字符串參數而不是對基礎URI進行編碼。

  與encodeURI()和encodeURIComponent()方法對應的兩個方法分別是decodeURI()和decodeURIComponent()。其中,decodeURI()只能對encodeURI()替換的字符進行解碼,同樣,decodeURIComponent()只能對encodeURIComponent()替換的字符進行解碼。

  eval()方法

  eval()方法大概是JavaScript中最強大的一個方法了,eval()方法就像是一個完整的JavaScript解析器,它只接受一個參數,即要執行的字符串。看下面的例子:

  eval("alert('hi')");

  這行代碼的作用等價於下面這行代碼:

  alert('hi');

  當解析器發現代碼中調用eval()方法時,它會將傳入的參數當做實際的JavaScript語句來解析,然后把執行結果插入到原位置。通過eval()執行的代碼被認為是包含該次調用的執行環境的一部分,因此被執行的代碼具有與該執行環境相同的作用域鏈。這意味着通過eval()執行的代碼可以引用在包含環境中定義的變量,例如:

    var msg = 'hello world';
    eval('alert(msg)');            //hello world

  可見,變量msg是在eval()調用的環境之外定義的,但其中調用的alert()仍然能夠顯示“hello world”。這是因為上面第二行代碼最終被替換成了一行真正的代碼。同樣地,我們也可以在eval()調用中定義一個函數,然后再在該調用的外部代碼中引用這個函數:

    eval("function sayHi(){alert('hi')}");
    sayHi();

  注意:能夠解釋代碼字符串的能力非常強大,但也非常危險。因此在使用eval()時必須極為謹慎,特別是在用它執行用戶輸入數據的情況下。否則,可能會有惡意用戶輸入威脅你的站點或應用程序安全的代碼(即所謂的代碼注入)。

 Math對象

  與我們在JavaScript直接編寫的計算功能相比,Math對象提供的計算功能執行起來要快得多。Math對象還提供了輔助完成這些計算的屬性。

屬性 描述
E 返回算術常量 e,即自然對數的底數(約等於2.718)。
LN2 返回 2 的自然對數(約等於0.693)。
LN10 返回 10 的自然對數(約等於2.302)。
LOG2E 返回以 2 為底的 e 的對數(約等於 1.414)。
LOG10E 返回以 10 為底的 e 的對數(約等於0.434)。
PI 返回圓周率(約等於3.14159)。
SQRT1_2 返回返回 2 的平方根的倒數(約等於 0.707)。
SQRT2 返回 2 的平方根(約等於 1.414)。

  Math對象包含的方法如下:

方法 描述
abs(x) 返回數的絕對值。
acos(x) 返回數的反余弦值。
asin(x) 返回數的反正弦值。
atan(x) 以介於 -PI/2 與 PI/2 弧度之間的數值來返回 x 的反正切值。
atan2(y,x) 返回從 x 軸到點 (x,y) 的角度(介於 -PI/2 與 PI/2 弧度之間)。
ceil(x) 對數進行上舍入。
cos(x) 返回數的余弦。
exp(x) 返回 e 的指數。
floor(x) 對數進行下舍入。
log(x) 返回數的自然對數(底為e)。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次冪。
random() 返回 0 ~ 1 之間的隨機數。
round(x) 把數四舍五入為最接近的整數。
sin(x) 返回數的正弦。
sqrt(x) 返回數的平方根。
tan(x) 返回角的正切。
toSource() 返回該對象的源代碼。
valueOf() 返回 Math 對象的原始值。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM