JS 一篇文章弄懂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聲明變量賦值是基本類型，只要修改值一定報錯；如果值是引用類型，比如值是一個數組，當我們直接使用賦值運算符整個替換數組還是會報錯，但如果我們不是整個替換數組而是修改數組中某個元素可以發現並不會報錯。

這是因為對於引用數據類型而言，變量保存的是數據存放的引用地址，比如b的例子，原本指向是[1]的地址，后面直接要把地址改成數組[1,2]的地址，這很明顯是不允許的，所以報錯了。但在c的例子中，我們只是把c地址指向的數組中的一位元素改變了，並未修改地址，這對於const是允許的。

而這個特性對於writable也是適用的，比如下面這個例子：

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

你看，修改成功了，所以針對MDNwritable為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

在上面例子模擬中，只要為o賦值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的介紹就結束了。

新增 ❀ 2020.6.16

關於上面這道題，考察的雖然是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;
console.log(p.age); // '少年'

其次是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，這樣又有一部分知識串起來了，賊開心！