重學前端系列-Javascript對象

Javascript對象的特徵

• 對象具備惟一標識性:即便徹底相同的兩個對象，也並不是同一個對象。（每一個對象的內存地址不一樣）
• 對象有狀態:對象具備狀態，同一個對象可能處於不一樣狀態之下。
• 對象具備行爲:即對象的狀態，可能由於他的行爲產生變遷。
• 對象的狀態和行爲都是用屬性來抽象的。

Javascript對象的兩類屬性

數據屬性

• value：屬性的值
• writable：決定屬性可否被賦值
• enumerable：決定for in可否枚舉該屬性
• configurable：決定該屬性可否被刪除或者改變特徵值

訪問器屬性

• getter：函數或者undefined，在取屬性值時被調用
• setter：函數或者undefined，在設置屬性值時被調用
• enumerable：決定for in可否枚舉該屬性
• configurable：決定該屬性可否被刪除或者改變特徵值

咱們可使用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}

複製代碼

若是想改變屬性的特徵或者定義訪問器屬性可使用Object.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); // 1

複製代碼

Javascript的原型

• 全部對象都有一個私有字段[[prototype]],就是對象的原型
• 讀一個屬性，若是對象自己沒有，則會繼續訪問對象的原型，直到原型爲空或者找到爲止。
• Object.create 根據指定的原型建立新對象，原型能夠是null
• Object.getPrototypeOf 獲取一個對象的原型
• Object.setPrototypeOf 設置一個對象的原型

new的總體實現過程

• 以構造器的prototype屬性爲原型，建立新對象。
• 將this和調用參數傳給構造器，執行
• 若是構造器返回的是對象，則返回，不然返回第一步建立的對象。

function mynew(){
        let obj = {};
        let con = [].shift.call(arguments)
        obj.__proto__ = con.prototype;
        let r = con.call(obj,arguments)
        return r instanceof Object ? r : obj;
    }
複製代碼

Object.create的實現

• 不支持第二個參數
• 不支持null做爲原型

Object.create = function(prototype){
        var cls = function(){}
        cls.prototype = prototype;
        return new cls;
    }

複製代碼