1. 程式人生 > >JavaScript語言精粹之物件篇

JavaScript語言精粹之物件篇

1.物件字面量
用來建立新物件值,位置不限,包含多個“名值”對

var empty_object = {};
var stooge = {
    "first-name" : "zhang",
    "last-name" : "fei"
}

屬性名稱如果是一個合法的JS識別符號且不是保留字
我們可以不用引號將屬性包起來
但是像first-name這種就必須用引號了

var flight = {
    airline : "BeiJing",
    number : 212,
    departure : {
        IATA : "GZ",
        time
: "2000-12-12 10:00", city : "GuangZhou" }, arrival : { IATA : "SH", time : "2000-12-12 22:40", city : "ShangHai" } }

2.檢索
使用[]的訪問被“”包含的字串屬性

alert(stooge['first-name']);    // zhang
alert(flight['number']);        // 212

使用.訪問合法的JS表示符表示的屬性,優先使用

alert(flight.number
); // 212 alert(stooge.first-name); //NaN

如果訪問一個不存在的屬性,那麼返回undefined

alert(flight.price);        // undefined

可以用||填充預設值

var price = flight.price || "$100";
alert(price);       // $100

訪問undefined的屬性會丟擲TypeError異常,可以使用&&遮蔽錯誤

alert(alert(flight.price));     // undefined
alert(flight.price.cheap)
; // 丟擲異常 alert(flight.price && flight.price.cheap); // undefined

3.更新
對於物件中存在的屬性,可以直接通過賦值修改

stooge["first-name"] = "li";
alert(stooge["first-name"]);    // li

對於物件中不存在的屬性,直接擴充到物件中

stooge["middle-name"] = "xiao";
alert(stooge["middle-name"]);   // xiao

4.引用
物件通過引用來傳遞,從來不會被拷貝

var zhang = stooge;
zhang.nickname = "tom";
alert(stooge.nickname);     // tom
// zhang和stooge引用同一個物件,只是兩個不同的指標
var a = {}, b = {}, c = {};
// 引用三個不同的物件
a = b = c = {};
// 引用一個物件

5.原型
每個物件都連線一個原型,可以繼承原型中的屬性
所有的通過物件字面量建立的物件都連線到Object.prototype這個標準的JS原型
當你建立物件時,可以選擇某個物件作為它自己的原型

if (! typeof Object.beget != "function") {
    Object.beget = function (o) {
        var F = function () {};
        F.prototype = o;
        return new F();
    }
}
var another_stooge = Object.beget(stooge);
alert(another_stooge['first-name']);    // zhang
alert(another_stooge['last-name']);     // fei

委派的過程:查詢物件的屬性 –> 查詢原型物件的屬性 –> 查詢原型的屬性 …–> Object.prototype中去
例如查詢another_stooge的’first-name’的屬性值,首先從該物件開始,然後去原型物件stooge中,找到了
如果沒有找到,繼續到原型中找,一直找到Object.prototype中,如果沒有,則返回undefined
6.反射
檢測物件有什麼型別的屬性很容易,用typeof

alert(typeof stooge['first-name']);     // string
alert(typeof flight.number);            // number

原型鏈中的任意一個屬性都會返回一個值

alert(typeof flight.constructor);       // function 
alert(typeof flight.toString);          // function 
alert(typeof Object.beget);                 // function 
function Person () {
    this.name = "zhang";
}
Person.prototype.getName = function () {
    return this.name;
}
var p = new Person();
alert(typeof p.name);       // string
alert(typeof p.getName);    // function

處理不需要的屬性,用hasOwnProperty,如果例項物件有屬性返回true,否則返回false。它不會檢查原型鏈屬性

var p = new Person();
p.name = "li";
alert(p.hasOwnProperty("name"));    // true

7.列舉
for in語句遍歷物件的所有屬性,包含函式或者原型中的你可能不關心的屬性

for(var s in flight) {
    if(typeof flight[s] !== "function") {
        // airline = BeiJing number = 212 departure = [object Object] arrival = [object Object] 
        document.writeln(s + " = " + flight[s]);
    }
}

按照特定的順序返回,那麼可以將陣列和for迴圈結合起來實現

var index = ["arrival", "airline", "departure", "number"],
    i, len;
for(i = 0, len = index.length; i < len; i++) {
    // arrival = [object Object] airline = BeiJing departure = [object Object] number = 212 
    document.writeln(index[i] + " = " + flight[index[i]]);
}

8.刪除
delete可以刪除物件中的屬性,但是它不會觸發原型鏈中的任何物件
delete刪除物件中的屬性,可以把原型中的值顯示出來

another_stooge['first-name'] = "li";
alert(another_stooge['first-name']);    // li
delete another_stooge['first-name'];
alert(another_stooge['first-name']);    // zhang

9.減少全域性汙染
將你的應用程式全部打包到一個唯一的全域性變數中

var MYAPP = {};
MYAPP.stooge = {
    "first-name" : "zhang",
    "last-name" : "fei"
}
MYAPP.flight = {
    airline : "BeiJing",
    number : 212,
    departure : {
        IATA : "GZ",
        time : "2000-12-12 10:00",
        city : "GuangZhou"
    },
    arrival : {
        IATA : "SH",
        time : "2000-12-12 22:40",
        city : "ShangHai"
    }
};
alert(MYAPP.stooge['first-name']);// zhang
alert(MYAPP.flight.number);     // 212