詳解Object.defineProperty()

HtmlCssJs 發(fā)布于2019-08-19 18:05 / 689人閱讀

摘要：前言是新增的一個，其作用是給對象的屬性增加更多的控制。使用方法提供了一種直接的方式來定義對象屬性或者修改已有對象屬性。數(shù)據(jù)描述符是一個擁有可寫或不可寫值的屬性。存取描述符是由一對函數(shù)功能來描述的屬性。這也是實(shí)現(xiàn)雙向數(shù)據(jù)綁定的關(guān)鍵。

前言

Object.defineProperty是ES5新增的一個API，其作用是給對象的屬性增加更多的控制。在我們?nèi)粘５腸oding中，這個API用到的地方不多，然而它對于MVVM框架中雙向數(shù)據(jù)綁定（two-ways data binding）來說是至關(guān)重要的一個API，目前vue和avalon中的雙向數(shù)據(jù)數(shù)據(jù)綁定均是通過它來實(shí)現(xiàn)的。

使用

Object.defineProperty方法提供了一種直接的方式來定義對象屬性或者修改已有對象屬性。

語法

Object.defineProperty(obj, prop, descriptor)

參數(shù)

obj: 需要定義屬性的對象（目標(biāo)對象）

prop: 需被定義或修改的屬性名（對象上的屬性或者方法）

descriptor: 需被定義或修改的屬性的描述符

descriptor

obj和prop都比較好理解，我們重點(diǎn)來解析第三個參數(shù)屬性描述符，它是一個對象，里面有以下取值：

value: 屬性的值

var a = {}

Object.defineProperty(a, "b", {
    value: 2
})

console.log(a.b); // => 2

writable: 屬性是否能被重寫(rewrite)，默認(rèn)為false

var a = {}

Object.defineProperty(a, "b", {
    value: 2,
    writable: false
})

console.log(a.b); // output 2

a.b = 3

console.log(a.b); // still ouput  2

enumerable: 屬性是否能在for ... in或者Object.keys中被枚舉出,來默認(rèn)為false

var a = {}

Object.defineProperty(a, "b", {
    value: 2,
    enumerable: false
})

console.log(Object.keys(a)) // output []

Object.defineProperty(a, "c", {
    value: 2,
    enumerable: true
})

console.log(Object.keys(a)) // output ["c"]

configurable: 是否能夠配置value，writable，configurable，默認(rèn)為false

var a = {}

Object.defineProperty(a, "b", {
    value: 2,
    enumerable: false
})

console.log(a.b) // output 2

Object.defineProperty(a, "b", {
    value: 3,
    enumerable: true
})

// TypeError: Cannot redefine property: b

get: 一個給屬性提供 getter 的方法，默認(rèn)undefined

set: 一個給屬性提供 setter 的方法，默認(rèn)undefined

屬性描述符分為數(shù)據(jù)描述符和存取描述符。數(shù)據(jù)描述符是一個擁有可寫或不可寫值的屬性。存取描述符是由一對 getter-setter 函數(shù)功能來描述的屬性。

數(shù)據(jù)描述符和存取描述符均具有可選鍵值：configurable, enumerable

數(shù)據(jù)描述符同時具有可選鍵值：value,writable,get,set

用思維導(dǎo)圖來表示就是：

get/set

對于set和get，我的理解是它們是一對勾子（hook）函數(shù)，當(dāng)你對一個對象的某個屬性賦值時，則會自動調(diào)用相應(yīng)的set函數(shù)；而當(dāng)獲取屬性時，則調(diào)用get函數(shù)。這也是實(shí)現(xiàn)雙向數(shù)據(jù)綁定的關(guān)鍵。

var a = {}
var b

Object.defineProperty(a, "b", {
    get: function() {
        console.log("get b")

        // 我們可以在這里對返回的值做任何操作
        return b + 1
    },
    set: function(newValue) {
        console.log("set b to", newValue)
        b = newValue
    }
})

a.b = 100

console.log(a.b);

/*
output:
  set b to 100
  get b
  101
*/

注意

數(shù)據(jù)描述符和存取描述符不能混合使用

Object.defineProperty(o, "conflict", {
  // value是數(shù)據(jù)描述符
  value: 1,
  // get是存取描述符
  get: function() {
    return 2;
  }
});
// throws a TypeError: value appears only in data descriptors, get appears only in accessor descriptors