[JavaScript知识库] JS的get方法和set方法

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JS的get方法和set方法 -> 正文阅读

[JavaScript知识库]JS的get方法和set方法

get 关键字将对象属性与函数进行绑定，当属性被访问时，对应函数被执行。
set 关键字将对象属性与函数进行绑定，当属性被赋值时，对应函数被执行。
基本用法：

let obj = {
  a: '吕小布',
  get b() {
    console.log('一旦调用对象的b属性，就会触发b属性的get方法')
  },
  set b(newVal) {
    b = newVal
    console.log('调用了b属性的set方法，方法的值是：' + newVal)
  }
}
obj.b // 打印：一旦调用对象的b属性，就会触发b属性的get方法
obj.b = 1 // 打印：调用了b属性的set方法，方法的值是：1
console.log(obj) // 如下图

在这里插入图片描述

obj并不是{a:‘吕小布’,b:1}，我理解为obj里面有一个隐式属性b，它不会被显示出来

如果在get方法中调用this.b就会无限执行get方法：

let obj = {
  a: '吕小布',
  get b() {
    console.log('一旦调用对象的b属性，就会触发b属性的get方法')
    this.b
    // return this.b
  },
  set b(newVal) {
    b = newVal
    console.log('调用了b属性的set方法，方法的值是：' + newVal)
  }
}
obj.b // 无限打印：一旦调用对象的b属性，就会触发b属性的get方法

在这里插入图片描述
如果在set方法中加上this.b就会报错：

let obj = {
  a: '吕小布',
  get b() {
    console.log('一旦调用对象的b属性，就会触发b属性的get方法')
  },
  set b(newVal) {
    this.b = newVal
    console.log('调用了b属性的set方法，方法的值是：' + newVal)
  }
}
obj.b // 打印：一旦调用对象的b属性，就会触发b属性的get方法
obj.b = 1 // 报错

在这里插入图片描述
所以，get方法和set方法正确的打开方式应该是：

let obj = {
  _a: '吕小布',
  get a() {
    console.log('一旦调用对象的属性，就会触发该属性的get方法')
    // 如果没有return this._a
    // return this._a
  },
  set a(newVal) {
    this._a = newVal
    console.log('调用了set方法，方法的值是：' + newVal)
  }
}
obj.a // 打印：一旦调用对象的属性，就会触发该属性的get方法
obj.a = 1 // 打印：调用了set方法，方法的值是：1
console.log(obj) // 如下图

在这里插入图片描述

在get方法加上return this._a：

let obj = {
  _a: '吕小布',
  get a() {
    console.log('一旦调用对象的属性，就会触发该属性的get方法')
    return this._a
  },
  set a(newVal) {
    this._a = newVal
    console.log('调用了set方法，方法的值是：' + newVal)
  }
}
obj.a // 打印：一旦调用对象的属性，就会触发该属性的get方法
obj.a = 1 // 打印：调用了set方法，方法的值是：1
console.log(obj) // 如下图