【问题标题】:When calling a Javascript function, how do I set a custom value of "this"?调用 Javascript 函数时,如何设置“this”的自定义值?
【发布时间】:2010-10-29 06:31:42
【问题描述】:

我正在使用 jQuery,并且我有一个用作事件回调的函数,因此在该函数中,“this”表示捕获事件的对象。但是,有一个实例我想从另一个函数显式调用该函数 - 在这种情况下,我如何设置函数中的“this”将等于什么?

例如:

function handleEvent(event) {
    $(this).removeClass("sad").addClass("happy");
}

$("a.sad").click(handleEvent); // in this case, "this" is the anchor clicked

function differentEvent(event) {
    $("input.sad").keydown(e) {
        doSomeOtherProcessing();
        handleEvent(e); // in this case, "this" will be the window object
                        // but I'd like to set it to be, say, the input in question
    }
}

【问题讨论】:

    标签: javascript jquery this jquery-events


    【解决方案1】:

    如果您只是想像正常触发一样调用单个事件处理程序,apply/call 可以正常工作。但是,根据您的需要,使用 jQuery 的 click() 函数的零参数版本可能更健壮,这将触发该元素的 all 点击处理程序:

    function differentEvent(event) {
        $("input.sad").keydown(e) {
            doSomeOtherProcessing();
            $(this).click(); // simulate a click
        }
    }
    

    【讨论】:

      【解决方案2】:

      使用 apply call

      handleEvent.call(this, e);
      

      【讨论】:

      • 替代方案:使用 call(),这与 apply() 完全相同,只是传递的是一系列参数而不是参数数组。 (developer.mozilla.org/en/Core_JavaScript_1.5_Reference/…)
      • apply() 和 call() 正是我正在寻找的(尽管在上面的答案代码中,它应该是 [e] 因为正如丹尼尔所说,apply() 需要一个参数数组)。
      【解决方案3】:

      我建议你将函数重构为 jQuery 插件。

      但这里有一个快速修复:

      handleEvent.apply(this,e) //transfers this from one scope, to another
      

      【讨论】:

      • 为什么重构为 jQuery 插件比使用 call() 更好?
      • Charles 因为这样它就可以在所有 jQUery 对象上普遍使用,例如 $("div").handleEvent() 或 $(this).handleEvent(),而且您将获得额外的好处也能够链接函数。
      【解决方案4】:

      使用

      e.target
      

      【讨论】:

        【解决方案5】:

        只需参数化你感兴趣的函数:

        function doStuff(el) {
            $(el).removeClass("sad").addClass("happy");
        }
        
        function handleEvent(event) {
            doStuff(this);
        }
        
        $("a.sad").click(handleEvent); // in this case, "this" is the anchor clicked
        
        function differentEvent(event) {
            $("input.sad").keydown(e) {
                doSomeOtherProcessing();
                doStuff(this);
            }
        }
        

        【讨论】:

        • 我不敢相信人们会赞成帕特里克的回答,这正是原始问题所需要的。这就是 jQuery 在它调用的代码中分配“this”关键字的方式,并且应该是这样完成的。更改函数的参数以适应内置函数和普遍理解的函数可以轻松执行的操作,这就是摇尾巴的情况......
        • 我想这只是表明有很多人不了解 JavaScript,也许像 jQuery 这样的库的使用确保了他们的无知,因为他们没有花时间去学习真正理解语言本身。
        • @Jason:求求你了,可怜那些不像你那样理解 JavaScript 的可怜虫吧。我可以向您保证,每个人都对您对正确、不摇尾巴的做事方式的广博知识感到敬畏。我知道在 Stack Overflow 上看到一大群无知的小丑们可以选择按照他们想要的方式投票,而不是你内心深处知道的正确方式,这一定是令人沮丧的。我能理解你的沮丧,这不是克莱图斯的方式行得通或任何事情。可悲的是世界上没有正义,不是吗?
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2019-12-19
        • 2021-02-26
        • 1970-01-01
        • 2019-01-30
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多