這次帶給大家JS加入getter setter總結(jié)，JS加入getter setter的注意事項有哪些，以下就是實戰(zhàn)案例，一起來看一下。

定義getter 與setter<br>

1.透過物件初始化器在建立物件的時候指明（也可以稱為透過字面值建立物件時宣告）

(function?()?{
??var?o?=?{
????a?:?7,
????get?b(){return?this.a?+1;},//通過?get,set的?b,c方法間接性修改?a?屬性
????set?c(x){this.a?=?x/2}
??};
??console.log(o.a);
??console.log(o.b);
??o.c?=?50;
??console.log(o.a);
})();

在chrome 中調(diào)試視圖如下：

可以看到物件下多了get 屬性以及set 屬性
輸出結(jié)果如下：

當(dāng)然get 語句與 set 語句可以宣告多次用來對應(yīng)多個getter 和setter<br>使用這種方法的好處是可以在宣告屬性的時候同時宣告對應(yīng)的getter 和setter<br>這裡就有人問了，能不能將o 物件的get 及set 方法的方法名稱都改成「a」,這樣就可以直接透過「.」來存取方法直接操作

(function () {
  var o = {
    a : 7,
    get a(){return this.a +1;},//死循環(huán)
    set a(x){this.a = x/2}
  };
  console.log(o.a);
  console.log(o.b);
  o.c = 50;
  console.log(o.a);
})();

開啟chrome 查看建立後的視圖如下：

可以看到這個時候的get 與set 方法已經(jīng)和上面不同，但是是否真的能起作用呢，答案是否定的，當(dāng)我們透過o.a 呼叫的是get語句宣告的a方法，進入到該方法後遇到this.a 方法繼續(xù)呼叫該方法形成死循環(huán)最終導(dǎo)致死循環(huán)報記憶體溢出錯誤。

新語法(ES6)：暫時只有firefox 支持，其他瀏覽器會報錯

(function () {
  var b = "bb";
  var c = "cc";
  var o = {
    a : 7,
    get [b](){return this.a +1;},
    set [c](x){this.a = x/2},
  };
  console.log(o.a);
  console.log(o[b]);
  o["cc"] = 50;
  console.log(o.a);
})();

開啟firefox 查看偵錯：

#結(jié)果如下：

2.使用Object.create 方法

##引用MDN：

概述

Object.create() 方法建立一個擁有指定原型和若干個指定屬性的物件。

語法

Object.create(proto, [ propertiesObject ])

#我們都知道使用Object.create 方法傳遞一個參數(shù)的時候可以建立一個以該參數(shù)為原型的對象淺談JS 建立對象的8 種模式

第二個參數(shù)是可選項，是一個匿名的參數(shù)對象，該參數(shù)對像是一組屬性與值，該對象的屬性名稱將是新建立的對象的屬性名稱，值是屬性描述符（包擴資料描述符或存取描述符，具體解釋看後面的內(nèi)容什麼是屬性描述符）。
透過屬性描述子我們可以實作為新建立的物件新增get 方法以及set 方法

(function () {
  var o = null;
  o = Object.create(Object.prototype,//指定原型為 Object.prototype
      {
        bar:{
          get :function(){
            return 10;
          },
          set : function (val) {
            console.log("Setting `o.bar` to ",val);
          }
        }
      }//第二個參數(shù)
    );
  console.log(o.bar);
  o.bar = 12;
})();

#在chrome 中除錯試圖如下：

##可以看到新建立物件通用多了get 以及set 屬性

輸出結(jié)果如下：

#上面這個範(fàn)例並沒有用來針對get 方法以及set 方法使用的屬性

(function () {
  var o = null;
  o = Object.create(Object.prototype,//指定原型為 Object.prototype
      {
        bar:{
          get :function(){
            return this.a;
          },
          set : function (val) {
            console.log("Setting `o.bar` to ",val);
            this.a = val;
          },
          configurable :true
        }
      }//第二個參數(shù)
    );
  o.a = 10;
  console.log(o.bar);
  o.bar = 12;
  console.log(o.bar);
})();

亦或：

(function () {
  var o = {a:10};
  o = Object.create(o,//指定原型為 o 這里實際可以理解為繼承
      {
        bar:{
          get :function(){
            return this.a;
          },
          set : function (val) {
            console.log("Setting `o.bar` to ",val);
            this.a = val;
          },
          configurable :true
        }
      }//第二個參數(shù)
    );
  console.log(o.bar);
  o.bar = 12;
  console.log(o.bar);
})();

輸出結(jié)果如下：

使用這種方式的好處是可配置性高，但初學(xué)者容易迷糊。

3.使用Object.defineProperty 方法

引用MDN：

概要

Object.defineProperty() 方法直接在一個物件上定義一個新屬性，或修改一個已經(jīng)存在的屬性， 並傳回這個物件。

語法
Object.defineProperty(obj, prop, descriptor)
參數(shù)
obj
需要定義屬性的物件。
prop
需被定義或修改的屬性名稱。
descriptor
需要被定義或修改的屬性的描述符。

(function () {
  var o = { a : 1}//聲明一個對象,包含一個 a 屬性,值為1
  Object.defineProperty(o,"b",{
    get: function () {
      return this.a;
    },
    set : function (val) {
      this.a = val;
    },
    configurable : true
  });

  console.log(o.b);
  o.b = 2;
  console.log(o.b);
})();

這個方法與前面兩種的差異是：使用前面兩種只能在宣告定義的時候指定 getter 與 setter，使用該方法可以隨時的新增或修改。

如果說需要一次批次新增getter 與setter 也是沒問題的，使用以下方法：

4.使用Object.defineProperties方法

MDN：

概述
Object.defineProperties() 方法在一個對象上添加或修改一個或者多個自有屬性，并返回該對象。
語法
Object.defineProperties(obj, props)
參數(shù)
obj
將要被添加屬性或修改屬性的對象
props
該對象的一個或多個鍵值對定義了將要為對象添加或修改的屬性的具體配置

不難看出用法與 Object.defineProperty 方法類似

(function () {
  var obj = {a:1,b:"string"};
  Object.defineProperties(obj,{
    "A":{
      get:function(){return this.a+1;},
      set:function(val){this.a = val;}
    },
    "B":{
      get:function(){return this.b+2;},
      set:function(val){this.b = val}
    }
  });

  console.log(obj.A);
  console.log(obj.B);
  obj.A = 3;
  obj.B = "hello";
  console.log(obj.A);
  console.log(obj.B);
})();

輸出結(jié)果如下：

5.使用 Object.prototype.__defineGetter__ 以及 Object.prototype.__defineSetter__ 方法

(function () {
  var o = {a:1};
  o.__defineGetter__("giveMeA", function () {
    return this.a;
  });
  o.__defineSetter__("setMeNew", function (val) {
    this.a = val;
  })
  console.log(o.giveMeA);
  o.setMeNew = 2;
  console.log(o.giveMeA);
})();

輸出結(jié)果為1和2
查看 MDN 有如下說明：

什么是屬性描述符

MDN：

對象里目前存在的屬性描述符有兩種主要形式：數(shù)據(jù)描述符和存取描述符。

1. 數(shù)據(jù)描述符是一個擁有可寫或不可寫值的屬性。

2. 存取描述符是由一對 getter-setter 函數(shù)功能來描述的屬性。

3. 描述符必須是兩種形式之一；不能同時是兩者。

數(shù)據(jù)描述符和存取描述符均具有以下可選鍵值：

configurable
當(dāng)且僅當(dāng)這個屬性描述符值為 true 時，該屬性可能會改變，也可能會被從相應(yīng)的對象刪除。默認為 false。
enumerable
true 當(dāng)且僅當(dāng)該屬性出現(xiàn)在相應(yīng)的對象枚舉屬性中。默認為 false。

數(shù)據(jù)描述符同時具有以下可選鍵值：

value
與屬性相關(guān)的值?？梢允侨魏斡行У?JavaScript 值（數(shù)值，對象，函數(shù)等）。默認為 undefined。
writable
true 當(dāng)且僅當(dāng)可能用 賦值運算符 改變與屬性相關(guān)的值。默認為 false。

存取描述符同時具有以下可選鍵值：

get
一個給屬性提供 getter 的方法，如果沒有 getter 則為 undefined。方法將返回用作屬性的值。默認為 undefined。
set
一個給屬性提供 setter 的方法，如果沒有 setter 則為 undefined。該方法將收到作為唯一參數(shù)的新值分配給屬性。默認為 undefined。

以上是摘自MDN的解釋，看起來是很晦澀的，具體什么意思呢：
首先我們從以上解釋知道該匿名參數(shù)對象有個很好聽的名字叫屬性描述符，屬性描述符又分成兩大塊：數(shù)據(jù)描述符以及存取描述符（其實只是一個外號，給指定的屬性集合起個外號）。

數(shù)據(jù)描述符包括兩個屬性 : value 屬性以及 writable 屬性，第一個屬性用來聲明當(dāng)前欲修飾的屬性的值，第二個屬性用來聲明當(dāng)前對象是否可寫即是否可以修改

存取描述符就包括 get 與 set 屬性用來聲明欲修飾的象屬性的 getter 及 setter

屬性描述符內(nèi)部，數(shù)據(jù)描述符與存取描述符只能存在其中之一，但是不論使用哪個描述符都可以同時設(shè)置 configurable 屬性以及enumerable 屬性。
configurable屬性用來聲明欲修飾的屬性是否能夠配置，僅有當(dāng)其值為 true 時，被修飾的屬性才有可能能夠被刪除，或者重新配置。
enumerable 屬性用來聲明欲修飾屬性是否可以被枚舉。

知道了什么是屬性描述符，我們就可以開始著手創(chuàng)建一些對象并開始配置其屬性

創(chuàng)建屬性不可配置不可枚舉的對象

//使用默認值配置
(function () {
  var obj = {};//聲明一個空對象
  Object.defineProperty(obj,"key",{
    value:"static"
            //沒有設(shè)置 enumerable 使用默認值 false
            //沒有 configurable 使用默認值 false
            //沒有 writable 使用默認值 false
  });

  console.log(obj.key);      //輸出 “static”
  obj.key = "new"         //嘗試修改其值,修改將失敗,因為 writable 為 false
  console.log(obj.key);      //輸出 “static”
  obj.a = 1;//動態(tài)添加一個屬性
  for(var item in obj){ //遍歷所有 obj 的可枚舉屬性
     console.log(item);
  }//只輸出一個 “a” 因為 “key”的 enumerable為 false
})();

//顯示配置 等價于上面
(function () {
  var obj = {};
  Object.defineProperty(obj,"key",{
    enumerable : false,
    configurable : false,
    writable : false,
    value : "static"
  })
})();

//等價配置
(function () {
  var o = {};
  o.a = 1;
  //等價于
  Object.defineProperty(o,"a",{value : 1,
                writable : true,
                configurable : true,
                enumerable : true});
  
  Object.defineProperty(o,"a",{value :1});
  //等價于
  Object.defineProperty(o,"a",{value : 1,
                writable : false,
                configurable : false,
                enumerable : false});
})();

Enumerable 特性
屬性特性 enumerable 決定屬性是否能被 for...in 循環(huán)或 Object.keys 方法遍歷得到

(function () {
  var o = {};
  Object.defineProperty(o,"a",{value :1,enumerable :true});
  Object.defineProperty(o,"b",{value :2,enumerable :false});
  Object.defineProperty(o,"c",{value :2});//enumerable default to false
  o.d = 4;//如果直接賦值的方式創(chuàng)建對象的屬性,則這個屬性的 enumerable 為 true

  for(var item in o){ //遍歷所有可枚舉屬性包括繼承的屬性
    console.log(item);
  }

  console.log(Object.keys(o));//獲取 o 對象的所有可遍歷屬性不包括繼承的屬性

  console.log(o.propertyIsEnumerable('a'));//true
  console.log(o.propertyIsEnumerable('b'));//false
  console.log(o.propertyIsEnumerable('c'));//false
})();

輸出結(jié)果如下：

Configurable 特性

(function () {
  var o = {};
  Object.defineProperty(o,"a",{get: function () {return 1;},
                configurable : false} );
                //enumerable 默認為 false,
                //value 默認為 undefined,
                //writable 默認為 false,
                //set 默認為 undefined
                 
  //拋出異常,因為最開始定義了 configurable 為 false,故后期無法對其進行再配置
  Object.defineProperty(o,"a",{configurable : true} );
  //拋出異常,因為最開始定義了 configurable 為 false,故后期無法對其進行再配置,enumerable 的原值為 false
  Object.defineProperty(o,"a",{enumerable : true} );
  //拋出異常,因為最開始定義了 configurable 為 false,set的原值為 undefined
  Object.defineProperty(o,"a",{set : function(val){}} );
  //拋出異常,因為最開始定義了 configurable 為 false,故無法進行覆蓋,盡管想用一樣的來覆蓋
  Object.defineProperty(o,"a",{get : function(){return 1}});
  //拋出異常，因為最開始定義了 configurable 為 false,故無法將其進行重新配置把屬性描述符從存取描述符改為數(shù)據(jù)描述符
  Object.defineProperty(o,"a",{value : 12});

  console.log(o.a);//輸出1
  delete o.a;   //想要刪除屬性,將失敗
  console.log(o.a);//輸出1
  
})();

提高及擴展
1.屬性描述符中容易被誤導(dǎo)的地方之 writable 與 configurable

(function () {
  var o = {};
  Object.defineProperties(o,{
    "a": {
      value:1,
      writable:true,//可寫
      configurable:false//不可配置
      //enumerable 默認為 false 不可枚舉
    },
    "b":{
      get :function(){
        return this.a;
      },
      configurable:false
    }
  });
  console.log(o.a);  //1
  o.a = 2;      //修改值成功,writable 為 true
  console.log(o.a);  //2
  Object.defineProperty(o,"a",{value:3});//同樣為修改值成功
  console.log(o.a);  //3

  //將其屬性 b 的屬性描述符從存取描述符重新配置為數(shù)據(jù)描述符
  Object.defineProperty(o,"b",{value:3});//拋出異常,因為 configurable 為 false
})();

2.通過上面的學(xué)習(xí)，我們都知道傳遞屬性描述符參數(shù)時，是定義一個匿名的對象，里面包含屬性描述符內(nèi)容，若每定義一次便要創(chuàng)建一個匿名對象傳入，將會造成內(nèi)存浪費。故優(yōu)化如下：

(function () {
  var obj = {};

  //回收同一對象,即減少內(nèi)存浪費
  function withValue(value){
    var d = withValue.d ||(
      withValue.d = {
        enumerable : false,
        configurable : false,
        writable : false,
        value :null
      }
      );
    d.value = value;
    return d;
  }
  Object.defineProperty(obj,"key",withValue("static"))
})();

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

FileReader API的使用

vue內(nèi)置指令方法與事件

以上是JS添加getter+setter總結(jié)的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！