别再拿着“这个”了在临时变量中

Question

我必须不断地将 this 保存在临时变量中，以便在其他函数中访问它。例如，在下面的两种方法中，我将 this 保存在 that 变量中：

startTimer: function () {
    var that = this;

    if ($('#defaultCountdown:hidden'))
        $('#defaultCountdown').show('slow');
    shortly = new Date();
    shortly.setSeconds(shortly.getSeconds() + 5);
    $('#defaultCountdown').countdown('change', { until: shortly,
        layout: '<ul id="errorList"><li>Next update in <b>{snn}</b> {desc}</li></ul>',
        description: 'seconds',
        onExpiry: function () {
            that.performUpdate();
        }
    });
},
performUpdate: function () {
    var that = this;

    this.message.fetch({
        success: function () {
            $('#calleesStatuses').html('');
            that.callees.refresh(that.message.get("Callees"));
            $('#defaultCountdown').hide('slow');
            that.startTimer();
        },
        error: function (request, settings) {
            that.killCountDown();
            showErrorMessage(request.responseText)
        }
    });
},

是否有解决此问题的方法，或者我可以使用 apply 吗？

Answer 1

ECMAScript 5 引入了 Function.bind()^[docs]，因此仅较新的浏览器支持它。可以在我链接到的文档中找到替代实现。如果您将其包含在代码中，则也可以在其他（较旧的）浏览器中使用 bind()。

它允许您设置 this 应在函数中引用的对象。所以你可以写：

performUpdate: function () {    
    this.message.fetch({
        success: function () {
            $('#calleesStatuses').html('');
            this.callees.refresh(this.message.get("Callees"));
            $('#defaultCountdown').hide('slow');
            this.startTimer();
        }.bind(this),
        error: function (request, settings) {
            this.killCountDown();
            showErrorMessage(request.responseText)
        }.bind(this)
    });
},

Answer 2

我认为这是最简单的方法。这就是我所做的（尽管我正在编写 GWT 代码），在内部匿名函数中引用包装函数的 this 。

即使像 this.wrappingMethod.this 这样的东西是可能的，将 this 存储在根据您的喜好命名的变量中也更具可读性（您可以使用当然，更具描述性的名称），并且（仍然假设您冷以某种方式引用包装范围）它将更加健壮，因为您可以引入另一个级别而不必重写所有引用。

Answer 3

不，没有。闭包中的 this 值与闭包定义的范围内的值不同，因此这是使其更清晰的唯一方法是在对象级别上定义它，因此至少每个对象只需执行一次，看起来您已经在这样做了。

编辑：

删除“不，没有”，因为 bind 是一个有效的替代方案，并且有可比性实现（请参阅其他答案）。虽然我个人认为 var self = this; 更干净，您只需要为每个对象定义一次，但此时这是一个偏好问题。

Answer 4

我想这并不舒服，但如果原始 this 是您可以执行诸如 startTimer 和 killCountdown 之类的函数的唯一上下文，那么事实并非如此。我建议给它一个更有意义的名称，例如计时器或其他名称。实际上，this 只是一个方便的关键字，用于引用我们正在执行的任何内容的所有者，并且它应该随着所有者的更改而更改。如果“this/that”变得难以阅读，解决方案是将名称从 that 更改为语义上更有意义的名称。

Answer 5

您正在做的是 JavaScript 中的标准模式，只不过传统上使用 self 而不是 that。但是您可以像这样使用 bind() 方法：

onExpiry: performUpdate.bind(this);

如果您使用的框架扩展了 Function 的原型以包含它，或者您的 Javascript 解释器是最新的足够的。 （bind 在幕后创建相同类型的匿名函数，但可以说效率较低，因为它必须处理各种特殊情况）。