詳解Object.defineProperty()

HtmlCssJs 發布于2019-08-19 18:05 / 697人閱讀

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

前言

Object.defineProperty是ES5新增的一個API，其作用是給對象的屬性增加更多的控制。在我們日常的coding中，這個API用到的地方不多，然而它對于MVVM框架中雙向數據綁定（two-ways data binding）來說是至關重要的一個API，目前vue和avalon中的雙向數據數據綁定均是通過它來實現的。

使用

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

語法

Object.defineProperty(obj, prop, descriptor)

參數

obj: 需要定義屬性的對象（目標對象）

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

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

descriptor

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

value: 屬性的值

var a = {}

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

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

writable: 屬性是否能被重寫(rewrite)，默認為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中被枚舉出,來默認為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，默認為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 的方法，默認undefined

set: 一個給屬性提供 setter 的方法，默認undefined

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

數據描述符和存取描述符均具有可選鍵值：configurable, enumerable

數據描述符同時具有可選鍵值：value,writable,get,set

用思維導圖來表示就是：

get/set

對于set和get，我的理解是它們是一對勾子（hook）函數，當你對一個對象的某個屬性賦值時，則會自動調用相應的set函數；而當獲取屬性時，則調用get函數。這也是實現雙向數據綁定的關鍵。

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
*/

注意

數據描述符和存取描述符不能混合使用

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

GPU云服務器云服務器判斷詳解日志詳解屬性詳解算法詳解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79181.html

defineProperty詳解

摘要：擱置了幾天我還是決定再次重寫下邊我們來具體聊聊先從開始說起有個定義屬性的功能，應該沒幾個人用，因為相對于這種方式簡直不能再難用。擱置了幾天我還是決定再次重寫！下邊我們來具體聊聊先從defineProperty開始說起 defineproperty //defineproperty 有個定義object屬性的功能，應該沒幾個人用，因為相對于obj.a = 1這種方式簡直不能再難用。 ...

charles_paul 2019-08-23 14:30 評論0 收藏0
詳解JavaScript之神奇的Object.defineProperty

摘要：與當與同時為時，屬性不能重新使用定義，嚴格模式下會報錯示例云麒報錯當或者為時，屬性可以重新使用定義，這一點讀者不妨自行測試。摘要： JavaScript有個很神奇的Object.defineProperty()，了解一下？ =與Object.defineProperty 為JavaScript對象新增或者修改屬性，有兩種不同方式：直接使用=賦值或者使用Object.definePro...

baishancloud 2019-08-26 17:40 評論0 收藏0
JavaScript對象詳解

摘要：屬性描述符升級打怪必備技能對象有自己的屬性和方法，對于我們對象的屬性來講，屬性還有自己的屬性，又稱為屬性描述符。這個方法接受三個參數，第一個是指定的對象，第二個是指定的對象參數，第三個當然是要修改的屬性描述符了。對象的聲明有倆種：字面量通過new一個構造函數Object 兩者唯一的區別就是，字面量形式，可以一次賦值多個，通過new Object就得一個一個賦值數據類型 ...

fancyLuo 2019-08-26 12:14 評論0 收藏0
Javascript Object方法詳解

摘要：創建對象創建一個普通對象創建一個沒有原型的新對象不繼承任何屬性和方法返回對象中可枚舉的自我屬性的名稱的數組返回對象中所有自我屬性的名稱的數組屬性的特性屬性有兩種特性數據屬性和存取器屬性數據屬性存取器屬性可以獲得某個對象特定自有屬性的屬性描述 Object.create(o) 創建對象 Object.create({x: 1}) //創建一個普通對象 Object.create(null...

sushi 2019-08-21 10:52 評論0 收藏0
javascript對象原型成員詳解

摘要：和的作用一樣，區別在于寫法語法對象對象作用判斷對象是否在對象的原型鏈上語法對象構造函數作用判斷構造函數的屬性是否在對象的原型鏈上，如果在，就返回屬性是否可枚舉用于檢查給定的屬性是否能夠使用語句。 ## javascript對象原型成員詳解 ## ECMAScript 中的對象就是一組數據和功能的集合，對象可以通過 new 操作符后跟要創建的對象名稱來...

zhkai 2019-08-23 12:12 評論0 收藏0