微信小程序 this和that详解及简单实例

素颜马尾好姑娘i 2022-05-21 12:59 269阅读 0赞

# 微信小程序中，在wx.request(\{\});方法调用成功或者失败之后，有时候会需要获取页面初始化数据data的情况，这个时候，如果使用，this.data来获取，会出现获取不到的情况，调试页面也会报undefiend。原因是，在javascript中，this代表着当前对象，会随着程序的执行过程中的上下文改变，在wx.request(\{\});方法的回调函数中，对象已经发生改变，所以已经不是wx.request(\{\});方法对象了，data属性也不存在了。官方的解决办法是，复制一份当前的对象，如下： #

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code>that=</code> 
      <code>this</code> 
      <code>;</code> 
      <code>//把this对象复制到临时变量that</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

在success回调函数中使用that.data就能获取到数据了。

不过，还有另外一种方式，也很特别，是将success回调函数换一种声明方式，如下：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>success: res =&gt;{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.setData({ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>loadingHidden: </code> 
      <code>true</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>hideCommitSuccessToast: </code> 
      <code>false</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>})</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

在这种方式下，this可以直接使用，完全可以获取到data数据。

再给一个完整的例子：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>success: res =&gt; { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(res.data.code != 0) { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>// 提交失败</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.setData({ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>loadingHidden: </code> 
      <code>true</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>hiddenTips: </code> 
      <code>false</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>tipsContent: res.data.message</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>})</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>} </code> 
      <code>else</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>// 提交成功</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.setData({ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>loadingHidden: </code> 
      <code>true</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>hideCommitSuccessToast: </code> 
      <code>false</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>})</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>subBtn = </code> 
      <code>false</code> 
      <code>;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>// 定时，3秒消失</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>setTimeout(() =&gt; { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.setData({ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>hideCommitSuccessToast: </code> 
      <code>true</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>})</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>wx.navigateBack({ delta: 2 });</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>}, 2000);</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>}</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>