在点击处理程序中使用' this '关键字从中间人函数传入

The use of `this` keyword in click handler when passed in from middle man function

本文关键字：关键字 中间人 函数 this 程序 处理      更新时间：2023-09-26

如果我在jQuery中有一个点击事件处理程序，像这样

jQuery('#btn').click(_eventHandler);

然后像

那样处理事件
function _eventHandler(e){
    jQuery(this).text('Clicked');
}

则this关键字精确作为被单击的按钮的DOM元素的别名，对吗?

但是现在，我需要改变这个逻辑，以便有一个标志来检查其他内容，如

jQuery('#btn').click(function(e){
    if(blah){
         _eventHandler(e);
    }else{
        _dosomethingElse(e);
    }
});

那么this关键字在_eventHandler仍然正常工作吗?我基本上需要在调用_eventHandler之前做一个检查，但我不想改变_eventHandler的实际函数，并将这个逻辑放在那里。this还能工作吗?

如果您希望在函数中设置this，您可以使用.call()使其相应设置:

jQuery('#btn').click(function(e){
    if(blah) {
         _eventHandler.call(this, e);
    } else {
        _dosomethingElse.call(this, e);
    }
});

这允许您使用自己调用的相同函数或作为直接的事件处理程序，因为this和参数将被设置为相同的。

每个函数都有.call()和.apply()方法，允许您在调用函数时设置this值。当您有特定数量的参数要传递时，您将使用.call()，如果您有一个参数数组(通常长度未知)，您将使用.apply()。

你可以在方法中传递它的引用:

jQuery('#btn').click(function(e){
    if(blah){
         _eventHandler(e,this);
    }else{
        _dosomethingElse(e,this);
    }
});

并在函数中访问它们:

function _dosomethingElse(event,element)
{
   $(element).text("Else called");
}
function  _eventHandler(event,element)
{
  $(element).text("Event Called");
}

注意:通过这种方式，现在_eventHandler不能用作按钮单击的直接事件处理程序，因为它现在不是一个直接的事件处理程序，因为你正在做宝贵的这种方式jQuery('#btn').click(_eventHandler);，但现在它是不同的。

为了澄清已经给出的答案，"this"关键字总是指函数或方法所操作的对象。在函数'_eventHandler'中这指的是'_eventHandler'函数。Jquery将"选择器"对象传递给它的每个方法，这样你就可以在Jquery原型上创建事件处理程序和扩展。像这样…(顺便说一下Jquery。fn = jQuery.prototype

  jQuery.fn._eventHandler= function () {
      jQuery(this).text('Clicked');
  }

…call是

    jQuery('.yourSelector').click(function() {
            jQuery(this)._eventHandler();
    });

…jquery会将yourselector传递为'this'

您可以简单地尝试一下:

function fn(ev) {
    console.log('fn ' + this);
}
$('button').click(function (ev) {
    function nested(ev) {
        console.log('nested ' + this);
    }
    console.log('click ' + this);
    fn(ev);
    nested(ev);
    fn.call(this, ev);
});
输出:

"click [object HTMLButtonElement]"
"fn [object Window]"
"nested [object Window]"
"fn [object HTMLButtonElement]"

this context在调用函数时设置为window。您可以使用Function.prototype.call(thisContext [, arg1 ...])方法显式地设置this上下文

相关文章：