美文网首页
JS - getter 和 setter

JS - getter 和 setter

作者: 恒星的背影 | 来源:发表于2022-03-09 21:03 被阅读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

    相关文章

      网友评论

          本文标题:JS - getter 和 setter

          本文链接:https://www.haomeiwen.com/subject/llqorrtx.html