【JS】827- 徹底搞懂Object.defineProperty

作者：聽風是風

前言

早在大半年前，掘金某位使用者分享的面試題整理中有一題，

簡述let與const差別，你能自己模拟實作它們嗎？

，題目意思大概如此，時間久遠我也很難找到那篇文章，當時看到此題對于

const

實作我的想法就是有個

writable

屬性可以定義值是否可以修改，不過也隻是腦中一閃，并未細究。

半個月前，前前同僚發了一份深圳某公司的筆試題我，整體題目不難（不難是指每題都知道考的什麼知識點，腦中都能想到該用什麼去解決，但知識不一定很精通），其中有一道手寫程式設計題，題目描述如下：

使用function和class兩種方案，寫一個類Person，可以設定年齡為正整數，年齡區段傳回少年（0-20），中年（21-40）以及老年（其他）。

例如：

Person.age = 1;
console.log(Person.age);// '少年'

在我印象裡JavaScript對象是可以用

getter

與

setter

來解決這個問題的，存一個數字進去，取的時候根據數字範圍傳回對應年齡段，我隻是說了我的想法，并未真正去實作它，因為我對于這兩個方法也隻是有點印象而已。

昨天，在我通讀vue文檔過程中，一篇名為深入響應式原理吸引了我的注意，文中簡述了vue資料響應式的原理，以及在操作數組與對象時需要注意的點，在實作上vue也使用了

Object.defineProperty

方法，聯想到vue計算屬性的

getter

與

setter

，我想是時候弄懂這個API了，那麼請各位跟随我的腳步，好好認識這個在JavaScript中高頻出現的API，本文開始。

從零認識defineProperty

基本用法與屬性

讓我們從基本概念說起，這裡引用MDN解釋：

Object.defineProperty 方法用于在對象上定義一個新屬性，或者修改對象現有屬性，并傳回此對象。注意，請通過Object構造器調用此方法，而不是對象執行個體。

方法基本文法如下：

Object.defineProperty(obj, prop, descriptor)

OK，結合基本用法與概念，我們來試試添加屬性與修改屬性。

// 添加屬性
let o = {};
Object.defineProperty(o, 'name', {value:'echo'});
o.name;// 'echo'

// 修改現有屬性
o.age = 27;
// 重返18歲
Object.defineProperty(o, 'age', {value:18});
o.age;// 18

通過上面的例子示範我們可知，文法中的

obj

是我們要添加/修改屬性的對象，

prop

是我們希望添加/修改的屬性名，而

descriptor

是我們添加/修改屬性的具體描述，

descriptor

包含屬性較多，我們展開說。

descriptor中的資料描述符

Object.defineProperty

方法中的descriptor屬性繁多，是以它也非常強大，我們之前說的資料劫持，資料是否可寫，是否可删除，是否可枚舉都在這個descriptor中定義。在介紹每個屬性前，我們還得引入一個新概念，即：

對象裡目前存在的屬性描述符有兩種主要形式：資料描述符和存取描述符。資料描述符是一個具有值的屬性，該值可以是可寫的，也可以是不可寫的。存取描述符是由 getter 函數和 setter 函數所描述的屬性。一個描述符隻能是這兩者其中之一，不能同時是兩者。

descriptor中包含的屬性也分為了兩類，怕大家弄混淆，這裡我用圖分個類：

descriptor中屬性包含6個（參考上圖），我将其分為了3類，資料描述符類（value，writable），存取描述符類（get，set），以及能與資料描述符或者存取描述符共存的共有屬性（configurable，enumerable）。

讓我們一一介紹它們，在對象添加屬性以及修改屬性時已經展示過value屬性的作用了，是以這裡直接從writable開始。

writable是一個布爾值，若不定義預設為false，表示此條屬性隻可讀，不可修改，舉個例子：

let o = {};
Object.defineProperty(o, 'name', {
    value: '聽風是風',
    writable: false
});
// 嘗試修改name屬性
o.name = '時間跳躍';
// 再次讀取，結果并未修改成功
o.name;// 聽風是風

注意，如果在嚴格模式下，修改

writable

屬性為false的對象屬性會報錯。但如果将上述代碼的

writalbe

改為false就可以随意更改了。

而在MDN中關于

writable

屬性的描述為：

當該屬性的 writable 鍵值為 true 時，屬性的值，也就是上面的 value ，才能被 指派運算符 改變。

這裡我做個知識補充，讓MDN這句描述更為準确。

在面試時有時候會被問到，

const

聲明的變量是否可修改，準确來說可以改，分兩種情況：

// 值為基本類型
const a = 1;
a = 2;// 報錯

// 值為複雜類型
const b = [1];
b = [1,2];// 報錯

const c = [1];
c[0] = 0;
c;// [0]

如果我們

const

聲明變量指派是基本類型，隻要修改值一定報錯；如果值是引用類型，比如值是一個數組，當我們直接使用指派運算符整個替換數組還是會報錯，但如果我們不是整個替換數組而是修改數組中某個元素可以發現并不會報錯。

這是因為對于引用資料類型而言，變量儲存的是資料存放的引用位址，比如

的例子，原本指向是

[1]

的位址，後面直接要把位址改成數組

[1,2]

的位址，這很明顯是不允許的，是以報錯了。但在

的例子中，我們隻是把

位址指向的數組中的一位元素改變了，并未修改位址，這對于const是允許的。

而這個特性對于

writable

也是适用的，比如下面這個例子：

let o = {};
Object.defineProperty(o, 'age', {
    value: [27],
    writable: false
});
// 嘗試修改name屬性
o.age[0] = 18;
// 再次讀取，修改成功
o.age; // 18

你看，修改成功了，是以針對MDN

writable

為true才能被指派運算符改變這句話不一定正确，比如上個例子我們就是用指派運算符修改了數組索引為0的一項的值，具體問題具體看待，這裡做個補充。

descriptor中的存取描述符

OK，我們介紹了descriptor中的資料描述符相關的

vaule

與

writbale

，接着聊聊有趣的存取描述符，也就是在vue中也出現過

getter、setter

方法。

我們知道，JavaScript中對象指派與取值非常友善，有如下兩種方式：

let o = {};
// 通過.指派取值
o.name = 'echo';
//通過[]指派取值，這種常用于key為變量情況
o['age'] = 27;

一個很直覺的感受就是，對象指派就是種瓜得瓜種豆得豆，我們給對象賦予了什麼，擷取的就是什麼。那大家有沒有想過這種情況，指派時我提供1，但取值我希望是2。巧了，這種情況我們就可以使用

Object.defineProperty()

中的存取描述符來解決這個需求。說直白點，存取描述符給了我們指派/取值時資料劫持的機會，也就就是在指派與取值時能自定義做一些操作，

getter

函數在擷取屬性值時觸發，注意，是你為某個屬性添加了

getter

在擷取這個屬性才會觸發，如果未定義則為undefined，該函數的傳回值将作為你通路的屬性值。

setter

函數在設定屬性時觸發，同理你得為這個屬性提前定義這個方法才行，設定的值将作為參數傳入到

setter

函數中，在這裡我們可以加工資料，若未定義此方法預設也是undefined。

OK，讓我們用

getter

與

setter

模拟最常見的對象指派與取值，看個例子：

let o = {};
o.name = '聽風是風';
o.name; // '聽風是風'

//使用get set模拟指派取值操作
let age;
Object.defineProperty(o, 'age', {
    get() {
        // 直接傳回age
        return age;
    },
    set(val) {
        // 指派時觸發，将值賦予變量age
        age = val;
    }
});
o.age = 18;
o.age; // 18

在上面例子模拟中，隻要為

指派

setter

就會觸發，并将值賦予給age，那麼在讀取值

getter

直接傳回變量age即可。

OK，到這裡我們順利學習了存取描述符

setter

與

getter

。

descriptor中的共有屬性

最後，讓我們了解剩餘兩個屬性

configurable

與

enumerable

。

enumerable

值類型為Boolean，表示該屬性是否可被枚舉，啥意思？我們知道對象中有個方法

Object.keys()

用于擷取對象可枚舉屬性，比如：

let o = {
    name: '聽風是風',
    age: 27
};
Object.keys(o); // ['name','age']

通俗點來說，上面例子中的兩個屬性還是可以周遊通路的，但如果我們設定

enumerable

為false，就會變成這樣：

let o = {
    name: '聽風是風'
};
Object.defineProperty(o, 'age', {
    value: 27,
    enumerable: false
});
// 無法擷取keys
Object.keys(o); // ['name']
// 無法周遊通路
for (let i in o) {
    console.log(i); // 'name'
};

configurable

的值也是Boolean，預設是false，

configurable

特性表示對象的屬性是否可以被删除，以及除

value

和

writable

特性外的其他特性是否可以被修改。

先說删除，看個例子：

let o = {
    name: '聽風是風'
};
Object.defineProperty(o, 'age', {
    value: 27,
    configurable: false
});

delete o.name;//true
delete o.age;//false

o.name;//undefined
o.age;//18

删除好說，我們來看看它對于其它屬性的影響，看個例子：

var o = {};
Object.defineProperty(o, 'name', {
    get() {
        return '聽風是風';
    },
    configurable: false
});
// 報錯，嘗試通過再配置修改name的configurable失敗，因為已經定義過了configurable
Object.defineProperty(o, 'name', {
    configurable: true
});

//報錯，嘗試修改name的enumerable為true，失敗，因為未定義預設為false
Object.defineProperty(o, 'name', {
    enumerable: true
});

//報錯，嘗試新增set函數，失敗，一開始沒定義set預設為undefined
Object.defineProperty(o, 'name', {
    set() {}
});

//嘗試再定義get，報錯，已經定義過了
Object.defineProperty(o, 'name', {
    get() {
        return 1;
    }
});

// 嘗試添加資料描述符中的vaule，報錯，資料描述符無法與存取描述符共存
Object.defineProperty(o, 'name', {
    value: 12
});

由于前面我們說了，未定義的屬性雖然沒用代碼寫出來，但它們其實都有了預設值，當

configurable

為false時，這些屬性都無法被重新定義以及修改。

其它注意點

那麼到這裡，我們把descriptor中所有屬性都介紹完了，在使用中有幾點需要強調，這裡再彙總一下。

前面概念已經提出對象屬性描述符要麼是資料描述符（value，writable），要麼是存取描述符（get，set），不應該同時存在兩者描述符。

var o = {};
Object.defineProperty(o, 'name', {
    value: '時間跳躍',
    get() {
        return '聽風是風';
    }
});

這個例子就會報錯，其實不難了解，存取方法就是用來定義屬性值的，value也是用來定義值的，同時定義程式也不知道該以哪個為準了，是以用了

value/writable

其一，就不能用

get/set

了；不過

configurable

與

enumerable

這兩個屬性可以與上面兩種屬性任意搭配。

我們在前面已經說了各個屬性是有預設值的，是以在用

Object.defineProperty()

時某個屬性沒定義不是代表沒用這條屬性，而是會用這條屬性的預設值。

let o = {};
Object.defineProperty(o, 'name', {
    value: '時間跳躍'
});

//等同于
Object.defineProperty(o, 'name', {
    value: '時間跳躍',
    writable: false,
    enumerable: false,
    configurable: false
});

同理，以下代碼也對等：

var o = {};
o.name = '聽風是風';

//等同于
Object.defineProperty(o, 'name', {
    value: '聽風是風',
    writable: true,
    enumerable: true,
    configurable: true
});

//等同于
let name = '聽風是風';
Object.defineProperty(o, 'name', {
    get() {
        return name;
    },
    set(val) {
        name = val;
    },
    enumerable: true,
    configurable: true
});

關于屬性分類與預設值，如下表：

configurable	enumerable	value	writable	get	set
資料描述符	可以	可以	可以	可以	不可以	不可以
存取描述符	可以	可以	不可以	不可以	可以	可以
預設值	false	false	false	false	undefined	undefined

現學現用，趁熱打鐵

那麼到這裡，我們詳細介紹了

Object.defineProperty

相關屬性與用法，趁熱打鐵，我們活用它來解決一些問題。原本我想通過模拟vue資料雙向綁定，模拟const以及解決文章開頭面試題，但礙于文章篇幅确實過長了，const模拟大家感興趣可自行百度，vue資料雙向綁定我會另起一篇文章，是以這裡就來解決文章開頭的題目好了。

我們提取題目細節，年齡隻接受正整數（在set中判斷），畢竟沒人是負年齡，其次對應範圍有對應的年齡段，根據年齡傳回對應年齡段即可（在get中操作）；

這裡直接上function的實作：

function Person() {
    // 初始化年齡
    let age;
    Object.defineProperty(this, "age", {
        get() {
            let ageRange = [41, 20, 0],
                level = ['老年', '中年', '少年'];
            for (let i = 0; i < ageRange.length; i++) {
                // 根據年紀大小傳回對應範圍
                if (age >= ageRange[i]) {
                    return level[i];
                };
            };
        },
        set(val) {
            // 年齡隻儲存正整數
            val >= 0 ? age = val : null;
        }
    });
};

let p = new Person();
p.age = 1;
console.log(p.age); // '少年'
p.age = 39;
console.log(p.age); // '中年'
p.age = 41;
console.log(p.age); // '老年'

值得一提的是，實作代碼中我們将需要年齡與相關傳回值配置成了數組，而非常理上的

if...else if...

，這樣做的好處是即便修改年齡或者增加年齡範圍，我們要做的也僅僅是修改數組配置即可，而不需要對邏輯層中添加更多的

if...else

。更多條件判斷優雅寫法歡迎閱讀部落客這篇文章提升代碼幸福度，五個技巧減少js開發中的if else語句

為什麼我不用ES6的class類來實作上面的操作了，因為公司不允許使用ES6，去年學的關于類好多都忘記了...整理這篇文章也花了好長時間，腦袋有點沉，這個改寫就留給各位強大的網友吧。

那麼到這裡，關于

Object.defineProperty

的介紹就結束了。

補充

關于上面這道題，考察的雖然是

Object.definedProperty

的getter與setter，不過出題人的本意不是希望這麼用的，任何對象在定義時候可以添加get，set方法，比如：

let p = {
    age_: 27,
    name: 'echo',
    get age() {
        return this.age_;
    },
    get name() {
        return '聽風是風'
    }
};
p.name; // 聽風是風
p.age; // 27

那麼知道了這一點，我們來按照出題人的本意來分别實作上面的題目，首先是function情況：

function Person() {
    // 初始化年齡
    this.age_ = undefined;

};
// 在函數原型上定義age的get，set方法
Person.prototype = {
    get age() {
        let ageRange = [41, 20, 0],
            level = ['老年', '中年', '少年'];
        for (let i = 0; i < ageRange.length; i++) {
            // 根據年紀大小傳回對應範圍
            if (this.age_ >= ageRange[i]) {
                return level[i];
            };
        };
    },
    set age(val) {
        // 年齡隻儲存正整數
        val >= 0 ? this.age_ = val : null;
    }
}

let p = new Person();
p.age = 1;

其次是ES6的class類：

class Person {
    constructor(age) {
        // 這裡就等同于我的第一個實作裡面let age，是一個中間變量
        this.age_ = undefined;
    }
    // ES6中，原型方法可直接定義在類中
    get age() {
        let ageRange = [41, 20, 0],
            level = ['老年', '中年', '少年'];
        for (let i = 0; i < ageRange.length; i++) {
            // 根據年紀大小傳回對應範圍
            if (this.age_ >= ageRange[i]) {
                return level[i];
            };
        };
    }
    set age(age) {
        age >= 0 ? this.age_ = age : null;
    }

};

var p = new Person();
p.age = 1;
console.log(p.age); //少年

OK，這樣又有一部分知識串起來了，賊開心！

【JS】827- 徹底搞懂Object.defineProperty

前言

從零認識defineProperty

基本用法與屬性

descriptor中的資料描述符

descriptor中的存取描述符

descriptor中的共有屬性

其它注意點

現學現用，趁熱打鐵

補充

繼續閱讀

mysql5.7的sql優化

線程通信和程序通信差別（線程程序差別）

Matlab随機波動率SV、GARCH用MCMC馬爾可夫鍊蒙特卡羅方法分析匯率時間序列

微信小程式前端解密擷取使用者資訊

Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動

《MySQL技術内幕：InnoDB存儲引擎》筆記

擴容TIKV節點遇到的坑

PHP輔導代做程式設計：CS353 Database System

HDU 4609 3-idiots

自學Zabbix3.10.2-事件通知Notifications upon events-Actions報警配置點選傳回：自學zabbix集錦

HDU 5678 ztr loves trees

拓端tecdat|R語言彈性網絡Elastic Net正則化懲罰回歸模型交叉驗證可視化

二叉樹及其應用--二叉樹建立

HDU 1402 A * B Problem Plus

數組和類數組

詳解STM32單片機的堆棧

【JS】827- 徹底搞懂Object.defineProperty

前言​

從零認識defineProperty​

基本用法與屬性

descriptor中的資料描述符

descriptor中的存取描述符

descriptor中的共有屬性

其它注意點

現學現用，趁熱打鐵​

補充​

繼續閱讀

前言

從零認識defineProperty

現學現用，趁熱打鐵

補充