前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >详解JavaScript的get和set方法

详解JavaScript的get和set方法

原创
作者头像
Learn-anything.cn
发布2021-12-21 22:22:39
3.9K0
发布2021-12-21 22:22:39
举报
文章被收录于专栏:learn-anything.cnlearn-anything.cn
一、get 方法
1、功能

get 关键字将对象属性与函数进行绑定,当属性被访问时,对应函数被执行。

代码语言:txt
复制
// 语法一
{get prop() { ... } }
// 语法二
{get [expression]() { ... } }
2、实例:语法一
代码语言:txt
复制
const obj = {
  log: ['example','test'],
  get latest() {
    if (this.log.length == 0) return undefined;
    return this.log[this.log.length - 1];
  }
}
console.log(obj.latest); 
// 输出:"test".
3、实例:语法二

使用表达式作为属性名。

代码语言:txt
复制
var expr = 'foo';

var obj = {
  get [expr]() { return 'bar'; }
};

console.log(obj.foo); 
// 输出:bar
4、动态新增 get 属性
代码语言:txt
复制
var o = { a:0 }

Object.defineProperty(o, "b", { get: function () { return this.a + 1; } });
console.log(o.b) 
// 输出:1
5、删除 get 属性
代码语言:txt
复制
const obj = {
  log: ['example','test'],
  get latest() {
    if (this.log.length == 0) return undefined;
    return this.log[this.log.length - 1];
  }
}

delete obj.latest;
console.log(obj);
二、set 方法
1、功能

set 关键字将对象属性与函数进行绑定,当改变属性值时,对应函数被执行。

代码语言:txt
复制
// 语法一
{set prop(val) { . . . }}
// 语法二
{set [expression](val) { . . . }}
2、实例:语法一
代码语言:txt
复制
const language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
};

language.current = 'EN';
language.current = 'FA';

console.log(language.log);
// expected output: Array ["EN", "FA"]
3、实例:语法二

使用表达式作为属性名。

代码语言:txt
复制
const expr = "foo";

const obj = {
  baz: "bar",
  set [expr](v) { this.baz = v; }
};

console.log(obj.baz); // "bar"
obj.foo = "change";      // run the setter
console.log(obj.baz); // "change"
4、动态新增 set 属性
代码语言:txt
复制
const language = {
  	log: []
};
// 1、新增 set
Object.defineProperty(language, "calc", { set: function (x) { this.a = x / 2; } });
language.calc = 5;
console.log(language.a); 
// 输出:2.5
5、删除 set 属性
代码语言:txt
复制
const language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
};

language.current = 'EN';
language.current = 'FA';

// 删除 set
delete language.current;
console.log(language)
三、参考方法

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、get 方法
    • 1、功能
      • 2、实例:语法一
        • 3、实例:语法二
          • 4、动态新增 get 属性
            • 5、删除 get 属性
            • 二、set 方法
              • 1、功能
                • 2、实例:语法一
                  • 3、实例:语法二
                    • 4、动态新增 set 属性
                      • 5、删除 set 属性
                      • 三、参考方法
                      领券
                      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档