[jQuery] $(this) 是什么

前言

$(this) 就是把 DOM 对象传递给 jQuery 构造器中，通过 jQuery 对象让我们可以使用 jQuery 的 html()、css() 等一系列函数操作 DOM 元素。

<button id="btn">Click Me</button>
<script src="path/to/jquery.js"></script>
<script>
  $('#btn').click(function() {
    $(this).css('background-color', 'blue').text('Clicked!');
  });
</script>

在这个示例中，$(this) 将 this （this 将会指向被点击的按钮）封装成一个 jQuery 对象，然后可以调用 css 和 text 方法来修改按钮的样式和文本内容。

简化的 jQuery 构造函数

// 定义 jQuery 构造函数
function jQuery(selector) {
  // 创建一个新的 jQuery 实例
  return new jQuery.fn.init(selector);
}

// 定义 jQuery 的原型对象
jQuery.fn = jQuery.prototype = {
  constructor: jQuery,
  init: function(selector) {
    // 检查传入的参数类型
    if (typeof selector === 'string') {
      // 如果是选择器字符串，使用 document.querySelectorAll 获取 DOM 元素
      this.elements = document.querySelectorAll(selector);
    } else if (selector.nodeType) {
      // 如果是 DOM 元素，直接将其封装到 elements 数组中
      this.elements = [selector];
    } else if (Array.isArray(selector)) {
      // 如果是数组，直接赋值
      this.elements = selector;
    } else {
      // 其他情况，初始化为空数组
      this.elements = [];
    }

    // 返回当前实例，支持链式调用
    return this;
  },

  // 定义一些常用的方法
  css: function(property, value) {
    for (let i = 0; i < this.elements.length; i++) {
      this.elements[i].style[property] = value;
    }
    return this; // 支持链式调用
  },

  text: function(content) {
    for (let i = 0; i < this.elements.length; i++) {
      this.elements[i].textContent = content;
    }
    return this; // 支持链式调用
  },

  on: function(eventType, handler) {
    for (let i = 0; i < this.elements.length; i++) {
      this.elements[i].addEventListener(eventType, handler);
    }
    return this; // 支持链式调用
  }
};

// 为了让 jQuery 实例可以使用 jQuery.prototype 上的方法
jQuery.fn.init.prototype = jQuery.fn;

// 全局变量 $
window.$ = window.jQuery = jQuery;

1. 构造函数 jQuery：

• jQuery 构造函数接受一个参数 selector，并返回一个新的 jQuery 实例。
• 使用 new jQuery.fn.init(selector) 创建一个新的实例。

2. 原型对象 jQuery.fn：

• jQuery.fn 是 jQuery.prototype 的别名，用于定义 jQuery 实例的方法。
• init 方法是实际的构造函数，负责初始化 jQuery 实例。

3. 全局变量 $ 和 jQuery：

• 将 jQuery 函数赋值给全局变量 $ 和 jQuery，以便在全局范围内使用。