從JQuery自定義校驗(yàn)規(guī)則中看JS箭頭函數(shù)的this指向問題

Yu_Huang 發(fā)布于2019-08-23 12:58 / 3220人閱讀

摘要：箭頭函數(shù)沒有自己的上下文，函數(shù)體中出現(xiàn)的在運(yùn)行時(shí)綁定到最近的作用域上下文對(duì)象。綁定在元素上的校驗(yàn)觸發(fā)之后，按照普通函數(shù)的寫法，即指向調(diào)用該方法的對(duì)象。但是，按照箭頭函數(shù)的屬性，即綁定到了最近一層的作用域節(jié)點(diǎn)。

哈哈，題目給人一種寫論文的感覺，但其實(shí)這篇文章要講得東西很少，很簡(jiǎn)單，就當(dāng)做是填了個(gè)坑吧。
今天在做項(xiàng)目的時(shí)候，要給form表單添加一些自定義的校驗(yàn)規(guī)則，于是參考菜鳥教程的代碼，自己按需求寫了一下校驗(yàn)規(guī)則。

如上圖，這是菜鳥教程官方給的，受上一個(gè)項(xiàng)目寫js代碼的習(xí)慣影響，我把原始的function函數(shù)寫法改成了箭頭函數(shù)，如下圖所示?！?br>

感覺沒有什么特別大的問題，校驗(yàn)寫好了，也綁定到了form對(duì)應(yīng)的元素上面，可是，提交表單的時(shí)候，控制臺(tái)報(bào)錯(cuò)了，提示
"this.optional is not a function"，于是google了一下，發(fā)現(xiàn)是由于箭頭函數(shù)的原因。箭頭函數(shù)沒有自己的this上下文，函數(shù)體中出現(xiàn)的this在運(yùn)行時(shí)綁定到最近的作用域上下文對(duì)象。綁定在元素上的校驗(yàn)觸發(fā)之后，按照普通函數(shù)的寫法，this即指向調(diào)用該方法的“validator”對(duì)象。但是，按照箭頭函數(shù)this的屬性，this即綁定到了最近一層的作用域“document”節(jié)點(diǎn)。

GPU云服務(wù)器云服務(wù)器請(qǐng)教自定義控件的問題 this的指向自定義cc規(guī)則配置 jquery自定義表格

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99128.html

相關(guān)文章

論普通函數(shù)和箭頭函數(shù)的區(qū)別以及箭頭函數(shù)的注意事項(xiàng)、不適用場(chǎng)景

摘要：第二種情況是箭頭函數(shù)的如果指向普通函數(shù)它的繼承于該普通函數(shù)。箭頭函數(shù)的指向全局，使用會(huì)報(bào)未聲明的錯(cuò)誤。 showImg(https://segmentfault.com/img/remote/1460000018610072?w=600&h=400); 箭頭函數(shù)是ES6的API，相信很多人都知道，因?yàn)槠湔Z(yǔ)法上相對(duì)于普通函數(shù)更簡(jiǎn)潔，深受大家的喜愛。就是這種我們?nèi)粘ｉ_發(fā)中一直在使用的API...

paulquei 2019-08-23 16:15 評(píng)論0 收藏0
一篇文章帶你完全理解this

摘要：追夢(mèng)子追夢(mèng)子通過在方法，給第一個(gè)參數(shù)添加要把添加到哪個(gè)環(huán)境中，簡(jiǎn)單來(lái)說(shuō)，就會(huì)指向那個(gè)對(duì)象。追夢(mèng)子追夢(mèng)子還有一點(diǎn)就是雖然也是對(duì)象，但是在這里還是指向那個(gè)函數(shù)的實(shí)例，因?yàn)楸容^特殊。追夢(mèng)子追夢(mèng)子在嚴(yán)格版中的默認(rèn)的不再是，而是。走在前端的大道上本篇將自己讀過的相關(guān) this指向的文章中，對(duì)自己有啟發(fā)的章節(jié)片段總結(jié)在這（會(huì)對(duì)原文進(jìn)行刪改），會(huì)不斷豐富提煉總結(jié)更新。版本一一句話 thi...

Jenny_Tong 2019-08-21 17:58 評(píng)論0 收藏0
我遇到的前端面試題2017

摘要：箭頭函數(shù)與傳統(tǒng)函數(shù)的區(qū)別，主要集中在以下方面沒有和綁定，這些值由最近一層非箭頭函數(shù)決定。不能通過關(guān)鍵字調(diào)用，所以不能用作構(gòu)造函數(shù)，否則程序會(huì)拋出錯(cuò)誤。聲明的全局變量不是全局對(duì)象的屬性。 showImg(https://segmentfault.com/img/remote/1460000013229911?w=2402&h=1398); 本文首發(fā)于我的博客：http://blog.du...

muddyway 2019-08-01 17:35 評(píng)論0 收藏0
我遇到的前端面試題2017

摘要：箭頭函數(shù)與傳統(tǒng)函數(shù)的區(qū)別，主要集中在以下方面沒有和綁定，這些值由最近一層非箭頭函數(shù)決定。不能通過關(guān)鍵字調(diào)用，所以不能用作構(gòu)造函數(shù)，否則程序會(huì)拋出錯(cuò)誤。聲明的全局變量不是全局對(duì)象的屬性。 showImg(https://segmentfault.com/img/remote/1460000013229911?w=2402&h=1398); 本文首發(fā)于我的博客：http://blog.du...

Lucky_Boy 2019-08-21 16:22 評(píng)論0 收藏0
我遇到的前端面試題2017

摘要：箭頭函數(shù)與傳統(tǒng)函數(shù)的區(qū)別，主要集中在以下方面沒有和綁定，這些值由最近一層非箭頭函數(shù)決定。不能通過關(guān)鍵字調(diào)用，所以不能用作構(gòu)造函數(shù)，否則程序會(huì)拋出錯(cuò)誤。聲明的全局變量不是全局對(duì)象的屬性。 showImg(https://segmentfault.com/img/remote/1460000013229911?w=2402&h=1398); 本文首發(fā)于我的博客：http://blog.du...

forrest23 2019-08-29 13:23 評(píng)論0 收藏0