建站
咨詢
售后
建站咨詢
新聞中心
當(dāng)我們使用 Vue 在愉快的開(kāi)發(fā)項(xiàng)目的時(shí)候，突然報(bào)了一個(gè)錯(cuò)誤：
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、下陸網(wǎng)絡(luò)推廣、重慶小程序開(kāi)發(fā)、下陸網(wǎng)絡(luò)營(yíng)銷、下陸企業(yè)策劃、下陸品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供下陸建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com
- this is undefined
別擔(dān)心，不只有你一個(gè)人，我也經(jīng)常遇到這個(gè)問(wèn)題很多次，接下我們一起來(lái)看看如何解決這個(gè)問(wèn)題。
一個(gè)可能的原因是混淆了常規(guī)函數(shù)和箭頭函數(shù)的用法，如果你遇到這個(gè)問(wèn)題，我猜你用的是箭頭函數(shù)。如果用常規(guī)函數(shù)替換箭頭函數(shù)，它可能會(huì)為你修復(fù)這個(gè)問(wèn)題。
我們?cè)偕钊胍稽c(diǎn)，試著理解為什么會(huì)這樣。
畢竟，知識(shí)就是力量，如果知道造成問(wèn)題的原因，那么我們將來(lái)可以避免很多挫敗感和時(shí)間浪費(fèi)。
還有一些其它原因可能也會(huì)出現(xiàn)此類錯(cuò)誤。
- 使用 fetch 或 axios 獲取數(shù)據(jù)
- 使用像 lodash 或 underscore 這類的庫(kù)
理解兩種主要的函數(shù)類型
在 JS 中，我們有兩種不同的函數(shù)。它們以幾乎相同的方式運(yùn)作，除了它們處理變量的方式不同。
這給新舊Javascript開(kāi)發(fā)人員帶來(lái)了很多困惑，但是當(dāng)我們弄懂這個(gè)問(wèn)題時(shí)，就很好會(huì)有這個(gè)困惑。
常規(guī)函數(shù)
常規(guī)函數(shù)可以用幾種不同的方式定義。
第一種方法在 Vue 組件中較不常見(jiàn)，因?yàn)閷?xiě)出來(lái)要更長(zhǎng)一些：
第二種方法是簡(jiǎn)寫(xiě)方式，我們也經(jīng)常使用：
在像這樣的常規(guī)函數(shù)中，this將引用函數(shù)的“所有者”。因?yàn)槲覀兪窃赩ue組件上定義它的，所以this指的是Vue組件。
在大多數(shù)情況下，我們應(yīng)該在 Vue 中使用常規(guī)函數(shù)，特別是在創(chuàng)建時(shí)
- methods
- computed props
- watched props
雖然常規(guī)函數(shù)通常是我們所需要的，但是箭頭函數(shù)也非常方便。
箭頭函數(shù)
箭頭函數(shù)可以更短，更快的編寫(xiě)，因此最近獲得了廣泛的歡迎。但是，它們?cè)趯?duì)象上定義方法時(shí)并沒(méi)有太大的不同，就像我們?cè)诰帉?xiě)Vue組件時(shí)所做的那樣。
這是他們?cè)赩ue組件上的樣子：
在處理 this 問(wèn)題時(shí)，真正的差異開(kāi)始發(fā)揮作用。
箭頭函數(shù)采用詞法作用域，意味著箭頭函數(shù)從它的上下文中獲取this。
如果試圖從Vue組件上的箭頭函數(shù)內(nèi)部訪問(wèn) this，將得到一個(gè)錯(cuò)誤，因?yàn)?this 不存在
簡(jiǎn)而言之，盡量避免在Vue組件上使用箭頭函數(shù)。這將會(huì)省去許多頭痛和困惑的問(wèn)題。
有時(shí)使用箭頭函數(shù)是很好的，但這只在不引用this的情況下才有效。
現(xiàn)在我們知道兩種主要的函數(shù)類型，如何正確使用它們?
匿名函數(shù)
當(dāng)我們只需要?jiǎng)?chuàng)建一個(gè)函數(shù)而不需要從其他任何地方調(diào)用它時(shí)，匿名函數(shù)非常有用。
下面是使用匿名函數(shù)的一些場(chǎng)景：
- 使用 axios 或 fetch 訪存數(shù)據(jù)
- filter、map和reduce等函數(shù)方法
- 在 Vue 方法中的任何地方
來(lái)個(gè)例子看一下：
從示例中可以看到，大多數(shù)情況下，當(dāng)我們創(chuàng)建匿名函數(shù)時(shí)，使用箭頭函數(shù)。我們通常使用箭頭函數(shù)有幾個(gè)原因：
- 更短、更簡(jiǎn)潔的語(yǔ)法
- 改善可讀性
- this 取自父類
在Vue方法中，箭頭函數(shù)也可以作為匿名函數(shù)使用。
等等，我們不是剛發(fā)現(xiàn)當(dāng)我們?cè)噲D訪問(wèn) this 時(shí)，箭頭函數(shù)不起作用嗎?
這就是區(qū)別所在。
當(dāng)我們?cè)诔Ｒ?guī)函數(shù)或簡(jiǎn)寫(xiě)函數(shù)中使用箭頭函數(shù)時(shí)，常規(guī)函數(shù)將this設(shè)置為我們的Vue組件，而箭頭函數(shù)則不一樣。
來(lái)個(gè)例子：
filter方法可以訪問(wèn)this.match，因?yàn)榧^函數(shù)使用的方法與filteredMessages方法使用的上下文相同。由于此方法是常規(guī)函數(shù)(而不是箭頭函數(shù))，因此將其自身的上下文設(shè)置為Vue實(shí)例。
讓我們進(jìn)一步討論如何使用axios或fetch來(lái)獲取數(shù)據(jù)。
在獲取數(shù)據(jù)時(shí)使用正確的函數(shù)
如果正在使用fetch或axios獲取異步數(shù)據(jù)，最好使用 Promise。Promise喜歡匿名箭頭函數(shù)，它們也使處理this問(wèn)題變得容易得多。
如果你正在獲取一些數(shù)據(jù)并想在你的組件上設(shè)置它，這是你應(yīng)該做的正確的方式：
請(qǐng)注意，我們?nèi)绾卧?Vue 組件上使用常規(guī)函數(shù)作為方法，然后在 Promise 內(nèi)部使用匿名箭頭函數(shù)
在fetchData()作用域內(nèi)，我們將this設(shè)置為Vue組件，因?yàn)樗且粋€(gè)常規(guī)函數(shù)。由于箭頭函數(shù)使用外部作用域作為它們自己的作用域，因此箭頭函數(shù)也將this設(shè)置為我們的Vue組件。
這允許我們通過(guò)this訪問(wèn) Vue 組件并更新dataFromServer。
但是，如果需要將函數(shù)傳遞幫助庫(kù)，比如lodash或underscore，該怎么辦呢
與 Lodash 或 Underscore 一起使用
假設(shè)我們的Vue組件上有一個(gè)要使用Lodash或Underscore方法。如何防止this is undefine的錯(cuò)誤。
如果你用過(guò) React ，你可能見(jiàn)過(guò)類似的東西。
這是我們用Vue做的。
就是這樣!
我們要做的就是獲取函數(shù)，將其包裝在debounce函數(shù)中，然后返回一個(gè)內(nèi)建了debounce的新函數(shù)?，F(xiàn)在，當(dāng)我們?cè)赩ue組件上調(diào)用this.methodToDebounce()時(shí)，我們將調(diào)用debounced版本。
什么是詞法作用域
如前所述，常規(guī)函數(shù)和箭頭函數(shù)之間存在差異的主要原因與詞法作用域有關(guān)。來(lái)分析一下它的含義。
首先，作用域是程序中存在變量的任何區(qū)域。在Javascript中，window 變量具有全局作用域，它在任何地方都可用。盡管大多數(shù)變量被限制在定義它們的函數(shù)、它們所屬的類或模塊中。
其次，單詞“詞法”僅僅意味著作用域由你如何編寫(xiě)代碼決定。某些編程語(yǔ)言只在程序運(yùn)行時(shí)才確定作用域內(nèi)的內(nèi)容。這可能會(huì)讓人很困惑，所以大多數(shù)語(yǔ)言都只使用詞法作用域。
箭頭函數(shù)使用詞法作用域，而常規(guī)函數(shù)和簡(jiǎn)寫(xiě)函數(shù)不使用。
這里最棘手的部分是詞法作用域如何在函數(shù)中影響 this。對(duì)于箭頭函數(shù)，this與外部作用域的this綁定在一起。常規(guī)函數(shù)的this綁定方式有些奇怪，這就是引入箭頭函數(shù)的原因，也是為什么大多數(shù)人盡可能多地使用箭頭函數(shù)的原因。
作用域如何在函數(shù)中工作
下面是一些示例，它們演示了作用域如何在這兩種函數(shù)類型之間以不同的方式工作
將作用域綁定到函數(shù)上
我們可以使用 bind 方法來(lái)改變 this 的綁定：
- const boundFunction = unboundFunction.bind(this);
這使我們?cè)诰帉?xiě)Vue組件時(shí)具有更大的靈活性，更輕松地重用方法。當(dāng)然，可讀性相對(duì)差點(diǎn)，應(yīng)該盡量避免太頻繁地使用它。
文章名稱：如何修復(fù)Vue中的“thisisundefined”問(wèn)題
網(wǎng)址分享：http://www.5511xx.com/article/ccdehgh.html
