Question

我从这里收到了一个代码片段：http://jsdude.wordpress.com/2012/12/19/jquery-event-callbacks-and-javascript-oop-methods/：

 var CounterButton = function(el){
    this.$el = $(el);
    this.counter = 0;
    this.bindEvents();
    this.myVal = 1;
}

CounterButton.prototype.bindEvents = function(){
    this.$el.click(this.clicked);
};

CounterButton.prototype.clicked = function(){
    this.increase();
    this.showMessage();
};

我想弄清楚这条特定的行：his.$el.click(this.clicked);。当您在this函数中有click时，是否会引用被点击的内容this.$el？

Answer 1

是否指的是被点击的是什么。$ el？

没有。它引用了一个名为clicked的函数，它在保存bindEvents方法的对象中

但是事件处理程序中的this引用了 DOM ELEMENT ！考虑这个简单的代码：

$("body").click(this.do1);

function do1()
{
 alert(this.tagName); //BODY     
}

请注意

$el.click(this.clicked)

就像：

var that=this;
$el.on('click',function {}(that.clicked()));

Answer 2

this.$el指的是：$(el); (var CounterButton = function(el){...)

this.clicked指的是：CounterButton.prototype.clicked = function(){...

在jQuery中，$(el).click是一个可以触发或侦听点击的函数。如果传递了一个函数，它将监听元素'el'中的单击，并在执行一个函数时执行该函数。

在函数'this.clicked'中，发生了令人困惑的事情.jQuery将点击的元素传递给函数'this.clicked'，所以'this'是构造函数中的'el'。

CounterButton.prototype.clicked = function(){
    this.increase(); // this refers to the element 'el'
    this.showMessage(); // this refers to the element 'el'
};

这就是他收到此错误的原因： http://jsdude.wordpress.com/2012/12/19/jquery-event-callbacks-and-javascript-oop-methods/console/

你可以通过关闭来解决这个问题：

CounterButton.prototype.clicked = function(){
    var self = this;
    return function () {
        self.increase(); // self refers to CounterButton
        self.showMessage(); // self refers to CounterButton
};

而不是传递this.clicked，传递this.clicked（）

 this.$el.click(this.clicked());

Answer 3

回答关于jQuery事件处理程序内部this的原始问题：不，它不一定是被点击的元素。具体来说，按http://api.jquery.com/on/：

当jQuery调用处理程序时，this关键字是对该处理程序的引用事件交付的元素;对于直接绑定的事件这是附加事件和委托事件的元素事件这是一个匹配selector的元素。（请注意，this可能不会如果事件来自后代，则等于event.target element。）从元素创建一个jQuery对象，以便它可以与jQuery方法一起使用时，请使用$(this)。

Answer 4

在jQuery中，这总是指绑定事件句柄的DOM元素（http://api.jquery.com/bind/）。

为了更好地理解这一点，您可以在这里查看：How does the "this" keyword work?

如果您阅读整篇文章，您会看到为什么这个例子是错误的（以下文字来自您链接的文章）：

使用错误的上下文调用clicked（）方法。如果您从未在javascript中听说过函数调用上下文，那么您应该阅读这篇精彩的文章。默认情况下，jQuery中事件回调的上下文对象是目标HTML元素。但这很容易修复，我们只需要稍微修改一下bindEvents（）方法：

CounterButton.prototype.bindEvents = function(){
    this.$el.click($.proxy(this.clicked, this));
};

$ .proxy是jQuery的函数（或范围）绑定版本。此方法返回新函数，该函数将始终使用上下文对象调用，作为第二个参数提供。您可以在官方jQuery文档中阅读更多内容。

Answer 5

有些人正在混淆事物。您的示例中的this与jQuery函数内this的行为无关。

代码示例的用法如下：

var myButton = new CounterButton(domElement);

每一个，因为它的构造函数将是：this == myButton

对范围界定感到困惑

5 个答案: