[JS] You Don't Know JavaScript [this & Object Prototypes] - Object [番外 - getter/setter]

前言

我们在Object [下]中有提到 getter / setter,由於这个部分在书中的解释是比较旧的版本,所以找过新版的资料後整理在此篇章中。

getter是一种获取特定属性的方法,setter是设置特定属性的方法,getter和setter常被用在:

  1. 对物件初始化
  2. 可以随时添加属性到任何物件中

Getter(the get Keyword)

有时候物件属性会需要回传动态的数据,或要在不使用明确的方法呼叫(不直接访问物件属性)下反映出内部变数的状态,这样可以使用getter来达到这个目的,

const obj = {
  log: ['a', 'b', 'c'],
  count: 0,
  get latest() {
    if (this.log.length === 0) {
      return undefined;
    }
    obj.count ++; // 将count绑定给get
    return this.log[this.log.length - obj.count]; // 将log绑定给get
  }
};

for(let i = 0; i< 4; i++){
	console.log(obj.latest); // 呼叫get method以访问这些被绑定给getter的属性
}
/*
    c
    b
    a
    undefined
*/

移除getter

getter可以使用Delete操作符移除。

const obj = {
  log: ['a', 'b', 'c'],
  count: 0,
  get latest() {
    if (this.log.length === 0) {
      return undefined;
    }
    obj.count ++; // 将count绑定给get
    return this.log[this.log.length - obj.count]; // 将log绑定给get
  }
};

console.log(obj.latest); // c
delete obj.latest;
console.log(obj.latest); // undefined

新增get到现有物件中

我们除了在一开始建立物件的时候定义getter之外,可以使用defineProperty添加getter给现有物件中

const obj = {
    a: 0
}

Object.defineProperty(obj, 'b', {
    get: function(){
        return this.a + 1;
    }
})
console.log(obj.b); // 1

Setter

setter能在尝试修改指定属性时执行给定的函式,Setter最常与Getter一同建立虚拟属性(pseudo-property)。

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

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

console.log(language.log); // ['EN', 'FA']

移除setter

setter可以使用Delete操作符移除。

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

language.current = 'EN';
console.log(language.log); // 'EN'

delete language.current;
console.log(language.current); // undefined

新增set到现有物件中

setter一样也可以通过defineProperty添加setter给现有物件中

const obj = {
    a: 0
};

Object.defineProperty(obj, 'b', { set: function(x) { this.a = x / 2; } });

o.b = 10; 
console.log(o.a) // 5

结论

可以使用 getter / setter 对物件中的属性进行一些操作,特别是如果想在返回属性或设置它们之前对值做一些特殊的事情,两个方法都可以使用defineProperty方法添加 getter/setter 到现有的物件中,也可以使用delete将他们移除。


参考文献:
Getter 和 Setter 的定义
getter
setter


<<:  [Golang]单向channel介绍

>>:  第 57 天 - 才知道 && 用法

如果一件事情够重要,那麽即便所有条件都与你作对,你仍应该要做。

如果一件事情够重要,那麽即便所有条件都与你作对,你仍应该要做。 If something is im...

追求JS小姊姊系列 Day29 -- 方函式的能力展现:最後型态`async`

前情提要: 讲述完工具人的起源 方函式:终於到了最後一个能力async模式。 我:到现在都遇不到JS...

故事二十七:遇到不同情况,都是练习的好机会!

     延续昨天的实作,今天继续研究一下大学学生人数的近况。   之前,我们曾经使用 csv 档实...

[DAY 28] 用google sheet 做简易UI介面(3/3)

题库一个人不容易维护 如果想要多人共用试算表 就会怕有些人动到你设定好的格式 此时可以选择保护工作表...

DAY 21- 讯息监别码 MAC

「不是那个MAC。 不对,也不是汉堡。」 MAC能吃吗? 先前我们介绍了数位签章,今天我们要介绍的是...