【问题标题】:Accessing constructor properties in class [duplicate]访问类中的构造函数属性[重复]
【发布时间】:2017-01-09 22:20:03
【问题描述】:

当涉及到对象变量时,我不了解 JavaScript 范围。我定义了以下类:

class DataHandler {
  constructor(boardIDA, boardIDB, accessToken, eventA, eventB) {
    this.times = [];
    this.eventA = eventA;
    this.eventB = eventB;
    this.apiURLA = "https://api.particle.io/v1/devices/" + boardIDA + "/events/" + eventA + "/?access_token=" +
      accessToken;
    this.apiURLB = "https://api.particle.io/v1/devices/" + boardIDB + "/events/" + eventB + "/?access_token=" + accessToken;
    this.eventListenerA = new EventSource(this.apiURLA);
    this.eventListenerB = new EventSource(this.apiURLB);
    this.addListener(this.eventListenerA,
      eventA);
    this.addListener(this.eventListenerB, eventB);
  }
  addListener(eventSrc, eventName) {
    eventSrc.addEventListener(eventName, function(info) {
      alert(eventName);
      var parsedData = JSON.parse(info.data);
      this.times.push(parsedData);
    });
  }
}

问题在于this.times。我已经在构造函数中声明了它。但是,我似乎无法在 addListener  中访问它— 我收到一条错误消息,提示我正在尝试在 undefined 上调用 push。我做错了什么?

【问题讨论】:

  • 在事件监听器中,this 通常是触发事件的对象

标签: javascript class scope ecmascript-6 this


【解决方案1】:

您不是在addListener 中访问它,而是尝试在匿名事件处理程序中访问它,该处理程序使用不同的this 调用。

addListener(eventSrc, eventName) {
  var handler = function(info) {
    alert(eventName);
    var parsedData = JSON.parse(info.data);
    this.times.push(parsedData);
  };
  eventSrc.addEventListener(eventName, handler.bind(this));
}

【讨论】:

  • 将匿名函数(您现在已更改为处理程序,但考虑原始代码)更改为箭头函数是否也有效?因此不需要绑定 - 考虑到代码已经使用 ES2015 class,那么为什么不使用 => 以及(如果它是替代方案)
  • "…在不同的范围内调用" 可能比“用不同的 this 调用”更好,因为调用函数的范围不影响其 this 的设置方式。 ;-)
  • @RobG - 你是对的,谢谢
猜你喜欢
  • 2019-05-21
  • 2023-04-02
  • 2012-07-06
  • 2015-12-26
  • 2016-08-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多