• 開發(fā)微信小程序過程中，在一個(gè)回調(diào)函數(shù)中對(duì)js中的變量賦值時(shí)出現(xiàn)報(bào)錯(cuò):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標(biāo)簽的src屬性顯示圖片 const tempFilePaths = res.tempFilePaths; this.setData({ imgPaths:tempFilePaths }); }, fail(err){ } }); },

• 錯(cuò)誤如下
   

  VM6263:1 thirdScriptError Cannot read property 'setData' of undefined;at api chooseImage success callback function TypeError: Cannot read property 'setData' of undefined at success (http://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> (http://127.0.0.1:43580/appservice/__dev__/asdebug.js:1:10431) at WAService.js:1:102889 at WAService.js:1:90451

錯(cuò)誤原因

• 普通函數(shù)中，this的概念是：this是JavaScript的一個(gè)關(guān)鍵字，他是指函數(shù)執(zhí)行過程中，自動(dòng)生成的一個(gè)內(nèi)部對(duì)象，是指當(dāng)前的對(duì)象，只在當(dāng)前函數(shù)內(nèi)部使用。（this對(duì)象是在運(yùn)行時(shí)基于函數(shù)的執(zhí)行環(huán)境綁定的：在全局函數(shù)中，this指向的是window；當(dāng)函數(shù)被作為某個(gè)對(duì)象的方法調(diào)用時(shí)，this就等于那個(gè)對(duì)象）。
• 回調(diào)函數(shù)中使用的this關(guān)鍵字，是在回調(diào)函數(shù)創(chuàng)建過程中再次生成的一個(gè)對(duì)象，并不是指向一個(gè)全局對(duì)象，所以報(bào)錯(cuò)找不到相應(yīng)的屬性或者方法。

普通函數(shù)中和ES6箭頭函數(shù)中this的區(qū)別

• 普通函數(shù)
  • 定義：普通函數(shù)的this是指函數(shù)執(zhí)行過程中，自動(dòng)生成的一個(gè)內(nèi)部對(duì)象，是指當(dāng)前的對(duì)象，只在當(dāng)前函數(shù)內(nèi)部使用?；卣{(diào)函數(shù)中，當(dāng)函數(shù)被作為某個(gè)對(duì)象的方法調(diào)用時(shí)，this就等于那個(gè)對(duì)象。
  • 解釋：每次在執(zhí)行一個(gè)函數(shù)的過程中，每一個(gè)函數(shù)都會(huì)生成一個(gè)相對(duì)應(yīng)的this對(duì)象。這些this對(duì)象不同。
• ES6箭頭函數(shù)
  • 定義：箭頭函數(shù)的this是在定義函數(shù)時(shí)綁定的，不是在執(zhí)行過程中綁定的。簡單的說，函數(shù)在定義時(shí)，this就繼承了定義函數(shù)的對(duì)象。
  • 解釋：箭頭函數(shù)中定義的this，會(huì)自動(dòng)繼承全局this。

舉例

• 普通函數(shù)，回調(diào)函數(shù)中this的使用
  • 代碼如下

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

• ES6箭頭函數(shù)，回調(diào)函數(shù)中this的使用
  • 代碼如下

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