Question

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

我遇到的问题似乎与Babel/RequireJS + typeof "RangeError: Maximum call stack size exceeded"

无关

运行这个简单的代码段

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

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

我已经能够在ES5代码中将其深入到此行：

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

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

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

Answer 1

该错误实际上与Babel无关，常规ES6也会爆破堆栈，这意味着Babel正在产生正确的行为。

＆＃13;

// 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');

＆＃13;

你的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），则一切正常：

＆＃13;

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'

＆＃13;

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

1 个答案: