Javascript与“this”引用冲突[重复]答案

【问题标题】：Javascript conflict with 'this' reference [duplicate]Javascript与“this”引用冲突[重复]
【发布时间】：2016-03-30 11:43:21
【问题描述】：

我有一段 javascript 代码（使用 jQuery）说：

$('.duration').each(function() {
    $(this).html(this.duration_text);
});

它遍历类 'duration' 的每个元素并根据需要设置文本。问题在于它设置的文本来自一个成员变量，因此是 this.duration_text。 'this' 引用被 jQuery 在迭代中使用的 'this' 引用破坏了。

如何避免这种碰撞？

虽然答案的基本概念可能与标记为重复的问题完全相同，但我并不清楚这是同一个问题。事后看来，当然，但是在搜索自己时我没有找到它，也不清楚如果我找到它是同一个问题。

【问题讨论】：

【解决方案1】：

您可以在创建循环之前创建对this 的引用，然后使用self 来引用具有duration_text 属性的对象：

var self = this;
$('.duration').each(function() {
    $(this).html(self.duration_text);
});

虽然你可以这样做：

$('.duration').html(this.duration_text);

【讨论】：

【解决方案2】：

您可以使用闭包变量来保存对外部对象的引用

var self = this;
$('.duration').each(function() {
  $(this).html(self.duration_text);
});

但是在给定的 sn-p 中，由于您将相同的内容分配给所有 duration 元素，您可以只使用

$('.duration').html(this.duration_text);

【讨论】：