Question

我有一个简单的点击处理程序

<h1 id="test">

$('#test').click( ev => {
   var $test = $(this);
   console.log($test.text());
})

但它不起作用，$(this)不是发射器元素。如果我检查this我看到一个“窗口”（？）（??）（??！）

另外，如果我将代码更改为

var $test = $(ev.toElement);

效果很好。

这怎么可能？我的代码中有什么阻止jquery正确传递this中的元素？

Answer 1

箭头功能不会绑定this，arguments等MDN。

与函数相比，箭头函数表达式的语法更短表达式和词法绑定this值（不绑定它自己的值） this，arguments，super或new.target）。

Answer 2

箭头功能确实有“词汇这个”。这意味着函数内部this的值与其外部的值相同。由于this在全局范围内的值为window，因此您还可以在事件处理程序中获得该值。

如果您希望代码正常工作，您必须使用这样的普通函数：

$('#test').click( function(){
 var $test = $(this);
 console.log($test.text());
})

您无法以任何方式设置箭头功能的this值。

var f1 = () => this
var f2 = function(){return this}
f1.call("hello") // --> window
f2.call("hello") // --> "hello"

对于箭头函数

this总是词汇

function foo(){
  return () => this
}

foo.call(true).call(false) // --> true

有关箭头功能的更多信息，请查看mdn reference。

Answer 3

Yury Tarabanko已经回答了你的问题：箭头功能不绑定auto。如果你写这样的东西，这可以派上用场：

this

看看这个小提琴：https://jsfiddle.net/bhkkLfty/

使用此代码一段时间。只需将 <button>Click me to say hello!</button> // JS: class Foo{ constructor( $button ){ this.$button = $button; $button.click(() => { this.sayHello(); }); } sayHello() { alert('Hi'); } } new Foo( $('button') );更改为() => {}和console.log function() {}。

编辑：有关详细信息，请查看以下文章之一：

$（this）如何不是在jquery点击处理程序中触发事件的元素？

3 个答案: