詳解js和jquery里的this關鍵字

LoftySoul 發布于2019-08-21 12:28 / 1763人閱讀

摘要：出于這個原因，該函數返回的，所以在這里指的是，所以返回的是第一個說明關鍵字通常在對象的構造函數中使用，用來引用對象。重寫無法重寫，因為它是一個關鍵字。結論，表示當前的上下文對象是一個對象，可以調用對象所擁有的屬性，方法。

在《javaScript語言精粹》這本書中，把 this 出現的場景分為四類，簡單的說就是：

有對象就指向調用對象
沒調用對象就指向全局對象
用new構造就指向新對象
通過 apply 或 call 或 bind 來改變 this 的所指。

函數調用模式中，this為window；方法調用模式中，this為方法所屬的對象；構造器調用模式中，this為創建的新對象。

js中的this

我們要記住：this永遠指向函數運行時所在的對象！而不是函數被創建時所在的對象。
this對象是在運行時基于函數的執行環境綁定的，在全局環境中，this等于window

先來看個例子：

當getFullname被分配到test變量時，上下文指的是全局對象（window）。這是因為test是被隱式設置為全局對象的屬性。出于這個原因，該函數返回window的fullname，所以在這里 this 指的是window，所以返回的是第一個fullname

說明

this 關鍵字通常在對象的構造函數中使用，用來引用對象。

關鍵字this：總是指向調用該方法的對象，如：

var iCar = new Object();
iCar.color = "red";
iCar.showColor = function(){
     alert(this.color);//輸出"red"
};

關鍵字this用在對象的showColor()方法中，在此環境，this等于iCar

使用this是因為在實例化對象時，總是不能確定開發者會使用什么樣的變量名。使用this，即可在任意多個地方重用同一個函數。考慮下面的例子：

function showColor(){
     alert(this.color);
}
var oCar1 = new Object;
oCar1.color = "red";
oCar1.showColor = showColor;

var oCar2 = new Object;
oCar2.color = "blue";
oCar2.showcolor = showcolor;

oCar1.showColor();//輸出"red"
oCar2.showColor();//輸出"blue"

這段代碼中，首先用this定義函數showColor()，然后創建兩個對象oCar1和oCar2，一個對象屬性被設置為"red",另一個為blue；兩個對象都被賦予了屬性showColor，指向原始的showColor()函數，調用每個showColor的方法，oCar1輸出red，oCar2輸出blue。

引用對象屬性時，必須使用this關鍵字。

所有基于全局作用域的變量其實都是window對象的屬性（property）。這意味著即使是在全局上下文中，this變量也能指向一個對象。

對于 JScript 的客戶版本，如果在其他所有對象的上下文之外使用 this，則它指的是 window 對象。
例如：

作為構造函數調用

所謂構造函數，就是通過這個函數生成一個新對象（object）。這時，this就指這個新對象。

全局環境中的this

在看下面一個this出現在全局環境中的例子：

函數getName()所處的對象是window對象，因此this也一定在window對象中。此時的this指向window對象，所以getName()返回的this.name其實是window.name，因此alert出全局。

結論：無論this身處何處，一定要找到函數運行時（或者說在何處被調用了）的位置。

通過不同的調用語法，改變相同函數內部this的值：

局部環境中的this

看下面一個this出現在局部環境中的例子

其中this身處的函數getName不是在全局環境中，而是處在jubu環境中。無論this身處何處，一定要找到函數運行時的位置。此時函數getName運行時的位置：

alert(jubu.getName());

顯然，函數getName所在的對象是jubu，因此this的安身之處定然在jubu，即指向jubu對象，則getName返回的this.name其實是jubu.name，因此alert出來的是“局部”！

作用域鏈中的this

因為scoping函數屬于window對象，自然作用域鏈中的函數也屬于window對象。

對象中的this

可以在對象的任何方法中使用this來訪問該對象的屬性。這與用new得到的實例是不一樣的。

var obj = {
    foo: "test",
    bar: function () {
        console.log(this.foo);
    }
};

obj.bar(); // "test"

重寫this

無法重寫this，因為它是一個關鍵字。

function test () {
    var this = {};  // Uncaught SyntaxError: Unexpected token this 
}

apply 和 call 調用以及 bind 綁定

apply 和 call 調用以及 bind 綁定都是指向綁定的對象，

jquery中的this

$()生成的是什么呢？實際上$()=jquery()，那么也就是說返回的是一個jquery的對象。
$(this)是jquery對象，能調用jquery的方法，例如click(), keyup()。

 $(function () {
   $("button").click(function () {
       alert(this);//this 表示原生的DOM
       //$(this)表示當前對象，這里指的是button
   }) 
});

在許多情況下JQuery的this都指向HTML元素節點。

結論：
this，表示當前的上下文對象是一個html DOM對象，可以調用html對象所擁有的屬性，方法。
$(this),代表的上下文對象是一個jquery的上下文對象，可以調用jquery的方法和屬性值。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87624.html

【連載】前端個人文章整理-從基礎到入門

摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理從最開始萌生寫文章的想法，到著手...

madthumb 2019-08-23 14:15 評論0 收藏0
Ajax詳解

摘要：當請求完成后注冊一個回調函數。該請求是否觸發全局處理事件如等，請求發送前的回調函數，用來修改請求發送前，此功能可用來設置自定義頭信息，在函數中返回將取消這個請求。例如，為請求指定一個回調函數名。即改變回調函數的，默認就是傳入的整個對象。 Ajax Ajax 全稱是 asynchronous javascript and xml，并不是新的編程語言，可以說是已有技術的組合，主要用來實現客...

jokester 2019-08-23 14:15 評論0 收藏0
詳解1000+項目數據分析出來的10大JavaScript錯誤

摘要：當未捕獲的錯誤通過處理程序引發的錯誤，而不是捕獲在中被瀏覽器的跨域策略限制時，會產生這類的腳本錯誤。例如，如果您將您的代碼托管在上，則任何未被捕獲的錯誤將被報告為腳本錯誤而不是包含有用的堆棧信息。譯者按： null/undefined引發的錯誤在10大錯誤中比例很高。而它們很可能導致嚴重問題，所以要重視起來。原文: Top 10 JavaScript errors from 10...

jubincn 2019-08-22 15:40 評論0 收藏0
前端基礎進階（十五）：詳解 ES6 Modules

摘要：下載地址安裝一個好用的命令行工具在環境下，系統默認的非常難用，所以我個人比較推薦大家使用或者。下載地址安裝在命令行工具中使用查看版本的方式確保與都安裝好之后，我們就可以安裝了。前端基礎進階系列目錄 showImg(https://segmentfault.com/img/remote/1460000009654403?w=1240&h=272); 對于新人朋友來說，想要自己去搞定一個E...

Lowky 2019-08-21 18:31 評論0 收藏0