3

所以，这就是交易。我正在使用 onclick 事件来触发一个函数，因此每次单击时，您都将在 div 原始 innerHTML 和另一个变量之间切换。当我将 testfunction 分配为回调时，它可以工作。这是代码：

var c = '';

function testfunction()
{
    var a = this.innerHTML;

    var b = 'blah';

    if (a !== b)
    {
        c = a;
        return this.innerHTML = b;
    }
    else
    {
        return this.innerHTML = c;
    }

    window.onload = function()
    {
         document.getElementById('rightcontent').onclick = testfunction;
    }

我知道 c 保留了它的价值，因为它是全球范围的。但是我不明白为什么当我将函数放入匿名回调时 c 会返回 undefined ：

    windows.onload = function()
    {
    document.getElementById('rightcontent').onclick = function()
    {
         this.innerHTML = testfunction();
    }
    }

这没有任何意义，我只是在胡闹......但我想知道引擎盖下发生了什么。

抱歉，如果这在其他地方有所涉及，我已经查看了一些帖子以找到我的答案，但我找不到它。

提前致谢 ：-）

4

2 回答 2

2

我知道 c 保留了它的价值，因为它是全球范围的。但是我不明白为什么当我将函数放入匿名回调时 c 会返回 undefined ：

在您的第二个片段中，this不等于#rightcontent，它等于window。window.innerHTML是未定义的，所以第一个分支在你的if/else块中。

c被分配undefined，并被undefined返回。

call您可以调用方法并使用or指定特定上下文apply：

document.getElementById('rightcontent').onclick = function () {
    this.innerHTML = testfunction.call(this);
}

示例：http: //jsfiddle.net/dySA5/

您的第一个代码段没有表现出这种行为的原因是因为在this调用该方法时浏览器设置为被点击的元素。

于 2013-01-08T23:26:02.687 回答
1

http://jsfiddle.net/2aDJS/4/

我清理并 jQuerified 您的示例，使其更易于阅读：

var c = '';

function testfunction() {
  console.log(this)
  var a = this.innerHTML;

  var b = 'blah';

  if (a !== b) {
    c = a;
    this.innerHTML = b;
  } else {
    this.innerHTML = c;
  }
}

$(document).ready(function () {
  $('#rightcontent').click(function () {
    testfunction.call(this);
    //testfunction();
  });

  //$('#rightcontent').click(testfunction);
})

您看到包含在函数中的函数调用失败的原因是，当您这样做时范围会发生变化。this被解释为事件处理程序上的事件诱导元素。如果您在事件处理程序中调用一个函数并希望它引用它，this它将保持不变，除非您使用function.call(scope).

于 2013-01-08T23:48:49.763 回答