在 JavaScript ES6 class 中无限期调用 "set function()"

Question

我在 JavaScript 中运行这个简单的 class 但在控制台中它给我一个 "Maximum call stack size exceeded" 错误。和帮助？！？

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 属性不应直接使用，则应使用与 setters 使用的名称不同的属性名称和 getters。如果 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);

Answer 2

getter / setter 对和字段不能同名。 this.name = 里面的 setter 本身会调用 setter。如果您确实需要 getter / setter，请使用其他字段，例如this._name = ... 但老实说：不要在这里使用 getter / setter。如果你这样做 person.name = 15 你应该修复它而不是尝试使用 getters / setters.

Answer 3

我相信您只需在构造函数中重命名 class 变量，然后就可以开始了？

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;
  }
}

在 JavaScript ES6 class 中无限期调用 "set function()"

indefinite call to "set function()" in JavaScript ES6 class

javascript

callstack

class

ecmascript-6