传递和接收 $(this) 作为参数的方式？答案

【问题标题】：Way to pass and receive $(this) as a parameter?传递和接收 $(this) 作为参数的方式？
【发布时间】：2013-11-12 18:45:15
【问题描述】：

假设我有两个图像和两个 div。

<html>
    <body>
        <img id="div0image" class='divImages' alt="" src="../images/div0image.png" />
        <img id="div1image" class='divImages' alt="" src="../images/div1image.png" />

        <div id="div0" class='divs'></div>
        <div id="div1" class='divs'></div>
    </body>
</html>

假设 CSS 是这样的

#div0, #div1, #div0image, #div1image {
    width: 200px;
    width: 200px;
}

现在，假设我有一个这样的 Javascript 函数

function somethingIsClicked(thisParameter) { //thisParameter needs to be a $(this) object
    var thisID = $(this).attr('id'); //$(this) should refer to the object passed in the parameter (thisParameter)

    $(this).addClass('checkIfThisClassIsAdded');
    alert('works!');
}

然后假设我有这两个功能

$('.divs').click( function() {
    somethingIsClicked($(this));
});

$('.divImages').click( function() {
    thisID = $(this).attr('id'); //div0image
    thisDivsID = thisID.slice(0,4); //div0
    $('#' + thisDivsID).each( function() {
        somethingIsClicked($(this));
    });

有没有正确的方法传递然后接收$(this)作为参数，然后引用函数中接收$(this)作为参数的$(this)对象？

【问题讨论】：

P.S. #div0, div1, div0image, div1image 应该是 #div0, #div1, #div0image, #div1image。

标签： javascript jquery parameter-passing this

【解决方案1】：

是的，使用.call。

somethingIsClicked.call(this)

您可以选择向它传递其他参数，例如事件对象：

$('.divs').click( function(event) {
    somethingIsClicked.call(this,event);
});

或者，如果您有一个参数数组，.apply 的工作方式相同。

$('.divs').click( function(event) {
    somethingIsClicked.apply(this,[event,{foo:"Hello World!"}]);
});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

但是请注意，在这种简化的情况下，这样做会更有意义

$('.divs').click(somethingIsClicked);

【讨论】：

好的，所以我应该做“somethingIsClicked($(this));”而不是“somethingIsClicked().call(this);”然后我的 'somethingIsClicked' 函数应该是“function somethingIsClicked() { var thisID = $(this).attr('id'); }” 没有参数，那会起作用吗？啊，好吧，有道理。谢谢。
您输入错误 @user2719875。正如上面 Kevin 所示，somethingIsClicked.call(this); 不是 somethingIsClicked().call(this)，否则是的！

【解决方案2】：

你有两个选择：

使用参数

$('.divImages').click( function() {
    thisID = $(this).attr('id'); //div0image
    thisDivsID = thisID.slice(0,4); //div0
    $('#' + thisDivsID).each( function() {
        somethingIsClicked($(this));
    });

$('.divs').click( function() {
    somethingIsClicked($(this));
});

function somethingIsClicked(element) {
    var thisID = element.attr('id);
    element.addClass('checkIfThisClassIsAdded');
    alert('works!');
}

或者使用call来改变函数的上下文：

$('.divImages').click( function() {
    thisID = $(this).attr('id'); //div0image
    thisDivsID = thisID.slice(0,4); //div0
    $('#' + thisDivsID).each( function() {
        somethingIsClicked.call(this);
    });

$('.divs').click( function() {
    somethingIsClicked.call(this);
});

function somethingIsClicked() {
    var thisID = $(this).attr('id);
    $(this).addClass('checkIfThisClassIsAdded');
    alert('works!');
}

【讨论】：

【解决方案3】：

您可以使用.call(thisParamter, arg1, arg2, arg3 ...) 或.apply(thisParamter, [arg1, arg2, ... ])。

$('.divs').click( function() {
    somethingIsClicked.call(this);
});

如果你没有其他参数可以直接使用：

$('.divs').click(somethingIsClicked)

【讨论】：

【解决方案4】：

你可以使用$.proxy:

$('#' + thisDivsID).each( function() {
    $.proxy(somethingIsClicked, this)();
});

您的接收函数将不需要任何参数，因为this 将与each() 块在同一范围内：

function somethingIsClicked() {
    var thisID = $(this).attr('id');    
    $(this).addClass('checkIfThisClassIsAdded');
    alert('works!');
}

Example fiddle

【讨论】：

【解决方案5】：

是的，你可以使用

call(this, arg1,arg2) 要么 apply(this, arrayOfArgs)

有关差异的解释，请参见下面的链接！ http://odetocode.com/blogs/scott/archive/2007/07/05/function-apply-and-function-call-in-javascript.aspx

【讨论】：