理解Object.defineProperty函數中的get與set
阿新 • • 發佈:2019-01-22
默認 des 出現 cti ron function 臨時變量 str 接收
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
理解Object.defineProperty函數中的get與set