JavaScript 使用 bool 来控制回调

Question

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

我有一个 .on('click') 事件，用于检查 bool 是否为 true，如果是，则调用 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)。它不起作用，因为它是未定义。使用 function 语法创建的函数有自己的上下文。例如，它创建了自己的 this 变量，并且不包含您在其上方范围内设置的任何属性。您有两种选择:使用 bind 或箭头函数。

1. 绑定(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))
   

2. 将您的函数变成箭头函数。箭头函数没有上下文，因此它从其上方的作用域中获取 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');
       }
     }
   }