總結一下我遇到的一個糾結很久的問題。

在專案中需要用到後臺的資料對前端渲染，使用到了vue整合的axios，使用vue中的鉤子函式在頁面元件掛載完成之後向後臺傳送一個get請求然後將返回後的資料賦值data（）中定義的屬性：

執行後前端報錯：

原因：

在請求執行成功後執行回撥函式中的內容，回撥函式處於其它函式的內部this不會與任何物件繫結，為undefined。

解決方案：

一）將指向vue物件的this賦值給外部方法定義的屬性，然後在內部方法中使用該屬性

二）使用箭頭函式

補充：箭頭函式的this

由於箭頭函式不繫結this，他會捕獲其所在（即定義的位置）上下文的this值，作為自己的this值；

1.在回撥函式中：

function Person() {  
    this.age = 0;  
    setInterval(() => {
        // 此時的this指向了建構函式新生成的物件
        this.age++;
    }, 3000);
}

var p = new Person();
function Person() {  
    this.age = 0;  
    setInterval(function(){
        //此時的this，指向全域性的window物件
        console.log(this)
    }, 3000);
}

var p = new Person();
 

2.call（）/apply()/bind()方法對於箭頭函式來說只是傳入引數，對它的this毫無影響；

var adder = {
  base : 1,
    
  add : function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function inFun(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };
            
    return f.call(b, a);
  }
};

console.log(adder.add(1));         // 輸出 2
console.log(adder.addThruCall(1)); // 仍然輸出 2（而不是3，其內部的this並沒有因為call() 而改變，其this值仍然為函式inFun的this值，指向物件adder
 

          3.因為this是詞法層面上的，所以嚴格模式中與this相關的規則都將被忽略（可以忽略是否在嚴格模式下的影響）

var f = () => {'use strict'; return this};
var p = () => { return this};
console.log(1,f() === window);
console.log(2,f() === p());
//1 true
//2 true

4.以上的箭頭函式都是在方法的內部，是以費方法的方式使用的，如果將箭頭函式當做一個方法使用：

var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b();  // undefined window{...}
obj.c();  // 10 Object {...}

可以看到。作為方法的箭頭函式this指向全域性window物件，而普通函式則指向呼叫他的物件