通告代码抛出超出最大调用堆栈大小

Question

使用babel将ES6转换为ES5时会出现一个奇怪的问题.

我遇到的问题似乎与Babel/RequireJS + typeof"RangeError:超出最大调用堆栈大小"无关

如果你使用babeljs.io上的默认设置运行这个简单的代码片段

class Person {

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

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

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

  get name() {
    return this.name;
  }

  get age() {
    return this.age;
  }

}

let person = new Person('John Doe', 25);

console.log(person.name);

您将超出最大调用堆栈大小作为错误.我不确定为什么会这样.根据这个github问题,问题得到了解决？

我已经能够在ES5代码中将其深入到这一行:

 set: function set(name) { ... }

但我不确定为什么我会收到错误.任何人都可以澄清这里发生了什么或解决方法是什么？

注意:我在jsfiddle,codepen,jsbin和js.do上复制了这个问题.每次我尝试设置debugger;控制台崩溃,所以我无法检查callstack.

Answer 1

这个错误实际上与Babel无关,常规ES6也会破坏堆栈,这意味着Babel正在产生正确的行为.

// regular ES6, no babel
class Person {

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

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

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

let person = new Person('John Doe');

你的getter/setter不能与他们操作的属性具有相同的名称,因为它们最终会无限地调用它们.

get name() {
  return this.name; // call the getter again which calls it again which calls it again ...
}

set name(name) {
  this.name = name; // call the setter again which calls it again which calls it again ...
}

如果您只是更改属性名称(例如,_name而不是name),一切正常:

class Person {

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

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

  get name() {
    return this._name;
  }
}

let person = new Person('John Doe');

console.log(person.name); // 'John Doe'