微信小程序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

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

上一篇:《计算机网络·自顶向下方法》 小程序等资源地址


下一篇:微信小程序——导航栏的设置