重學前端-學習筆記-JavaScript對象

說明

重學前端是程劭非（winter）在極客時間開的一個專欄，在此主要整理個人學習筆記。若有侵權，請聯繫我，謝謝。

javascript對象特徵

• 對象具備惟一標識性：徹底相同的兩個對象，也不是同一個對象
• 對象具備狀態：同一對象會處於不一樣狀態下
• 對象具備行爲：行爲能夠改變對象的狀態

對象的惟一性是用內存地址來體現的， 對象具備惟一標識的內存地址，全部具備惟一標識性。

var o1 = { a: 1 };
 var o2 = { a: 1 };
 console.log(o1 == o2); // false
複製代碼

對象的行爲和狀態在js裏是對象的屬性。

var o = { 
        d: 1,
        f() {
            console.log(this.d);
        }    
    };

複製代碼

在js裏對象是動態的，能夠在運行時給對象添加屬性。

var o = { a: 1 };
    o.b = 2;
    console.log(o.a, o.b); //1 2
複製代碼

javascript對象的兩類屬性

在js裏，屬性不是簡單的名稱和值，js用一組特徵(attribute)來描述屬性(property)

數據屬性的四個特徵

• value：屬性的值
• writable：屬性是否能被賦值
• enumrable：可否用for in枚舉該屬性
• configurable：可否被刪除或修改

訪問器（getter/setter）屬性的四個特徵

• getter：函數或undefined，在取屬性值的時候被調用
• setter：函數或undefined，在設置屬性值的時候被調用
• enumrable：可否用for in枚舉該屬性
• configurable：可否被刪除或修改

訪問器屬性使得屬性在讀和寫時執行代碼，它容許使用者在寫和讀屬性時，獲得徹底不一樣的值，它能夠視爲一種函數的語法糖。

咱們一般用於定義屬性的代碼會產生數據屬性，其中的writable、enumerable、configurable 都默認爲true，能夠用getOwnPropertyDescriptor來查看

var o = { a: 1 };
    o.b = 2;
    //a 和 b 皆爲數據屬性
    Object.getOwnPropertyDescriptor(o,"a") // {value: 1, writable: true, enumerable: true, configurable: true}
    Object.getOwnPropertyDescriptor(o,"b") // {value: 2, writable: true, enumerable: true, configurable: true}
複製代碼

若是咱們要想改變屬性的特徵，或者定義訪問器屬性，咱們能夠使用defineProperty

var o = { a: 1 };
    Object.defineProperty(o, "b", {value: 2, writable: false, enumerable: false, configurable: true});
    //a 和 b 都是數據屬性，但特徵值變化了
    Object.getOwnPropertyDescriptor(o,"a"); // {value: 1, writable: true, enumerable: true, configurable: true}
    Object.getOwnPropertyDescriptor(o,"b"); // {value: 2, writable: false, enumerable: false, configurable: true}
    o.b = 3;
    console.log(o.b); // 2

複製代碼

在定義對象時，能夠用get和set關鍵字來定義訪問器屬性

var o = {
  get a(){return 1}
}

console.log(o.a)
複製代碼

訪問器屬性跟數據屬性不一樣，每次訪問屬性都會執行 getter或者 setter 函數。這裏咱們的 getter 函數返回1，全部o.a返回1

js對象在運行時是一個「屬性的集合」，屬性以字符串或者symbol爲key，以數據屬性特徵值或者訪問器屬性特徵值爲value