JS - getter 和 setter

2022-03-09  本文已影响0人  恒星的背影

getter 代码示例(来自MDN):

const obj = {
  log: ['a', 'b', 'c'],
  get latest() {
    if (this.log.length === 0) {
      return undefined;
    }
    return this.log[this.log.length - 1];
  }
};

console.log(obj.latest);    // expected output: "c"

有时需要允许访问返回动态计算值的属性,或者你可能需要反映内部变量的状态,而不需要使用显式方法调用。在 JS 中,可以使用 getter 来实现。
不能同时将一个 getter 绑定到一个属性并且该属性实际上具有一个值。

setter 代码示例(来自MDN):

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"]

不能在具有真实值的属性上同时拥有一个 setter 器。

更多例子:

let user = {
  get name() {
    return this._name;
  },

  set name(value) {
    if (value.length < 4) {
      alert("Name is too short, need at least 4 characters");
      return;
    }
    this._name = value;
  }
};

user.name = "Pete";
alert(user.name); // Pete

user.name = ""; // Name 太短了……
let user = {
  name: "John",
  surname: "Smith",

  get fullName() {
    return `${this.name} ${this.surname}`;
  },

  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  }
};

// set fullName 将以给定值执行
user.fullName = "Alice Cooper";

alert(user.name); // Alice
alert(user.surname); // Cooper
参考资料:

getter - JavaScript | MDN
setter - JavaScript | MDN
属性的 getter 和 setter

上一篇下一篇

猜你喜欢

热点阅读