Javascript与'this'参考

Question

我有一段javascript代码（使用jQuery），上面写着：

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

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

如何避免这种碰撞？

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

Answer 1

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

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

虽然你可以这样做：

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

Answer 2

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

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

但是在给定的代码段中，因为您要为所有duration元素分配相同的内容，您只需使用

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