1. 程式人生 > >理解Object.defineProperty函數中的get與set

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

默認 des 出現 cti ron function 臨時變量 str 接收

defineProperty是什麽:

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

給對象添加一個新的屬性,或者針對對象裏的某些屬性,可以給這個屬性設置一些特性,比如是否只讀,是否可以被for..inObject.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