Question

我有一个bool变量，我最初声明为true。

我有.on('click')事件检查bool是否为真，如果是，则调用function1和function1将bool设置为false。

如果bool为false，则调用function2并将bool设置为true。

但是，bool不能正常工作，而我却迷失了。

我的代码如下：

cells.on('click', function(d, i) {
      if (d.vis === 'text') {
        console.log('test');
        if (this.boolGame == true) {
          myThis.updateList(d);
          console.log('setting false');

        } else if (this.boolGame == false) {
          myThis.collapseList();
          console.log('true');

        }

这是其中一个功能

的示例

 collapseList() {

    let gameList = this.tableElements.filter(d => d.value.type == 'games');
    console.log(gameList);
    // this.tableElements.splice();
    console.log('false');
    this.boolGame = false;

}

Answer 1

尝试使用console.log(this.boolGame)。它不起作用，因为它是undefined。使用function语法创建的函数具有自己的上下文。同样，它创建了自己的this变量，它不包含您在其上方范围内设置的任何属性。您有两种选择：使用bind或箭头功能。

bind。将其转换为命名函数并在其上使用bind。这会创建一个this.cellsHandler的副本，其中包含您正在寻找的内部上下文。

this.cellsHandler = function(d, i) {
  if (d.vis === 'text') {
    console.log('test');
    if (this.boolGame == true) {
      myThis.updateList(d);
      console.log('setting false');
    } else if (this.boolGame == false) {
      myThis.collapseList();
      console.log('true');
    }
  }
}
cells.on('click', this.cellsHandler.bind(this))

将您的功能转换为箭头功能。箭头函数没有上下文，因此它从上面的范围this中获取，其中包含boolGame。我推荐这种方法。

cells.on('click', (d, i) => {
  if (d.vis === 'text') {
    console.log('test');
    if (this.boolGame == true) {
      myThis.updateList(d);
      console.log('setting false');
    } else if (this.boolGame == false) {
      myThis.collapseList();
      console.log('true');
    }
  }
}

JavaScript使用bool来控制回调

1 个答案: