微信小程序ES6——箭头函数中的this问题

背景

•  在开发微信小程序过程中，在一个回调函数中对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 (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

• Next

错误原因

• 普通函数中，this的概念是：this是JavaScript的一个关键字，他是指函数执行过程中，自动生成的一个内部对象，是指当前的对象，只在当前函数内部使用。（this对象是在运行时基于函数的执行环境绑定的：在全局函数中，this指向的是window；当函数被作为某个对象的方法调用时，this就等于那个对象）。
• 回调函数中使用的this关键字，是在回调函数创建过程中再次生成的一个对象，并不是指向一个全局对象，所以报错找不到相应的属性或者方法。

普通函数中和ES6箭头函数中this的区别

• 普通函数
  • 定义：普通函数的this是指函数执行过程中，自动生成的一个内部对象，是指当前的对象，只在当前函数内部使用。回调函数中，当函数被作为某个对象的方法调用时，this就等于那个对象。
  • 解释：每次在执行一个函数的过程中，每一个函数都会生成一个相对应的this对象。这些this对象不同。
• ES6箭头函数
  • 定义：箭头函数的this是在定义函数时绑定的，不是在执行过程中绑定的。简单的说，函数在定义时，this就继承了定义函数的对象。
  • 解释：箭头函数中定义的this，会自动继承全局this。
• Next

举例

• 普通函数，回调函数中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){
    
          }
        });
      },

  • Next
• 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=>{
    
          }
        });
      },

  • Next
• Next