微信小程序詭異錯誤this.setData報錯

先說緣由：

function聲明的函數和箭頭函數的做用域不一樣，這是一個不當心坑的地方。可參考箭頭函數說明： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

 

因此對於這個結果，仍是換回es5的function函數去寫最好了。

 

箭頭函數和function的區別：

 

箭頭函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象

箭頭函數不能夠看成構造函數，也就是說，不能夠使用new命令，不然會拋出一個錯誤

箭頭函數不能夠使用arguments對象，該對象在函數體內不存在。若是要用，能夠用Rest參數代替，不能夠使用yield命令，所以箭頭函數不能用做Generator函數。

這麼寫會報錯

thirdScriptError
this.setData is not a function;at pages/index/index onLoad function;at api getSystemInfo success callback function
TypeError: this.setData is not a function

onLoad: function () {
    wx.getSystemInfo({
      success: function (res) {
        this.setData({
          lang: res.language

        })
        console.log(res.language)
      }
    })

 

 

 

這麼改一下就不報錯了。

 1 onLoad: function () {
 2 wx.getSystemInfo({
 3 success: (res) => { 
 4 this.setData({ 箭頭函數的this始終指向函數定義時的this  5 lang: res.language
 6 
 7 })
 8 console.log(res.language)
 9 }
10 })

或者這樣：

 onLoad: function () {
    var that=this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          lang: res.language

        })
        console.log(res.language)
      }
    })

 

能夠用以下示例說明：

'use strict';

var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log(this.i, this);
  }
}

obj.b(); // prints undefined, Window {...} (or the global object)
obj.c(); // prints 10, Object {...}