小程序模板網(wǎng)

微信小程序ES6箭頭函數(shù)中的this問題

發(fā)布時間：2021-07-01 08:59 所屬欄目：小程序開發(fā)教程
  • 開發(fā)微信小程序過程中，在一個回調(diào)函數(shù)中對js中的變量賦值時出現(xiàn)報錯: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 (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

錯誤原因

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

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

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

舉例

  • 普通函數(shù)，回調(diào)函數(shù)中this的使用
    • 代碼如下 
      //上傳圖片
  uploadImg:function(event){
    //1.選擇圖片
    var _this=this;  //如果想要在下面的success回調(diào)函數(shù)中使用全局this對象，這里需要進行變量轉(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對象，因為this已經(jīng)繼承了uploadImg的全局this對象
        const tempFilePaths = res.tempFilePaths;
        
        this.setData({
          imgPaths:tempFilePaths
        });
      },
      fail:err=>{

      }
    });
  },


易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://22321a.com/wxmini/doc/course/26871.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點擊咨詢
QQ在線咨詢