$(this)怎么能不是在jquery点击处理程序中触发事件的元素?
我有一个简单的点击处理程序
$('#test').click( ev => { var $test = $(this); console.log($test.text()); })
但它不起作用, $(this)
不是发射器元素。 如果我检查this
我看到一个“窗口”(?)(??)(??!)
另外,如果我将代码更改为
var $test = $(ev.toElement);
它完美地运作。
怎么会这样? 在我的代码中,什么阻止jquery正确传递元素?
箭头函数不绑定this
, arguments
等MDN 。
与函数表达式相比,箭头函数表达式具有更短的语法,并且词汇绑定
this
值(不绑定它自己的this
,arguments
,super
或new.target
)。
箭头function确实有“词汇这个”。 这意味着函数内部的值与其外部的值相同。 并且由于全局范围中的值是window
您还可以在事件处理程序中获取该值。
如果您希望代码工作,则必须使用这样的普通函数:
$('#test').click( function(){ var $test = $(this); console.log($test.text()); })
您无法以任何方式设置箭头函数的值。
var f1 = () => this var f2 = function(){return this} f1.call("hello") // --> window f2.call("hello") // --> "hello"
箭头函数总是有词汇
function foo(){ return () => this } foo.call(true).call(false) // --> true
有关箭头函数的更多信息,请查看mdn参考 。
Yury Tarabanko已经回答了你的问题:箭头function不会绑定this
。 如果你写这样的东西,这可以派上用场:
// JS: class Foo{ constructor( $button ){ this.$button = $button; $button.click(() => { this.sayHello(); }); } sayHello() { alert('Hi'); } } new Foo( $('button') );
看看这个小提琴: https : //jsfiddle.net/bhkkLfty/
使用此代码一段时间。 只需将() => {}
更改为function() {}
和console.log即可。
编辑:有关更多信息,请查看以下文章之一: