Loading

jquery 中 箭头函数 中 “this“ 问题

问题场景

<form id="loginForm">
    <label>邮件</label>
    <input name="email" type="email" placeholder="请输入邮件地址">        
    <label>密码</label>
    <input name="password" type="password"  placeholder="请输入密码">
<button type="submit" ">登录</button>
</form>
<script>
	$('#loginForm').on('submit', () => {
        console.log(this); // window对象?
        console.log($(this)); // window对象?
        return false;
    })
</script>

描述:上述事件监听函数的两处输出应该分别是 表单对象 和 被jquery封装的表单对象 才对,为什么是window对象?

原因寻找:
有大佬这样说:

“无解,因为箭头函数在创建时就已经绑定了this, 后面在执行时不能重新绑定。在JQuery中通常不要用箭头函数,因为JQuery在执行回调函数时很多时候会为它动态绑定一个this, 所以你不要在创建时为它绑定this, 也不要用箭头函数。”

() => {};
// 相当于:
funciotn(){}.bind(this);

原文链接..

解决方案:
在jquery中不要使用箭头函数!

posted @ 2022-01-30 11:05  Hong•Guo  阅读(129)  评论(0)    收藏  举报