从其范围之外访问变量？答案

【问题标题】：Accessing a variable from outside its scope?从其范围之外访问变量？
【发布时间】：2013-04-04 00:24:26
【问题描述】：

所以，我对 javascript 还比较陌生，但仍然无法理解变量范围。所以，我想做的是从函数外部（都在同一个对象内）访问一个变量。

见下文：

function GameCard(imageSource, div)
{
    this.cardImage = new Image();
    this.cardImage.src = imageSource;

    this.imageString = "<img src='" + this.cardImage.src + "' />";

    this.hiddenImage = new Image();
    this.hiddenImage.src = HIDDEN_SOURCE;

    this.clicked = false;

    this.cardDiv = div;

    $(this.cardDiv).click(function() {
        alert(this.imageString);
        $(this).flip({
            direction:'lr',
        });
    });
}

警报（我不幸的调试）说 imageString 在单击处理函数中未定义。哪个有道理，我该如何访问它？

提前致谢， J

【问题讨论】：

这可能是您的this....的范围问题。
cclerville 是正确的，当您在 .click() 函数中使用“this”时，它实际上指的是被点击的“cardDiv”对象，而不是封装的“GameCard”对象。

标签： javascript jquery scope

【解决方案1】：

两种方式：第一，您可以将this 存储在另一个变量中：

var saveThis = this;

在设置“click”处理程序之前，然后在处理程序代码中使用“saveThis”：

$(this.cardDiv).click(function() {
    alert(saveThis.imageString);
    $(saveThis).flip({
        direction:'lr',
    });
});

第二种方式：将handler函数绑定到你想要的对象上：

$(this.cardDiv).click(function() {
    alert(this.imageString);
    $(this).flip({
        direction:'lr',
    });
}.bind(this));

第二种方式在旧版 IE 中需要a shim。

【讨论】：

这行得通，谢谢。只是为了澄清（如果你不介意的话）你能解释发生了什么吗？我想我理解@Moby 的解释。只是有点纠结。
“神奇的”伪变量this 在每个函数调用时获取一个值。它获得的值取决于函数调用的情况。在您的情况下，jQuery 总是尝试确保 this 将是事件中涉及的元素（在这种情况下为“单击”）。使用上述任一技术，您都会覆盖该行为。

【解决方案2】：

在函数外部声明一个 imageString var 并在 GameCard 和匿名 click() 事件的函数中使用它。

这两个函数不共享内存空间，因为匿名函数不在 GameCard 的上下文中执行，但它们都共享外部声明的全局变量。

【讨论】：

如果走这条路，应该小心污染全局命名空间，特别是如果您有多个 GameCard 对象实例。
我同意。只是试图让答案简单化。

【解决方案3】：

在这种情况下，“this”指的是 $(this.cardDiv) 而不是父对象。

您可以考虑使用一个包含 CardGame 对象之外的所有数据的 javascript 对象

这样数据的范围会更高，可以从您的方法中访问

【讨论】：