JS的get方法和set方法

28 篇文章 0 订阅
7 篇文章 2 订阅

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) // 如下图

在这里插入图片描述
一般我们通过获取obj.a或者赋值给obj.a进而去改变obj._a的值

  • 9
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端吕小布

您的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值