理解Object.defineProperty函數中的get與set

defineProperty是什麼：

該函數能夠直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 並返回這個對象。通俗理解就是：

給對象添加一個新的屬性，或者針對對象裏的某些屬性，能夠給這個屬性設置一些特性，好比是否只讀，是否能夠被for..in或Object.keys()遍歷等

 語法：

Object.defineProperty(obj, prop, descriptor)

例如：

var obj = {};

Object.defineProperty(obj, "key", {
  enumerable: false,
  configurable: false,
  writable: false,
  value: "static"
});

設置特性的方式有2種：數據描述符和存取描述符。

數據描述符和存取描述符都具備如下2個屬性：

configurable:  是否能夠刪除目標屬性或是否能夠再次修改屬性的特性

enumerable:  此屬性是否能夠被枚舉（使用for...in或Object.keys()）。設置爲true能夠被枚舉；設置爲false，不能被枚舉。默認爲false。

數據描述符另外具備如下2個屬性：

writable： 屬性的值是否能夠被重寫。設置爲true能夠被重寫；設置爲false，不能被重寫。默認爲false

value： 屬性對應的值,能夠使任意類型的值，默認爲undefined

 存取描述符另外具備如下2個屬性：

getter ：是一種得到屬性值的方法

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

get於set具體用法以下：

var obj = {},book = '三國演義';

Object.defineProperty(obj,'book',{
    get: function(){
　　　　　　//返回通過處理後的變量
        return '<<'+book+'>>'
    },
    set: function(val){
　　　　//利用臨時變量接收賦值
        book = val
   }    
})

console.log(obj.book) ==> "<<三國演義>>"

obj.book = '西遊記'

console.log(obj.book) ==> "<<西遊記>>"

該方式能夠實現對某些屬性返回特定格式的值。若是以爲臨時變量很差看，能夠換成下面的寫法：

var obj = {__book:'三國演義'}

Object.defineProperty(obj,'book',{
    get: function(){
　　　　　　
        return '<<'+this.__book+'>>'
    },
    set: function(val){
　　　　　//this指向原對象，定義一個屬性用來接收賦值
        this.__book = val
   }    
})

console.log(obj.book) ==> "<<三國演義>>"

obj.book = '水滸傳'

console.log(obj.book) ==> "<<水滸傳>>"

注意：get或set不是必須成對出現，任寫其一就能夠。若是不設置方法，則get和set的默認值爲undefined

 

參考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty