JavaScript學習：屬性定義的兩種方法和不同

1、Object.defineProperty定義對象屬性

Object.defineProperty()

方法允許通過屬性描述對象，定義或修改一個屬性，然後傳回修改後的對象，它的用法如下。

Object.defineProperty(object, propertyName, attributesObject)
           

Object.defineProperty

方法接受三個參數，依次如下。

• object：屬性所在的對象
• propertyName：字元串，表示屬性名
• attributesObject：屬性描述對象

2、點運算符和方括号運算符

var obj = {};

obj.foo = 'Hello';
obj['bar'] = 'World';
           

上面代碼中，分别使用點運算符和方括号運算符，對屬性指派。

JavaScript 允許屬性的“後綁定”，也就是說，你可以在任意時刻新增屬性，沒必要在定義對象的時候，就定義好屬性。

var obj = { p: 1 };

// 等價于

var obj = {};
obj.p = 1;
           

3、兩種定義屬性方法定義的屬性有何差別

var obj = {};
obj.p = 123;
console.log(Object.getOwnPropertyDescriptor(obj, 'p'));
/*
{value: 123, writable: true, enumerable: true, configurable: true}
configurable: true
enumerable: true
value: 123
writable: true
__proto__: Object
*/
Object.defineProperty(obj, 'p', { value: 246 });
console.log(obj.p)// 246
	
var obj = {};
Object.defineProperty(obj, 'p', {value:123});
console.log(Object.getOwnPropertyDescriptor(obj, 'p'));
/*
{value: 123, writable: false, enumerable: false, configurable: false}
configurable: false
enumerable: false
value: 123
writable: false
__proto__: Object
*/
Object.defineProperty(obj, 'p', { value: 246 });//報錯，Cannot redefine property: p
console.log(obj.p);
           

Object.defineProperty()

和

Object.defineProperties()

參數裡面的屬性描述對象，

writable

、

configurable

、

enumerable

這三個屬性的預設值都為

false

。