详解JavaScript的get和set方法

一、get 方法

1、功能

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

// 语法一
{get prop() { ... } }
// 语法二
{get [expression]() { ... } }

2、实例：语法一

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、实例：语法二

使用表达式作为属性名。

var expr = 'foo';

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

console.log(obj.foo); 
// 输出：bar

4、动态新增 get 属性

var o = { a:0 }

Object.defineProperty(o, "b", { get: function () { return this.a + 1; } });
console.log(o.b) 
// 输出：1

5、删除 get 属性

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 关键字将对象属性与函数进行绑定，当改变属性值时，对应函数被执行。

// 语法一
{set prop(val) { . . . }}
// 语法二
{set [expression](val) { . . . }}

2、实例：语法一

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、实例：语法二

使用表达式作为属性名。

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 属性

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 属性

const language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
};

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

// 删除 set
delete language.current;
console.log(language)

三、参考方法

• 详解JavaScript的get和set方法