1. 程式人生 > >理解Object.defineProperty的作用

理解Object.defineProperty的作用

通過 define strong 發的 property html rabl www 特性

Object.defineProperty 是vue中雙向綁定的基礎。vue是通過數據劫持的方式來做數據綁定的,最核心的方法是通過 Object.defineProperty()方法來實現對屬性的劫持,達到能監聽到數據的變動。要實現數據的雙向綁定,

當使用存取器描述屬性的特性的時候,允許設置以下特性屬性:

var obj = {};
Object.defineProperty(obj,"newKey",{
    get:function (){} | undefined,
    set:function (value){} | undefined
    configurable: true | false
    enumerable: true | false
});
value: 設置屬性的值
writable: 值是否可以重寫。true | false
enumerable: 目標屬性是否可以被枚舉。true | false
configurable: 目標屬性是否可以被刪除或是否可以再次修改特性 true | false

註意:當使用了getter或setter方法,不允許使用writable和value這兩個屬性

getter/setter

當設置或獲取對象的某個屬性的值的時候,可以提供getter/setter方法。

  • getter 是一種獲得屬性值的方法

  • setter是一種設置屬性值的方法。

在特性中使用get/set屬性來定義對應的方法。

示例

技術分享圖片
var obj = {};
var initValue = ‘hello‘;
Object.defineProperty(obj,"newKey",{
    get:function (){
        //當獲取值的時候觸發的函數
        return
initValue; }, set:function (value){ //當設置值的時候觸發的函數,設置的新值通過參數value拿到 initValue = value; } }); //獲取值 console.log( obj.newKey ); //hello //設置值 obj.newKey = ‘change value‘; console.log( obj.newKey ); //change value
View Code

https://segmentfault.com/a/1190000007434923

http://www.cnblogs.com/tugenhua0707/p/7589602.html

理解Object.defineProperty的作用