好程序員web前端學習路線之在JavaScript中使用getters和setter

  好程序員web前端學習路線之在JavaScript中使用getters和setter,大多數面向對象的編程語言都存在getter和setter,包括JavaScript。它們是代碼構造,可幫助開發人員以安全的方式訪問對象的屬性。使用getter,您可以從外部代碼訪問(“獲取”)屬性的值,而setter允許您更改(“設置”)它們的值。我們將向您展示如何在JavaScript中創建getter和setter。

  JavaScript對象可以具有多個屬性和存儲的靜態數據和動態功能的方法。屬性是靜態鍵值對,而方法是特定於對象的函數。

  例如,Car.color可以是屬性,而Car.drive()可以是Car對象的方法。使用getter,您可以訪問Car對象的color屬性,使用setter,您可以修改其值(例如,從藍色變爲黑色)。

  使用getter和setter,您只能獲取和設置屬性的值,而不能獲取方法,因爲方法不是靜態的。

  您可以通過三種不同的方式創建getter和setter:

使用默認方法語法(getter和setter方法),
使用get和set關鍵字,
使用Object.defineProperty()方法。
  

Getters和Setters

Getters和Setters使你可以快速獲取或設置一個對象的數據。一般來說,一個對象擁有兩個方法,分別用於獲取和設置某個值,比如:

{

  getValue: function(){

  return this._value;

  },

  setValue: function(val){

  this._value = val;

  }

}

用這種方式寫JavaScript的一個明顯的好處是:你可以用它來隱藏那些不想讓外界直接訪問的屬性。

吸氣方法

獲取對象屬性的最簡單方法是使用每個屬性的默認方法語法定義getter。讓我們看一個如何使用這種技術創建getter的示例。該MYCAR對象有兩個屬性:顏色和製作。這是您使用對象文字創建它的方法:

var myCar = {

color:“blue”,

make:“Toyota”

};

如果需要,可以使用以下代碼直接訪問顏色並創建屬性:

myCar.color;

// 藍色

myCar.make;

//豐田

儘管這種技術有效,但使用getter而不是直接調用屬性具有許多優點。例如,您可以在檢索其值之前對屬性執行操作或檢查(例如 if-else語句)。

關於get關鍵字最重要的一點是它定義了一個訪問器屬性,而不是一個方法。因此,它不能與存儲其訪問的值的數據屬性具有相同的名稱。在上面的代碼中,defColor 和defMake是數據屬性,而color和make是訪問器屬性。

這也是爲什麼你需要使用在getter名稱之後不使用括號的屬性語法來調用getter的原因(例如myCar.color)。

由於舊版IE8不支持get關鍵字,因此如果您需要支持舊版瀏覽器,請使用getter方法。

結論

在創建JavaScript對象時,您不一定必須使用getter和setter,但在許多情況下它們可能會有所幫助。最常見的用例是(1)保護對數據屬性的訪問,以及(2)在獲取或設置其值之前向屬性添加額外的邏輯。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章