JavaScript中函數的上下文——this

curried 發布于2019-08-22 13:45 / 1356人閱讀

摘要：上下文初步了解我們來研究一下函數的上下文，所謂的上下文就是指函數里面的是誰。即函數內部的指向。瀏覽器運行結果因為圓括號調用函數，上下文是對象。此時點擊誰，就是誰定時器調用函數，上下文是對象函數函數被定時器調用，此時函數的上下文就是對象。

1.上下文初步了解：

我們來研究一下函數的上下文（context），所謂的上下文就是指函數里面的this是誰。

當一個函數當做對象的方法被調用的時候，這個函數里面this表示這個對象：

現在我們調用sayHello函數的時候，是通過obj打點調用的，所以現在這個sayHello函數的上下文就是obj對象。即sayHello函數內部的this指向obj。
但是，千萬不要認為寫在對象里面的函數，上下文一定是這個對象！！
比如：

瀏覽器運行結果：

因為圓括號調用函數，上下文是window對象。
函數的上下文是什么，取決于函數怎么調用，而不是函數如何定義。
函數的上下文是函數的調用時表現的性質，不是函數定義的時候寫死的性質。

2.函數上下文遵循五個規律

2.1函數用圓括號調用，函數的上下文是window對象

函數function fun(){}的上下文是什么呢？不要看它怎么定義，要看它怎么調用。此時是fun()函數名加上圓括號直接調用，上下文就是window對象！
而我們知道：所有的全局變量都是window對象的屬性，（注意：函數里面的局部變量，不是window的屬性，不是任何東西的屬性，它就是一個變量。）程序彈出666。
2.2函數如果作為一個對象的方法，對象打點調用，函數的上下文就是這個對象
比如下面的例子，我們把fun函數定義出來了，然后又把這個函數綁定給了obj對象的c屬性：

調用的時候，是“對象.函數()”
此時根據規律，函數里面的this是這個對象。所以能夠彈出1。
2.3函數是事件處理函數，函數的上下文就是觸發這個事件的對象
下面我們定義了一個fun，然后把這個fun當做了3個DOM元素的事件處理函數：

函數不會執行，直到用戶點擊了某一個div標簽。此時點擊誰，this就是誰！
2.4定時器調用函數，上下文是window對象

函數fun被定時器調用，此時函數的上下文就是window對象。每秒鐘能彈出1.
2.5數組中存放的函數，被數組索引之后加圓括號調用，this就是這個數組
比如：

一定要敏感：
arr[0]();
此時這個函數是從數組中枚舉出來然后加圓括號執行的，所以最終調用者可以認為是這個數組，上下文就是這個數組！

云服務器 GPU云服務器 javascript中this詳解 javascript的this javaScript中的this javascript的函數

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

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

深入理解JavaScript執行上下文和執行棧

摘要：執行上下文和執行棧是中關鍵概念之一，是難點之一。理解執行上下文和執行棧同樣有助于理解其他的概念如提升機制作用域和閉包等。函數執行完成，函數的執行上下文出棧，并且被銷毀。前言如果你是一名 JavaScript 開發者，或者想要成為一名 JavaScript 開發者，那么你必須知道 JavaScript 程序內部的執行機制。執行上下文和執行棧是JavaScript中關鍵概念之一，是Ja...

silenceboy 2019-08-23 16:00 評論0 收藏0
深入理解JavaScript執行上下文和執行棧

摘要：執行上下文和執行棧是中關鍵概念之一，是難點之一。理解執行上下文和執行棧同樣有助于理解其他的概念如提升機制作用域和閉包等。函數執行完成，函數的執行上下文出棧，并且被銷毀。前言如果你是一名 JavaScript 開發者，或者想要成為一名 JavaScript 開發者，那么你必須知道 JavaScript 程序內部的執行機制。執行上下文和執行棧是JavaScript中關鍵概念之一，是Ja...

leiyi 2019-08-02 14:34 評論0 收藏0
理解JavaScript的核心知識點：This

摘要：關鍵字計算為當前執行上下文的屬性的值。毫無疑問它將指向了這個前置的對象。構造函數也是同理。嚴格模式無論調用位置，只取顯式給定的上下文綁定的，通過方法傳入的第一參數，否則是。其實并不屬于特殊規則，是由于各種事件監聽定義方式本身造成的。 this 是 JavaScript 中非常重要且使用最廣的一個關鍵字，它的值指向了一個對象的引用。這個引用的結果非常容易引起開發者的誤判，所以必須對這個關...

TerryCai 2019-08-23 17:00 評論0 收藏0
如何理解JavaScript的this關鍵字

摘要：原文鏈接參考深入理解原型和閉包完結王福朋博客園中的作用域詳解博客園前言王福朋老師的 JavaScript原型和閉包系列文章看了不下三遍了，最為一個初學者，每次看的時候都會有一種大徹大悟的感覺，而看完之后卻總是一臉懵逼。原型與閉包可以說是 JavaScirpt 中理解起來最難的部分了，當然，我也只是了解到了一些皮毛，對于 JavaScript OOP 更是缺乏經驗。這里我想總...

Yangder 2019-08-23 12:03 評論0 收藏0
JavaScript this 講解

摘要：作為方法進行調用，該上下文是方法的擁有者作為全局函數調用，其上下文永遠是也就是說，該函數是的一個方法作為構造器進行調用時，其上下文對象則是新創建的對象實例。精確把握 JavaScript 中的 this this 是 JavaScript 中的一個關鍵字，當一個函數被調用時，除了傳入函數的顯式參數以外，名為 this 的隱式參數也被傳入了函數。this 參數指向了一個自動生成的內部對...

zhangwang 2019-08-19 17:45 評論0 收藏0
理解 JavaScript 中的 this 關鍵字

摘要：原文許多人被中的關鍵字給困擾住了，我想混亂的根源來自人們理所當然地認為中的應該像中的或中的一樣工作。盡管有點難理解，但它的原理并不神秘。在瀏覽器中，全局對象是對象。運算符創建一個新對象并且設置函數中的指向調用函數的新對象。原文：Understanding the this keyword in JavaScript 許多人被JavaScript中的this關鍵字給困擾住了，我想混亂的...

jayzou 2019-08-21 10:32 評論0 收藏0