VueJS局部回调内调用methods方法的this作用域问题如何解决

根本原因 #

普通函数作为异步回调执行时，this会指向调用该回调的运行上下文（此处为串口插件的执行环境），而非Vue组件实例，因此无法访问到挂载在实例上的showNotify方法。

可行解决方案 #

方案1：将success回调改为箭头函数（最推荐） #

箭头函数不会绑定独立的this，会继承外层作用域的this指向，外层watch作用域的this本身就是Vue组件实例，直接使用即可：

watch: {
  // 你原有监听逻辑
  监听的变量: {
    handler() {
      // 调用串口通信方法的位置
      串口插件.对应方法({
        // 改为箭头函数
        success: () => {
          this.showNotify();
        }
      })
    }
  }
},
methods: {
  // 注意原代码这里少了函数定义的括号，修正语法
  showNotify() {
    this.$q.notify({
      position: 'bottom-left',
      badgeStyle: 'background-color: transparent; box-shadow: none' ,
      badgeTextColor: 'transparent',
      message: 'Device Connected',
      type: 'primary',
      color: 'red-3',
    })
  }
}

方案2：预缓存Vue实例指向 #

如果运行环境不支持ES6箭头函数，可以在回调外层提前把组件实例的this存到临时变量中，回调内直接通过该变量调用方法：

watch: {
  监听的变量: {
    handler() {
      // 外层缓存组件实例，变量名可以用_this、vm、that均可
      const vm = this;
      串口插件.对应方法({
        success: function() {
          vm.showNotify();
        }
      })
    }
  }
}

方案3：通过bind预绑定this指向（对应你尝试的绑定方法） #

bind会返回一个绑定了指定this的新函数，不会立即执行，非常适合回调场景的this绑定，注意不要用call/apply，这两个方法会立即执行函数，不符合回调延迟执行的要求：

watch: {
  监听的变量: {
    handler() {
      串口插件.对应方法({
        success: function() {
          this.showNotify();
        // 绑定当前作用域的this（即组件实例）到回调函数
        }.bind(this)
      })
    }
  }
}

bind/call/apply用法区分 #

• bind(目标this, 入参1, 入参2...)：返回绑定了指定this的新函数，不立即执行，适合回调预绑定场景
• call(目标this, 入参1, 入参2...)：立即执行函数，将函数内this绑定为传入的第一个参数，适合即时调用并修改this的场景
• apply(目标this, [入参数组])：功能与call完全一致，唯一区别是入参以数组形式传递

内容的提问来源于stack exchange，提问作者walrusKing