javascript - 无法让 setter/getter 工作

标签 javascript ecmascript-6

<分区>

我想转换 Mike Herchel 的 Importing CSS Breakpoints进入 ES6 类。为此,我选择使用 getset 来最终了解如何操作。

到目前为止我的代码:

export default class Breakpoints {
  constructor() {
    this.value = null;

    this.refreshValue();

    window.addEventListener('resize', () => {
      this.refreshValue();
    });
  }

  refreshValue() {
    let val = window.getComputedStyle(document.querySelector('body'), ':before').getPropertyValue('content').replace(/\"/g, '');

    this.value = val;
  }

  set value(val) {
    this.value = val;
  }

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

问题是,当我运行它时,我得到了 Maximum call stack size exceeded。我哪里做错了?

最佳答案

绝对没有理由在这里使用 getters/setters,除了普通属性,它们不会做任何其他事情。

When I run it, I am getting Maximum call stack size exceeded. Where I did go wrong?

您的 getter 再次返回属性的值,从而调用自身。您的 setter 再次设置属性的值,从而调用自身。不要那样做。

如果出于某种原因你真的想使用 getter,那就去吧

export default class Breakpoints {
  constructor() {
    this._val = null;

    this.refreshValue();
    window.addEventListener('resize', () => {
      this.refreshValue();
    });
  }

  refreshValue() {
    this._val = window.getComputedStyle(document.querySelector('body'), ':before').getPropertyValue('content').replace(/\"/g, '');
  }

  get value() {
    return this._val;
  }
  // no `value` setter, because it can't be changed from outside
}

关于javascript - 无法让 setter/getter 工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37051741/

相关文章:

javascript - 如何在附加文本中使用计数

javascript regex - 为什么我捕获的字符串是错误的?

javascript - 在 Promise 回调中使用参数时,无法将参数传递给类方法

JavaScript - 如何使用 reduce 将名称列表映射到指定键

javascript - 无法从 webpack 包导入 ES6 模块

javascript - 如何创建一个按钮来模拟古腾堡富文本编辑器上的链接弹出窗口功能

javascript - 如果 Ajax 请求没有完成,html 链接无法点击

javascript - 电话间隙 : Custom URL handling freezing

javascript - 使用 ckeditor 功能对小段文本进行样式化

对象的 javascript 传播运算符不起作用?这是预期的行为吗?