微信小程序中為什么使用var that=this
前言：
在小程序或者js開發(fā)中，經(jīng)常需要使用var that = this;開始我以為是無(wú)用功，（原諒我的無(wú)知），后來(lái)從面向?qū)ο蟮慕嵌纫幌刖兔靼琢耍旅婧?jiǎn)單解釋一下我自己的理解，歡迎指正批評(píng)。
代碼示例：
Page({
data: {
test:10
},
testfun1: function () {
console.log(this.data.test) // 10
function testfun2(){
console.log(this.data.test) //undefined
}
testfun2()
},
})
第一個(gè)this.data.test打印結(jié)果為10，原因是因?yàn)閠his的指向是包含自定義函數(shù)testfun1()的Page對(duì)象。
第二個(gè)打印語(yǔ)句實(shí)際上會(huì)報(bào)錯(cuò)，原因是在函數(shù)testfun2()中，this指向已經(jīng)發(fā)生改變，也不存在data屬性，會(huì)error：Cannot read property 'data' of undefined;
解決辦法 為復(fù)制一份this的指向到變量中，這樣在函數(shù)執(zhí)行過(guò)程中雖然this改變了，但是that還是指向之前的對(duì)象。
testfun1: function () {
var that = this
console.log(this.data.test) // 10
function testfun2() {
console.log(that.data.test) // 10
}
testfun2()
},
onLoad:function(){
this.testfun1();
}
編譯之后沒(méi)有報(bào)錯(cuò)，正常打印出結(jié)果；
再來(lái)一項(xiàng)更明白的例子：
onLoad: function() {
var testvar = {
name: "zxin",
testfun3: function() {
console.log(this.name);
}
}
testvar.testfun3();
}
編譯后輸出結(jié)果：zxin。this.name指的是testvar對(duì)象，testfun3()也屬于testvar對(duì)象。
總結(jié)：
大家知道this是指當(dāng)前對(duì)象，只是一個(gè)指針，真正的對(duì)象存放在堆內(nèi)存中，this的指向在程序執(zhí)行過(guò)程中會(huì)變化，因此如果需要在函數(shù)中使用全局?jǐn)?shù)據(jù)需要合適地將this復(fù)制到變量中。
以上所述是小編給大家介紹的微信小程序中為什么使用var that=this,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
JavaScript變量聲明var,let.const及區(qū)別淺析
這篇文章主要介紹了JavaScript變量聲明var,let.const及區(qū)別淺析,需要的朋友可以參考下2018-04-04
js菜單點(diǎn)擊顯示或隱藏效果的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)js菜單點(diǎn)擊顯示或隱藏效果的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
ES6中Set和Map數(shù)據(jù)結(jié)構(gòu)的簡(jiǎn)單講解
大家心里是否產(chǎn)生過(guò)這樣的疑問(wèn),JS中既然已經(jīng)有對(duì)象這種數(shù)據(jù)結(jié)構(gòu),我們?yōu)槭裁催€要再單獨(dú)去使用Set或者M(jìn)ap呢?下面這篇文章主要給大家介紹了關(guān)于ES6中Set和Map數(shù)據(jù)結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下2022-08-08
JS實(shí)現(xiàn)的簡(jiǎn)單分頁(yè)功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單分頁(yè)功能,涉及javascript事件響應(yīng)及頁(yè)面元素遍歷、動(dòng)態(tài)構(gòu)造等相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
原生js實(shí)現(xiàn)針對(duì)Dom節(jié)點(diǎn)的CRUD操作示例
這篇文章主要介紹了原生js實(shí)現(xiàn)針對(duì)Dom節(jié)點(diǎn)的CRUD操作,結(jié)合實(shí)例形式分析了javascript操作dom節(jié)點(diǎn)的創(chuàng)建、獲取、增刪改查等相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細(xì)介紹了JavaScript簡(jiǎn)單拖拽效果 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要給大家介紹了關(guān)于微信小程序自定義導(dǎo)航欄的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家介紹了全解跨域請(qǐng)求問(wèn)題處理方法及分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2023-07-07
js動(dòng)態(tài)創(chuàng)建及移除div的方法
這篇文章主要介紹了js動(dòng)態(tài)創(chuàng)建及移除div的方法,涉及javascript針對(duì)頁(yè)面元素的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2015-06-06
常用的Javascript設(shè)計(jì)模式小結(jié)
javascript設(shè)計(jì)模式有很多種，本文給大家介紹常用的javascript設(shè)計(jì)模式，對(duì)javascript設(shè)計(jì)模式相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12