JavaScript物件導向-- Object.defineProperty用法

Object.defineProperty可用於設定"唯讀不能修改"的屬性。

注意:

此為ES5語法, IE8以前不支援。


怎麼用Object.defineProperty?

e.g.

function CreatePerson() {

    Object.defineProperty(this, "name", {       // "name"代表屬性名稱, 需為"字串"

        value: "Mark",                                      // 值也可以是function。 value: "Mark", 就類似:                                                                                       this.name = "Mark"
        enumerable: true,                               //是否可已被列舉for in
        writable: false,                                    //是否可已被修改值
        configurable: true                              //是否可刪除屬性或修改特性的enumerable、                                                                                writable、configurable屬性

    });

}

CreatePerson.prototype.getName = function() {
    console.log(this.name);
};

var p1 = new CreatePerson();

p1.getName();       //Mark

p1.name = "John";
p1.getName();       //Mark, 因不能被修改



討論一下Object.defineProperty的預設值:

enumerable: true      (若為false, 代表在for/in loop中找不到它)
writable: true
configurable: true     (若為false, 代表不能再用Object.defineProperty再設定一次)



p.s. ES6 設定常數的語法:
        e.g.
        const 變數A       // 會變成常數
        當我設定:
        變數A = 100;      // 發生錯誤, 不能被修改(override)


最後, 聽說最近很紅的Vue.js, 就是靠Object.defineProperty的get、set方法去監聽異動 -->
一旦屬性發生改變, 就即時在DOM上反應出來。

因而, 可以了解一下如何使用get、set方法(注意: 使用它們代表你想自己去控制屬性的存取, 就不能再使用value、writable屬性)

e.g.

function CreatePerson() {

  Object.defineProperty(this, "name", {

get: function() {
return this._name;
},
set: function(value) {
this._name = value;
}

  });

}

var p1 = new CreatePerson();

console.log(p1.name);            // undefined, 這行為就像在get(取值)

p1.name = "John";                  // 這行為就像在set(設值)

console.log(p1.name);           // "John"