为什么我们在作用于 jQuery 对象的函数中使用 $(this)？答案

【问题标题】：Why do we use $(this) inside a function acting on a jQuery object?为什么我们在作用于 jQuery 对象的函数中使用 $(this)？
【发布时间】：2015-12-05 19:13:29
【问题描述】：

据我了解，函数内部的this 指的是调用该函数的对象。所以，例如，在

myObj = { name : "Charlie", getType : function() { return typeof(this); } }; 
console.log(myObj.getType());

调用函数getType的对象是myObj，因此typeof(this)是typeof(myObj)。

那么，为什么我总是在 jQuery 函数中看到$(this)？例如，在

$('.not-taller-than-50-pixels').each(function()
{
     if ($(this).height() > 50) $(this).height(50);
});

$('.not-taller-than-50-pixels') 不返回一个 jQuery 对象数组，所以在 each 内部调用函数是一个 jQuery 对象，所以 this 将引用该 jQuery 对象，我可以简单地写 if (this.height() > 50) this.height(50); ?? ?

【问题讨论】：

不，this 将是当前被迭代的元素，它不是 jQuery 对象，它是 jQuery 对象中的元素。 “类数组”对象中的单个值。与使用[1,2,3].forEach 时获取数组值的方式相同，例如1、2 和3，而不是包装在另一个数组中的值，例如[1]、[2] 和[3].
Kevin Bacon，到底是什么类型的元素？
这个问题没有显示任何研究工作。
在您的示例中，它是一个 dom 节点，与使用 document.getElementById('foo') 获得的元素类型相同。但是请注意，$().each 可以用于其他类型的集合，例如原生数组或其他类似数组的对象，因此它可能并不总是一个 dom 节点。
.each() 是 jQuery 的方法，传递的函数不是。此外，在某些情况下，this 指向另一个对象，而不是调用函数的对象。例如在做myObj.getType.bind(window)之后，this永久引用window对象。

标签： javascript jquery scope closures this

【解决方案1】：

据我了解，函数内部的 this 指的是调用函数的对象。

如果函数作为该对象的属性被调用，那是正确的。但是，在您的情况下，您的 jQuery 集合没有将函数作为 jQuery 集合的属性调用，而是使用 .apply 或 .call 调用函数以将其上下文设置为当前正在迭代的元素。

https://github.com/jquery/jquery/blob/1.9.1/src/core.js#L628

它的工作方式类似于Array.prototype.forEach 的工作方式。我认为相似性是故意的，因此大多数熟悉本地方法的开发人员似乎都熟悉它。

这是一个更符合您的第一个 sn-p 的示例，它将按照您期望的方式运行：

$.fn.alertHeight = function () {
  alert(this.height());
}
$('body').alertHeight();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Hello World!</p>

因为该函数存储在$的原型上，并作为jQuery集合的属性调用（这是$的一个实例，）this指的是jQuery集合，因此我们可以使用this.height()直接获取集合中第一个元素的高度。

【讨论】：

【解决方案2】：

我们使用$(this)，因为否则this 没有getter/setter 方法.height()。 $() 使所有选定的元素都可以访问纯 javascript 等效项所没有的 jquery 方法。试试console.log($(this), " VS ", this); 记住$() 是一个函数。

【讨论】：

【解决方案3】：

$('.not-taller-than-50-pixels') 不返回 jQuery 数组对象

不，$('.not-taller-than-50-pixels') 不返回 JQuery 对象数组。它返回一个 JQuery 对象，该对象可以包装零个、一个或多个 DOM 元素。

所以在 each 内部调用函数是一个 jQuery 对象，所以这将引用该 jQuery 对象，我可以简单地写 if (this.height() > 50) this.height(50); ？？？

传递给.each()的回调函数被JQuery对象包裹的每一个DOM元素调用，调用回调函数时，DOM元素作为上下文。也就是说，在回调函数 this 内部将引用 DOM 元素，而不是 JQuery 对象。

.each() 函数的 JQuery 文档中对此进行了说明：

当被调用时，它会遍历作为 DOM 元素的一部分 jQuery 对象。每次回调运行时，都会传递当前的循环迭代，从0开始。更重要的是，回调是在当前 DOM 元素的上下文中触发，所以关键字 this 指的是元素。

【讨论】：