全面了解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!
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/228854.html