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

Yu_Huang 发布于2019-08-23 12:58 / 3218人阅读

摘要：箭头函数没有自己的上下文，函数体中出现的在运行时绑定到最近的作用域上下文对象。绑定在元素上的校验触发之后，按照普通函数的写法，即指向调用该方法的对象。但是，按照箭头函数的属性，即绑定到了最近一层的作用域节点。

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

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

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

云服务器 GPU云服务器请教自定义控件的问题 this的指向自定义cc规则配置 jquery自定义表格

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99128.html

论普通函数和箭头函数的区别以及箭头函数的注意事项、不适用场景

摘要：第二种情况是箭头函数的如果指向普通函数它的继承于该普通函数。箭头函数的指向全局，使用会报未声明的错误。 showImg(https://segmentfault.com/img/remote/1460000018610072?w=600&h=400); 箭头函数是ES6的API，相信很多人都知道，因为其语法上相对于普通函数更简洁，深受大家的喜爱。就是这种我们日常开发中一直在使用的API...

paulquei 2019-08-23 16:15 评论0 收藏0
一篇文章带你完全理解this

摘要：追梦子追梦子通过在方法，给第一个参数添加要把添加到哪个环境中，简单来说，就会指向那个对象。追梦子追梦子还有一点就是虽然也是对象，但是在这里还是指向那个函数的实例，因为比较特殊。追梦子追梦子在严格版中的默认的不再是，而是。走在前端的大道上本篇将自己读过的相关 this指向的文章中，对自己有启发的章节片段总结在这（会对原文进行删改），会不断丰富提炼总结更新。版本一一句话 thi...

Jenny_Tong 2019-08-21 17:58 评论0 收藏0
我遇到的前端面试题2017

摘要：箭头函数与传统函数的区别，主要集中在以下方面没有和绑定，这些值由最近一层非箭头函数决定。不能通过关键字调用，所以不能用作构造函数，否则程序会抛出错误。声明的全局变量不是全局对象的属性。 showImg(https://segmentfault.com/img/remote/1460000013229911?w=2402&h=1398); 本文首发于我的博客：http://blog.du...

muddyway 2019-08-01 17:35 评论0 收藏0
我遇到的前端面试题2017

摘要：箭头函数与传统函数的区别，主要集中在以下方面没有和绑定，这些值由最近一层非箭头函数决定。不能通过关键字调用，所以不能用作构造函数，否则程序会抛出错误。声明的全局变量不是全局对象的属性。 showImg(https://segmentfault.com/img/remote/1460000013229911?w=2402&h=1398); 本文首发于我的博客：http://blog.du...

Lucky_Boy 2019-08-21 16:22 评论0 收藏0
我遇到的前端面试题2017

摘要：箭头函数与传统函数的区别，主要集中在以下方面没有和绑定，这些值由最近一层非箭头函数决定。不能通过关键字调用，所以不能用作构造函数，否则程序会抛出错误。声明的全局变量不是全局对象的属性。 showImg(https://segmentfault.com/img/remote/1460000013229911?w=2402&h=1398); 本文首发于我的博客：http://blog.du...

forrest23 2019-08-29 13:23 评论0 收藏0