为什么要var _this = this；

今天回顾黑马的Javaweb时候，发现了var _this = this这个操作不太能理解。又上百度一顿翻找，发现还是不太能理解各位大牛的说法。于是一不做二不休，干脆自己输出一下看看不用_this会怎么样，结果如下：

原代码：

 mounted(){
     //当页面加载完成后，发送异步请求，获取数据
     var _this = this;

     axios({
         method:"get",
         url:"http://localhost:8080/brand-case/selectAllServlet"
     }).then(function (resp) {
         _this.tableData = resp.data;
     })
 }

 控制台输出一下：

 mounted(){
     //当页面加载完成后，发送异步请求，获取数据
     var _this = this;

     axios({
         method:"get",
         url:"http://localhost:8080/brand-case/selectAllServlet"
     }).then(function (resp) {
         console.log(this.tableData);
         _this.tableData = resp.data;
     })
 }

说明在console.log(this.tableData);这句话里面，this是表示servlet返回的数据对象，而不是这个表单的对象。原本的this是指表单本身，所以会有tableData这个数据模型，但是servlet返回的数据是没有这个数据模型的，所以控制台只会输出undefined，根本不存在。

---

2022.11.22更新：

前端代码优化

咱们已经将所有的功能实现完毕。而针对前端代码中的发送异步请求的代码，如下

var _this = this;

axios({
    method:"post",
    url:"http://localhost:8080/brand-case/brand/selectByPageAndCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
    data:this.brand
}).then(function (resp) {

    //设置表格数据
    _this.tableData = resp.data.rows; // {rows:[],totalCount:100}
    //设置总记录数
    _this.totalCount = resp.data.totalCount;
})

需要在成功的回调函数（也就是then 函数中的匿名函数）中使用this，都需要在外边使用 _this 记录一下 this 所指向的对象；因为在外边的 this 表示的是 Vue 对象，而回调函数中的 this 表示的不是 vue 对象。这里我们可以使用 ECMAScript6 中的新语法（箭头函数）来简化这部分代码，如上面的代码可以简化为:

axios({
    method:"post",
    url:"http://localhost:8080/brand-case/brand/selectByPageAndCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
    data:this.brand
}).then((resp) => {

    //设置表格数据
    this.tableData = resp.data.rows; // {rows:[],totalCount:100}
    //设置总记录数
    this.totalCount = resp.data.totalCount;
})

箭头函数语法：

(参数) => {
    逻辑代码
}

箭头函数的作用：

替换（简化）匿名函数。