插件开发中的 jQuery $this vs $(this)答案

【问题标题】：jQuery $this vs $(this) in plugin development插件开发中的 jQuery $this vs $(this)
【发布时间】：2009-07-21 11:15:50
【问题描述】：

我想知道为什么在这么多 jquery 插件中 $(this) 设置为指向 $this，这是一个示例，如果我在页面上包含以下两个插件：

(function($) {
   jQuery.fn.pluginOne = function() {
      return this.each(function() {
         $this = $(this); <--
         alert($this);
      });
   };
})(jQuery)

(function($) {
   jQuery.fn.pluginTwo = function() {
      return this.each(function() {
         $this = $(this); <--
         alert($this);
      });
   };
})(jQuery)

当我在 dom 上调用两个插件时：

$(document).ready({
   $('.myClass').pluginOne();
   $('.myOtherClass').pluginTwo();
});

第一个插件将从第二个插件获得 $this... 而我将 $(this) 指向一个本地变量：

(function($) {
   jQuery.fn.pluginTwo = function() {
      return this.each(function() {
         var trigger = $(this); <--
         alert(trigger);
      });
   };
})(jQuery)

一切正常，当然应该......

所以我的问题是......我应该什么时候使用 $this？

谢谢

【问题讨论】：

只是为了澄清......在上面的例子中 $('.myOtherClass').pluginTwo();将返回以下数组的第一个元素：$('.myClass')

标签： jquery this keyword

【解决方案1】：

$this 是人们用来在变量中缓存实际 jQuery 对象 $(this) 的标准。

你可以随意称呼它，有些人喜欢称它为 $self。

例如

var $self = $(this)

当您查看代码以识别它是一个 jQuery 对象而不是一个普通的 dom 对象时，它只会有所帮助。

因为你只创建了一个 jQuery 变量的实例，它的性能会更好。

【讨论】：

重点是在上面的例子中应该是'var $this'，然后呢？
...你的答案，是的。在我看来，与 $this 范围相关的原始问题 - 事实上，海报是正确的（变量应该是本地的）并且恰好有两个插件（a）使用 $this 作为约定，而不是因为它具有固有的含义，并且 (b) 没有正确地确定它的范围。

【解决方案2】：

$ 是 Javascript 中变量和函数名称的合法字符。如果您来自 PHP，其中 $ 仅用于表示变量（我花了一段时间才意识到），那可能会令人困惑。

在 jQuery 中，$ 是函数 jQuery 的别名，它是处理 DOM 选择的主要函数。 $("#header ul.menu") 与 jQuery("#header ul.menu") 相同。 $ 只是为了简洁而使用。
this 是 Javascript（不是 jQ）中的一个特殊术语，表示当前元素（例如，在您可能会看到 this.submit() 的形式中）。
$(this) 表示“使用 Javascript 的 this 调用 jQuery 函数”。
$this 只是一个变量，因为$ 是一个有效字符。您可以将$this 设置为您喜欢的任何值，它与Javascript 的this 完全无关。一般来说，我建议不要将 $ 用于变量名，以避免与 jQuery 函数混淆。但是，使用$var 来表示 jQuery 对象而不是普通的 Javascript 变量可能很有用。

【讨论】：

【解决方案3】：

如果您正在使用包裹在 jQuery 对象中的元素执行许多不同的命令，那么只获取元素（作为包裹集）一次并将其存储在局部变量中会更高效

var $this = $(this);
// then use $this in your function.

注意var 用于本地范围$this

【讨论】：