javaScript中的Object.defineProperty()和defineProperties()

阿新 • • 發佈：2018-12-10

ECMAS-262第5版在定義只有內部採用的特性時，提供了描述了屬性特徵的幾種屬性。ECMAScript物件中目前存在的屬性描述符主要有兩種，資料描述符(資料屬性)和存取描述符(訪問器屬性)，資料描述符是一個擁有可寫或不可寫值的屬性。存取描述符是由一對 getter-setter 函式功能來描述的屬性。

Object的defineProperty和defineProperties這兩個方法在js中的重要性十分重要，主要功能就是用來定義或修改這些內部屬性,與之相對應的getOwnPropertyDescriptor和getOwnPropertyDescriptors就是獲取這行內部屬性的描述。

下面文章我先介紹資料描述符和存取描述符的屬性代表的含義，然後簡單介紹以上四個方法的基本功能，這些如果瞭解可直接跳過，最後我會舉例擴充套件及說明各內部屬性在各種場景下產生的實際效果，那才是這篇文章的核心內容。本文章關於概念性的描述還是會盡量使用《javaScript高階教程》、MDN網站等概念，保證準確和易於大家理解，講解部分則結合個人理解和舉例說明。

資料(資料描述符)屬性

資料屬性有4個描述內部屬性的特性

[[Configurable]]

表示能否通過delete刪除此屬性，能否修改屬性的特性，或能否修改把屬性修改為訪問器屬性，如果直接使用字面量定義物件，預設值為true

[[Enumerable]]

表示該屬性是否可列舉，即是否通過for-in迴圈或Object.keys()返回屬性，如果直接使用字面量定義物件，預設值為true

[[Writable]]

能否修改屬性的值，如果直接使用字面量定義物件，預設值為true

[[Value]]

該屬性對應的值，預設為undefined

訪問器(存取描述符)屬性

訪問器屬性也有4個描述內部屬性的特性

[[Configurable]]

和資料屬性的[[Configurable]]一樣，表示能否通過delete刪除此屬性，能否修改屬性的特性，或能否修改把屬性修改為訪問器屬性，如果直接使用字面量定義物件，預設值為true

[[Enumerable]]

和資料屬性的[[Configurable]]一樣，表示該屬性是否可列舉，即是否通過for-in迴圈或Object.keys()返回屬性，如果直接使用字面量定義物件，預設值為true

[[Get]]

一個給屬性提供 getter 的方法(訪問物件屬性時呼叫的函式,返回值就是當前屬性的值)，如果沒有 getter 則為 undefined。該方法返回值被用作屬性值。預設為 undefined

[[Set]]

一個給屬性提供 setter 的方法(給物件屬性設定值時呼叫的函式)，如果沒有 setter 則為 undefined。該方法將接受唯一引數，並將該引數的新值分配給該屬性。預設為 undefined

建立/修改/獲取屬性的方法

Object.defineProperty()

功能: 方法會直接在一個物件上定義一個新屬性，或者修改一個物件的現有屬性，並返回這個物件。如果不指定configurable, writable, enumerable ，則這些屬性預設值為false，如果不指定value, get, set，則這些屬性預設值為undefined

語法: Object.defineProperty(obj, prop, descriptor)

obj: 需要被操作的目標物件prop: 目標物件需要定義或修改的屬性的名稱descriptor: 將被定義或修改的屬性的描述符

var obj = new Object();

Object.defineProperty(obj, 'name', {
    configurable: false,
    writable: true,
    enumerable: true,
    value: '張三'
})

console.log(obj.name)  //張三

Object.defineProperties()

功能: 方法直接在一個物件上定義一個或多個新的屬性或修改現有屬性，並返回該物件。

語法: Object.defineProperties(obj, props)

obj: 將要被新增屬性或修改屬性的物件props: 該物件的一個或多個鍵值對定義了將要為物件新增或修改的屬性的具體配置

var obj = new Object();
Object.defineProperties(obj, {
    name: {
        value: '張三',
        configurable: false,
        writable: true,
        enumerable: true
    },
    age: {
        value: 18,
        configurable: true
    }
})

console.log(obj.name, obj.age) // 張三, 18

Object.getOwnPropertyDescriptor()

功能: 該方法返回指定物件上一個自有屬性對應的屬性描述符。（自有屬性指的是直接賦予該物件的屬性，不需要從原型鏈上進行查詢的屬性）

語法: Object.getOwnPropertyDescriptor(obj, prop)

obj: 需要查詢的目標物件prop: 目標物件內屬性名稱

var person = {
    name: '張三',
    age: 18
}

var desc = Object.getOwnPropertyDescriptor(person, 'name'); 
console.log(desc)  結果如下
// {
//     configurable: true,
//     enumerable: true,
//     writable: true,
//     value: "張三"
// }

Object. getOwnPropertyDescriptors()

功能: 所指定物件的所有自身屬性的描述符，如果沒有任何自身屬性，則返回空物件。

語法: Object.getOwnPropertyDescriptors(obj)

obj: 需要查詢的目標物件

var person = {
    name: '張三',
    age: 18
}
var desc = Object.getOwnPropertyDescriptors(person, 'name');
console.log(desc) // 結果如下圖

console結果

各種場景下描述符屬性的的擴充套件示例講解

configrubale

如果設定configrubale屬性為false，則不可使用delete操作符(在嚴格模式下丟擲錯誤), 修改所有內部屬性值會丟擲錯誤,在《javaScript高階教程中》說只可以改變writable的值，現在改變writable的值也會丟擲錯誤

在物件中新增一個數據描述符屬性

var person = {};

Object.defineProperty(person, 'name', {
    configurable: false,
    value: 'John'
}) ;

delete person.name   // 嚴格模式下丟擲錯誤

console.log(person.name)  // 'John'  沒有刪除

Object.defineProperty(person, 'name', {
    configurable: true  //報錯
});

Object.defineProperty(person, 'name', {
    enumerable: 2  //報錯
});

Object.defineProperty(person, 'name', {
    writable: true  //報錯
});

Object.defineProperty(person, 'name', {
    value: 2  //報錯
});

注意: 以上是最開始定義屬性描述符時,writabl預設為false,才會出現上述效果,如果writable定義為true, 則可以修改[[writable]]和[[value]]屬性值,修改另外兩個屬性值報錯

var obj = {};

Object.defineProperty(obj, 'a', {
    configurable: false,
    writable: true,
    value: 1
});

Object.defineProperty(obj, 'a', {
    // configurable: true, //報錯
    // enumerable: true,  //報錯
    writable: false,
    value: 2
});
var d = Object.getOwnPropertyDescriptor(obj, 'a')
console.log(d);
// {
//     value: 2, 
//     writable: false, 
// }

在物件中新增存取描述符屬性

var obj = {};
var aValue; //如果不初始化變數, 不給下面的a屬性設定值,直接讀取會報錯aValue is not defined
var b;
Object.defineProperty(obj, 'a', {
    configurable : true,
    enumerable : true,
    get: function() {
        return aValue
    },
    set: function(newValue) {
        aValue = newValue;
        b = newValue + 1
    }
})
console.log(b) // undefined
console.log(obj.a)  // undefined, 當讀取屬性值時，呼叫get方法,返回undefined
obj.a = 2;  // 當設定屬性值時,呼叫set方法,aValue為2

console.log(obj.a) // 2  讀取屬性值,呼叫get方法,此時aValue為2
console.log(b) // 3  再給obj.a賦值時,執行set方法,b的值被修改為2,額外說一句,vue中的計算屬性就是利用setter來實現的

注意:1.getter和setter可以不同時使用,但在嚴格模式下只其中一個,會丟擲錯誤2.資料描述符與存取描述符不可混用,會丟擲錯誤

var obj = {};
Object.defineProperty(obj, 'a', {
    value: 'a1',
    get: function() {
       return 'a2'
    }    
});

3.全域性環境下:

var a = 1; // a屬於window, 相當於window.a

讓我們來看看a的描述符屬性

var d = Object.getOwnPropertyDescriptor(window, 'a');
console.log(d)
// {
//     configurable: false,
//     value: 1,
//     writable: true,
//     enumerable: true
// }

在來看一下另一種不適用var宣告的方式初始化a變數

a = 1; //a相當於window的一個屬性, window.a

再來看看此時a的描述符屬性

var d = Object.getOwnPropertyDescriptor(window, 'a');
console.log(d)
// {
//     configurable: true,   // 此時configurable屬性值為true
//     value: 1,
//     writable: true,
//     enumerable: true
// }

注意:

只有使用var, let等操作符才是定義變數，而不使用var，直接a=1;,這樣a的含義為window的一個屬性，並不是我們所說的變數的概念。使用 var定義的任何變數，其configurable屬性值都為false,定義物件也是一樣

var b = {
    name: 'bbb'
}
var d = Object.getOwnPropertyDescriptor(window, 'b');
console.log(d)
// {
//     configurable: false
//     value: 1,
//     writable: true,
//     enumerable: true
// }

但是這裡需要說明的一點是,使用字面量定義的物件,該物件內部的屬性的資料描述符屬性都為true

var b = {
    name: 'bbb'
}
var d = Object.getOwnPropertyDescriptor(b, 'name');
console.log(d)
// {
//     configurable: true
//     writable: true,
//     enumerable: true
//     value: 'bbb'
// }

Writable

當writable為false(並且configrubale為true),[[value]]可以通過defineeProperty修改, 但不能直接賦值修改

var obj = {};

Object.defineProperty(obj, 'a', {
    configurable: true,
    enumerable: false,
    writable: false,
    value: 1
});

Object.defineProperty(obj, 'a', {
    configurable: false,
    enumerable: true,
    writable: false ,
    value: 2
});
var d = Object.getOwnPropertyDescriptor(obj, 'a')

console.log(d); // 結果如下
// {
//     value: 2, 
//     writable: false, 
//     enumerable: true, 
//     configurable: false
// }


但是如果直接複製修改
var obj = {}

Object.defineProperty(obj, 'a', {
    configurable: true,
    enumerable: false,
    writable: false,
    value: 1
});
obj.a=2;
var d = Object.getOwnPropertyDescriptor(obj, 'a')

console.log(d); // 結果如下

// {
//     value: 1,  // 沒有做出修改
//     writable: false, 
//     enumerable: true, 
//     configurable: false
// }

Enumerable

直接上例子

var obj = {};
Object.defineProperties(obj, {
    a: {
        value: 1,
        enumerable: false
    }, 
    b: {
        value: 2,
        enumerable: true
    },
    c: {
        value: 3,
        enumerable: false
    }
})

obj.d = 4;

//等同於

//Object.defineProperty(obj, 'd', {
//    configurable: true,
//    enumerable: true,
//    writable: true,
//    value: 4
//})

for(var key in obj) {
    console.log(key);  
    // 列印一次b, 一次d, a和c屬性enumerable為false，不可被列舉
} 

var arr = Object.keys(obj);
console.log(arr);  // ['b', 'd']

get和set

簡易的資料雙向繫結

html程式碼:

<body>
    <p>
        input1=><input type="text" id="input1">
    </p>
    <p>
        input2=>
        <input type="text" id="input2">
    </p>
    <div>
        我每次比input1的值加1=>
        <span id="span"></span>
    </div>
</body>

js程式碼:

var oInput1 = document.getElementById('input1');
var oInput2 = document.getElementById('input2');
var oSpan = document.getElementById('span');
var obj = {};
Object.defineProperties(obj, {
    val1: {
        configurable: true,
        get: function() {
            oInput1.value = 0;
            oInput2.value = 0;
            oSpan.innerHTML = 0;
            return 0
        },
        set: function(newValue) {
            oInput2.value = newValue;
            oSpan.innerHTML = Number(newValue) ? Number(newValue) : 0
        }
    },
    val2: {
        configurable: true,
        get: function() {
            oInput1.value = 0;
            oInput2.value = 0;
            oSpan.innerHTML = 0;
            return 0
        },
        set: function(newValue) {
            oInput1.value = newValue;
            oSpan.innerHTML = Number(newValue)+1;
        }
    }
})
oInput1.value = obj.val1;
oInput1.addEventListener('keyup', function() {
    obj.val1 = oInput1.value;
}, false)
oInput2.addEventListener('keyup', function() {
    obj.val2 = oInput2.value;
}, false)

javaScript中的Object.defineProperty()和defineProperties()

資料(資料描述符)屬性

[[Configurable]]

[[Enumerable]]

[[Writable]]

[[Value]]

訪問器(存取描述符)屬性

[[Configurable]]

[[Enumerable]]

[[Get]]

[[Set]]

建立/修改/獲取屬性的方法

Object.defineProperty()

Object.defineProperties()

Object.getOwnPropertyDescriptor()

Object. getOwnPropertyDescriptors()

各種場景下描述符屬性的的擴充套件示例講解

configrubale

在物件中新增一個數據描述符屬性

在物件中新增存取描述符屬性

Writable

Enumerable

get和set

簡易的資料雙向繫結

相關推薦