全面了解jqthis，解密jQuery中最重要的this对象

一、简介

jQuery是一款非常受欢迎的JavaScript库，它简化了JavaScript的使用，并提供了很多常用的函数和方法，使得我们能够轻松地完成众多 Web 开发任务。

在jQuery中，最重要的对象之一就是this。this 可以理解为当前jQuery对象的上下文。通过this我们可以获取到当前元素的属性，或是对此进行操作。

而jqthis，是jQuery内置的对象，它引用了当前的jQuery对象。在jQuery中使用时，我们通常会将当前jQuery对象作为参数传递给一个回调函数中，并在函数中执行一些操作。而这个参数，就是jqthis对象。

二、 jqthis的用法

当在jQuery回调函数中访问Global对象（window）时，为了避免与其他全局定义的变量名称冲突，我们需要使用jQuery对象的“命名空间”$符号。而在$符号后面，就跟着我们想要操作的DOM元素，比如：

$(function(){
  $('#btn').click(function(){
    alert($("#btn").text());
  });
});

在上述代码中，用到了id为“btn”的按钮元素。当我们点击这个按钮时，会弹出对话框，提示我们按钮的文本内容。通过这个例子，我们可以发现，$符号后面跟着的这个参数，就是我们常说的jqthis对象。

除了传递参数外，我们也可以使用this来访问jqthis对象：

$(document).ready(function(){
  $('p').click(function(){
    alert($(this).text());
  });
});

在这个例子中，当我们点击页面中的任意一个段落时，会弹出对话框，显示当前段落的文本内容。同时我们可以看到，代码中的this变量，存储了当前的jQuery对象，即是jqthis对象。

三、 jqthis的特性

有意思的是，jqthis对象具备jQuery对象的所有属性和方法。

比如：

$("#foo").html();

这个例子中的jqthis对象就具备了.html()函数。

实际上，在jQuery内部，$符号和jqthis是等价的。可以参考下面这个例子：

var myjQuery = function(selector) {
  // 构造jQuery原型对象，例如等价于：Object.create(jQuery.fn)
  var jqObject = Object.create(myjQuery.fn);
  // 通过构造函数初始化jqObject的属性和方法
  // 这一步之所以复杂，是为了让jqObject可以使用jQuery对象的所有属性和方法
  jqObject.selector = selector;
  var domObject = document.querySelector(selector);
  jqObject[0] = domObject;
  jqObject.length = 1;
  return jqObject;
}
myjQuery.fn = myjQuery.prototype = {
  constructor: myjQuery,
  html: function() {
    return this[0].innerHTML;
  }
};
var $foo = myjQuery('#foo');
console.log($foo.html()); // 打印出
   
Hello World!
   

上面这个例子中，通过给myjQuery对象添加html函数，使得myjQuery对象可以直接调用html函数来获取DOM元素的innerHTML属性。

可以看出，这个例子中myjQuery对象的属性和方法，跟我们所熟知的$符号和jqthis基本一致。

四、 jqthis和闭包

在jQuery中使用闭包，可以更好地利用到jqthis对象。下面的例子，就展示了如何使用jqthis和闭包来改变HTML元素：

<!-- HTML代码 -->
<div class="change-text">初始文本</div>

// JavaScript代码
$(document).ready(function(){

    function changeText(text){
        $('.change-text').click(function(){
          // jqthis对象调用html函数改变文本内容
            $(this).html(text);
        });
    }

    // 闭包函数，捕获changeText函数的arg参数值并返回一个新的函数
    // 新函数可以访问原始arg参数
    function makeClosure(arg){
        return function(){
            changeText(arg);
            arg = arg + '真的变了！';
        }
    }

    // 绑定按钮1的点击事件
    $('#btn-1').click(makeClosure('新的文本'));

    // 绑定按钮2的点击事件
    $('#btn-2').click(makeClosure('不同的文本'));

});

上述例子中，我们通过click函数来绑定div元素的单击事件。当单击元素时，将会调用函数changeText()，函数中的这句代码“$(this).html(text);”能够将当前元素的文本内容改变为传递过来的text参数值。而text参数，就是通过闭包来实现的。

最后，我们所熟知的$符号，即是jqthis对象，通过$符号我们能够方便地使用jQuery中的众多函数和方法，而jqthis的存在，使得我们能够更加方便地在回调函数中访问jQuery对象，实现功能强大的JavaScript功能。