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中玩玩，哈哈哈，放心玩不坏！