javascript:将函数分配为回调和变量范围

Question

所以，这就是交易。我正在使用一个 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 保留了它的值(value)，因为它是全局范围的。但我不明白的是，当我将函数放入匿名回调中时，为什么 c 返回未定义:

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

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

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

提前致谢:-)

Answer 1

I understand that the c retains it's value because of it's global scope. But what I don't understand is why c comes back undefined when I put the function into an anonymous callback as such:

在您的第二个代码段中，this 不等于 #rightcontent，它等于 window。 window.innerHTML 未定义，因此第一个分支位于 if/else block 中。

c 被赋值 undefined，返回 undefined。

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

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

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

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