VUE中的this指向性认识不足导致生产故障

前言

最近在对已有JSP界面重构成H5时，遇到了一个很有趣的问题，明明测试通过的界面，过几天回归发现之前的功能都不能用了，打开控制台发现报错了，报错内容大多都是xxxx is undefined,查看代码发现这类问题一般都是因为代码中使用new Pormise或者使用axios调用后台接口后的一些同步操作中出现的问题。那原因大概也能猜到了，就是因为this的指向性导致的。

this指向性测试

1、在箭头函数中使用this,不使用bind(this)

      test11() {
        let params = {
          "req":{
            "queryMonth":202301,
            "querySts":1
          }
        }
        self.$http.qryLawsuitBeforeData(params,(res)=>{
          console.log(this);
        })
      },

结果：

2、在回调函数中使用this,不使用bind(this)

      test11() {
        let params = {
          "req":{
            "queryMonth":202301,
            "querySts":1
          }
        }
        self.$http.qryLawsuitBeforeData(params,function (res) {
          console.log("回调函数：" + this);
        }, function (error) {
          console.log("回调函数：" + this);
        })

      },

3、在回调函数中使用this,使用bind(this)

test11() {
        let params = {
          "req":{
            "queryMonth":202301,
            "querySts":1
          }
        }

        self.$http.qryLawsuitBeforeData(params,function (res) {
          console.log("回调函数：" + this);
        }.bind(this), function (error) {
          console.log("回调函数：" + this);
        }.bind(this))
      },

查看具体的对象是什么

从以上几个简单的测试案例可以看出，如果在回调函数中使用this，必须要先使用bind绑定参数，同时参数设置为this，这样在回调函数中this才可以正常使用。当然了，使用箭头函数也可以在函数内部使用this。但是要注意ie8不支持箭头函数。

指向性问题解决

回到前言中提到的问题，之前是好的过了几天突然不行了，是为什么，看了一下是被人改坏了，改了之后并没有在最外层new promise函数后bind(this),导致异步函数里面this是undefined。那么如何解决呢，将this换成和上面一样的self即可。

self是什么？
self是一个全局变量,在vue挂载阶段即将this赋值给self，之后就可以使用self来代替this在程序的任何地方使用了。如果不考虑兼容ie可以直接使用箭头函数，这样就不会出现这种this指向的问题了。

总结

最近在修bug的时候发现这些this指向性问题都是刚开始用vue写代码，由于之前都是使用的jsp，jsp一般都是用ajax的方式，ajax支持同步操作，现在vue使用axios,axios不支持同步，因此没有注意到异步的问题，后期发现问题后，将代码直接复制到new Promise中，然后没有绑定this导致出现这种指向性问题。对vue的一些特性认识不足。还需多写多练。