• 開發微信小程序過程中，在一個回調函數中對js中的變量賦值時出現報錯:Cannot read property 'setData' of undefined;at api chooseImage success callback function
• 代碼如下

  wx.chooseImage({ count: 3, sizeType: ['original'], sourceType: ['album', 'camera'], success (res) { // tempFilePath可以作為img標簽的src屬性顯示圖片 const tempFilePaths = res.tempFilePaths; this.setData({ imgPaths:tempFilePaths }); }, fail(err){ } }); },

• 錯誤如下
   

  VM6263:1 thirdScriptError Cannot read property 'setData' of undefined;at api chooseImage success callback function TypeError: Cannot read property 'setData' of undefined at success (//127.0.0.1:43580/appservice/pages/comment/comment.js:42:14) at Function.o.<computed> (WAService.js:1:1116874) at Object.success (WAService.js:1:102889) at r (WAService.js:1:418891) at WAService.js:1:419068 at v (WAService.js:1:419077) at WAService.js:1:420485 at t.<anonymous> (//127.0.0.1:43580/appservice/__dev__/asdebug.js:1:10431) at WAService.js:1:102889 at WAService.js:1:90451

錯誤原因

• 普通函數中，this的概念是：this是JavaScript的一個關鍵字，他是指函數執行過程中，自動生成的一個內部對象，是指當前的對象，只在當前函數內部使用。（this對象是在運行時基于函數的執行環境綁定的：在全局函數中，this指向的是window；當函數被作為某個對象的方法調用時，this就等于那個對象）。
• 回調函數中使用的this關鍵字，是在回調函數創建過程中再次生成的一個對象，并不是指向一個全局對象，所以報錯找不到相應的屬性或者方法。

普通(tong)函(han)數中和ES6箭頭函(han)數中this的區別

• 普通函數
  • 定義：普通函數的this是指函數執行過程中，自動生成的一個內部對象，是指當前的對象，只在當前函數內部使用。回調函數中，當函數被作為某個對象的方法調用時，this就等于那個對象。
  • 解釋：每次在執行一個函數的過程中，每一個函數都會生成一個相對應的this對象。這些this對象不同。
• ES6箭頭函數
  • 定義：箭頭函數的this是在定義函數時綁定的，不是在執行過程中綁定的。簡單的說，函數在定義時，this就繼承了定義函數的對象。
  • 解釋：箭頭函數中定義的this，會自動繼承全局this。

舉例

• 普通函數，回調函數中this的使用
  • 代碼如下

    //上傳圖片 uploadImg:function(event){ //1.選擇圖片 var _this=this; //如果想要在下面的success回調函數中使用全局this對象，這里需要進行變量轉換。 wx.chooseImage({ count: 3, sizeType: ['original'], sourceType: ['album', 'camera'], success (res) { const tempFilePaths = res.tempFilePaths; _this.setData({ imgPaths:tempFilePaths }); }, fail(err){ } }); },

• ES6箭頭函數，回調函數中this的使用
  • 代碼如下

    //上傳圖片 uploadImg:function(event){ //1.選擇圖片 // var _this=this; wx.chooseImage({ count: 3, sizeType: ['original'], sourceType: ['album', 'camera'], success :res=> { //如果使用箭頭函數，回調函數內就可以直接使用this對象，因為this已經繼承了uploadImg的全局this對象 const tempFilePaths = res.tempFilePaths; this.setData({ imgPaths:tempFilePaths }); }, fail:err=>{ } }); },