javascript - 在 JavaScript ES6 类中无限期调用 "set function()"

Question

我在 JavaScript 中运行这个简单的类，但在控制台中它给了我一个“超出最大调用堆栈大小”的错误。和帮助？!？

class Person {

        constructor(name, age) {
            this.name = name;
            this.age = age;
        }

        get name() {
            return String(this.name);
        }
        get age() {
            return String(this.age);
        }

        set name(name) {
            this.name = name;
        }

        set age(age) {
            this.age = age;
        }
}

let p1 = new Person('Ehsan', 23);

这是控制台的截图

Answer 1

如果要指示不应直接使用 age 属性，则应使用与 setter 和 getter 使用的名称不同的属性名称。如果 setter/getter 设置或获取的属性与 setter 或 getter 同名，它会一直调用自己，导致你的错误。

一个常见的约定是在属性前加一个下划线:

class Person {

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  get name() {
    return String(this._name);
  }
  get age() {
    return String(this._age);
  }

  set name(name) {
    this._name = name;
  }

  set age(age) {
    this._age = age;
  }
}

let p1 = new Person('Ehsan', 23);
console.log(p1.age);
p1.age = 32;
console.log(p1.age);

但消费者仍然可以通过 p1._age 查看该属性 - 如果您想防止这种情况发生，您可以使用闭包和 WeakMap 使其更加私密:

const Person = (() => {
  const privateVals = new WeakMap();
  return class Person {
    constructor(name, age) {
      const privateObj = {};
      privateObj.name = name;
      privateObj.age = age;
      privateVals.set(this, privateObj);
    }

    get name() {
      return String(privateVals.get(this).name);
    }
    get age() {
      return String(privateVals.get(this).age);
    }

    set name(name) {
      privateVals.get(this).name = name;
    }

    set age(age) {
      privateVals.get(this).age = age;
    }
  }
})();

let p1 = new Person('Ehsan', 23);
console.log(p1.age);
p1.age = 32;
console.log(p1.age);