为什么'this'在jQuery对象在xxx.click事件中被调用时引用？

我正在做绑定的一些练习，我有一个愚蠢的问题关于jQuery的点击功能。为什么当我传入一个方法来点击时，'this'指向点击被触发的jquery对象，但是当我传入一个匿名函数时，这不会发生？我明白，如果'this'引用了jquery对象，那么我们需要使用bind，但不明白为什么'this'会改变。为什么'this'在jQuery对象在xxx.click事件中被调用时引用？

var test = { 
    data: 'Hello World', 
    getData: function() { 
     console.log(this.data); 
    }  
}; 
//Base case - calling a method on an object 
test.getData(); 

//test 1 -> doesn't work 
$('#test1').click(test.getData); 

//test2 -> works 
$('#test2').click(test.getData.bind(test)); 

//test3 -> works 
$('#test3').click(function(event) { 
    test.getData(); 
});

http://jsfiddle.net/17h6h4yq/

来源

2014-09-04 Dan Tang

从技术上讲，'this'不绑定到jQuery对象，而是绑定到底层的DOM元素。 – 2014-09-04 14:52:49

因为这就是'这个'的作用。通过MDN文档了解更多信息：https：//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this – 2014-09-04 14:57:48

jQuery将'this'明确地映射到适合您的元素。即使您使用事件委托并将click事件绑定到了'document'，jQuery也会将'this'更改为它所委派的元素。 – Blazemonger 2014-09-04 15:00:27

这是因为在this点击功能是点击的元素。

所以这行：

$('#test1').click(test.getData);

转换的this你的函数里面#test1。

这条线：

$('#test2').click(test.getData.bind(test));

您使用绑定该this改为发送的第一个参数。在这种情况下：对象test。

这行：

$('#test3').click(function(event) { 
    test.getData(); 
});

您有发动其他功能的功能。 clicked元素（在第一段中提到）传递给第一个函数。

$('#test3').click(function(event) { 
    console.log(this); //`#test3` 
    test.getData(); 
});

所以text.getData()this值不会改变，这是一部开拓创新。换句话说，this将是对象test。

来源

2014-09-04 14:48:41

这个概念啊谢谢，这让人很有道理！对于test3，为什么'this'引用匿名函数中的＃test3 - >为什么它不引用全局窗口（例如，方法中的独立函数中的'this'引用全局窗口） – 2014-09-04 14:57:10

@ DanTang：因为jQuery在处理程序绑定的元素的事件处理程序中设置了this。 http://learn.jquery.com/events/event-basics/#stoppropagation – 2014-09-04 14:58:38

@DanTang每次函数被调用*时，都会重新确定'this'，而不是在声明时。如果你声明了'function foo（）{}'，然后把它分配给'myobj.bar = foo'，并且你使用'foo'和'myobj.bar'作为事件监听器，它们都会有'this'运行时的事件目标。如果函数作为方法附加到对象上并不重要。你传递给'click'的函数对象本身不知道它是否是一种方法;它只是一个指令列表。当你*调用myobj.bar（）时，函数会被告知在调用的时候应该有'myobj'的'this'。 – apsillers 2014-09-04 14:59:19

为什么'this'在jQuery对象在xxx.click事件中被调用时引用？

回答

相关问题