javascript中的set與get到底是什麼西西呢

前言：

set和get能用ES5寫，只要將get與set通過原型鏈的方式，即公有方式去寫，參考我的ES5與ES6的class基礎語法（如何聲明一個類），本文采用ES6語法去寫。

一、get與set介紹

1.getter是獲取屬性值，setter是設置屬性值，getter不帶任何參數，setter設置鍵值，值以參數的形式傳遞，在setter函數體中，一切的return都是無效的，當只有setter函數時，那這個屬性是隻寫的，當只有getter函數時，那這個屬性是隻讀的，同時有setter、getter函數，這個屬性可讀可寫。

2.方式，就是在函數前面添加get 就是getter獲取屬性值，在帶參函數體前加set就是setter設置屬性值

代碼奉上：

代碼1：

class Animal{
  constructor(type){
    this.type = type
  }
  get age () {
    return 4
  }
  set age (val) {
    // this.realAge是個自定義屬性
    this.realAge = val
  }

}

let dog = new Animal('cat')
console.log(dog.age) // 4
dog.age = 5
console.log(dog.realAge) // 5

說明：

1.return 4與age沒有半毛錢關係，用戶只能通過age去設置和讀取數據，這樣子也是對內部數據進行保護的機制，如下面一個【代碼2】。

2.this.realAge是自定義屬性

代碼2：

let _age = 10
class Animal{
  constructor(type){
    this.type = type
  }

  get age () {
    return _age
  }
  set age (val) {
    // 可以加上條件才能修改內容的阻止
    if(val > 10){
      _age = val
    }
  }


}

let dog = new Animal('cat')
console.log(dog.age) // 10
dog.age = 9
console.log(dog.age) // 10
dog.age = 12
console.log(dog.age) // 12

說明：

1.如果添加了條件，如果只有符合條件才能去修改值

2.成功設置值後，通過將val賦值給_age，然後通過get將值返回， 但是用戶無法直接獲得_age,必需得通過age這個出入口才行，保證數據的安全性。

console.log(dog._age) // underfind

一個案例：

見如下代碼

class CustomHTMLElement1 {
  constructor (element) {
    this.element = element
  }
  get html () {
    return this.element.innerHTML
  }
  set html (value) {
    this.element.innerHTML = value
  }
}
let Omain = document.getElementById('main')
let oId = new CustomHTMLElement1(Omain)
oId.html = 'aaaaa'

說明：

1.他是通過選擇器，將所給的區域變成新的東西！

2.可以把代碼複製到慕課網首頁的console中玩玩，哈哈哈，放心玩不壞！