在学习"$(this)和this"过程中遇到的一点疑惑！

Posted 2020-06-17

在学习JQuery的过程中，我遇到了$(this),this，通过查阅网上资料，我发现大部分来源中对于它们的解释基本一致，其最终来源似乎都来自一位叫做Remy Sharp的程序员的一篇文章https://remysharp.com/2007/04/12/jquerys-this-demystified ，其中我发现了一些解释并不够清楚的地方，写下来与各位讨论。

以下是在查阅资料过程过发现的一个例子：

$("#desktop a img").each(function(index){
  alert($(this));      //[object Object ]
  alert(this);         //[object htmlImageElement]
}）

其中说到this表示的是一个html对象（或元素），$(this)表示的是一个JQuery对象，但我觉得这种说法并不够准确，根据对this的一种定义：

     在函数内部,有两个特殊的对象：arguments和this。即是说，this作为函数的一个内部属性引用的是函数据以执行操作的对象——或者也可以说，this是函数执行时所处的作用域（当在网页的全局作用域中调用函数时this对象引用的就是window）¹。

也就是说，在实际的实用过程中，this指代的是一个html对象。

而对于$(this)来说，它不仅是一个JQuery对象，更准确的说它是一个包装集，请看下面的解释：

    为了使设计和内容分离而把CSS引入Web技术中，需要以某种方式从外部样式表中引入页面元素组。开发出来的方法就是通过使用选择器。例如，选择器

          p a

    JQuery利用同样的选择器，不仅支持目前的CSS中使用的常见选择器，还支持大多浏览器尚未实现的选择器，如
         $（selector）
    或者
         jQuery(selector)
    其中$()函数返回特别的javascript对象，它包含着与选择器相匹配的DOM元素的数组，该对象拥有大量预定义的方法（如attr()）。

    用编程的话来说，这种构造称为包装器，因为它用扩展功能来对匹配的元素进行包装。我们使用属于jQuery包装器或者包装集，来指能够在其上用jQuery定义的方法去操作的、匹配元素的集合。²

从上面可以看出，$(this)得到的其实是一个数组，换句话说是一个包装集，如果想要模拟this的效果，可使用$(this)[0]或者$(this).get(0)；同时也解释了为什么this.attr()会发生错误，以及在下例中，不能讲this换成$(this)的原因：

$("#textbox").hover( 
   function() { 
      this.title ＝ "Test"; 
   }

   function() { 
      this.title = "OK"; 
   } 
);

 

1、参考《Javascript高级程序设计第二版》5.5.4 函数内部属性；

2、参考《jQuery实战》1.3.1 jQuery包装器。