从JQuery自定义校验规则中看JS箭头函数的this指向问题

发布时间:2019-05-28 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了从JQuery自定义校验规则中看JS箭头函数的this指向问题脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

哈哈,题目给人一种写论文的感觉,但其实这篇文章要讲得东西很少,很简单,就当做是填了个坑吧。
今天在做项目的时候,要给form表单添加一些自定义的校验规则,于是参考菜鸟教程的代码,自己按需求写了一下校验规则。
图片描述

如上图,这是菜鸟教程官方给的,受上一个项目写js代码的习惯影响,我把原始的function函数写法改成了箭头函数,如下图所示。↓
图片描述

感觉没有什么特别大的问题,校验写好了,也绑定到了form对应的元素上面,可是,提交表单的时候,控制台报错了,提示
"this.optional is not a function",于是GOOGLE了一下,发现是由于箭头函数的原因箭头函数没有自己的this上下文,函数体中出现的this在运行时绑定到最近的作用域上下文对象。绑定在元素上的校验触发之后,按照普通函数的写法,this即指向调用该方法的“validator”对象。但是,按照箭头函数this的属性,this即绑定到了最近一层的作用域“document”节点。

脚本宝典总结

以上是脚本宝典为你收集整理的从JQuery自定义校验规则中看JS箭头函数的this指向问题全部内容,希望文章能够帮你解决从JQuery自定义校验规则中看JS箭头函数的this指向问题所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。