理解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