在 JavaScript 中将“this”作为参数传递

Passing 'this' as parameter in JavaScript

提问by eomeroff

I have the following code:

我有以下代码：

HTML:

HTML：

<label id="copyAddress" class="copyAddress" onclick="CopyAddress(this);">
    Copy Address
</label>

JS:

JS：

function CopyAddress(copyAddressLink) {    
  PopulateTarget(copyAddressLink);   
}

function PopulateTarget(link) {
  var targetGroup = $(link).closest('someClass');    
}

In PopulateTarget function 'link' variable is undefined, while in CopyAddress it has values as is should.

在 PopulateTarget 函数中，'link' 变量未定义，而在 CopyAddress 中，它具有应有的值。

What can cause this problem? Is there some restriction for passing parameters in Java Script? How this should behave? If you need more code to post please tell me.

什么会导致这个问题？在 Java Script 中传递参数是否有一些限制？这应该如何表现？如果您需要更多代码发布，请告诉我。

回答by Joseph Silber

Since you are anyhow using jQuery, why are you using obtrusive Javascript?

既然您无论如何都在使用 jQuery，那么您为什么要使用突兀的 Javascript？

Use this instead:

改用这个：

HTML:

HTML：

<label id="copyAddress" class="copyAddress">Copy Address</label>

Javascript:

Javascript：

$(document).ready(function(){
    $('#copyAddress').click(function(){
        var targetGroup = $(this).closest('.someClass');    
    });
});

回答by bfavaretto

You're missing a dot on "someClass", it should be ".someClass".

你在“someClass”上遗漏了一个点，它应该是“.someClass”。

Maybe your code will work after you fix that. However: since you're using jQuery (it seems you are), you should attach the click handler the jQuery way, instead of inline on the HTML. This means:

也许你的代码在你修复之后会起作用。但是：由于您使用的是 jQuery（看起来您是），您应该以 jQuery 方式附加点击处理程序，而不是内联在 HTML 上。这意味着：

$(document).ready(function(){
    $('#copyAddress').click(CopyAddress);
})

function CopyAddress() {    
    PopulateTarget(this);   
}

function PopulateTarget(link) {
    var targetGroup = $(link).closest('someClass');    
}

回答by Phrogz

You should not intermix your HTML and JS. You should instead attach your JS handlers programmatically in your JS code:

你不应该混合你的 HTML 和 JS。您应该改为在您的 JS 代码中以编程方式附加您的 JS 处理程序：

<!-- note: no onclick in this html -->
<label id="copyAddress" class="copyAddress">Copy Address</label>

// Wait until the page is loaded before starting to look for elements
$(function(){

  // Assuming jQuery 1.7
  $('#copyAddress').on('click',copyAddress);

  // …alternatively, for older jQuery
  $('#copyAddress').click(copyAddress);

  function copyAddress(evt){
    // The 'target' property of the event object passed in is the object
    // upon which the event was first triggered.
    PopulateTarget(evt.target);
  }
});

In the case of the above, you could just use thisinstead of evt.target, since you bound the event directly on that object. However, this becomes more powerful if you have a variety of items on the page that perform this function. You can attach the event handler once to some parent object, and then ask—during the callback—which element was clicked on. That would look like:

在上述情况下，您可以使用this代替evt.target，因为您将事件直接绑定到该对象上。但是，如果页面上有多种执行此功能的项目，这将变得更加强大。您可以将事件处理程序一次附加到某个父对象，然后在回调期间询问点击了哪个元素。那看起来像：

// Watch for any element with a copyAddress class to be clicked on,
// even if they are added after this code has run
$(document.body).on('click','.copyAddress',function(evt){
  var target = evt.target;
  console.log("You clicked on",target);
});

回答by TimWolla

As it seems you are using jQuery:

看来您正在使用 jQuery：

You can use jQuery.proxyto bind thisto a specific value. It is used like this:

您可以使用jQuery.proxy绑定this到特定值。它是这样使用的：

jQuery.proxy(function () { console.log(this); }, this);