這篇文章為大家帶來了JavaScript中關於this指向的相關知識,this關鍵字又是一個非常重要的語法點,希望對大家有幫助。
1. 上下文與this的關係
透過理解上下文,我們可以更加清晰的明白this
的指向問題
this
的指向可以看成就是當前的上下文
# 2. 一般函數
先讓我們透過一個例子來看看什麼是函數中的this
:
let colors = { green : "绿色", blue : "蓝色", showColors : function() { console.log("green: " + this.green + " blue: " + this.blue); }}colors.showColors();let show = colors.showColors;show();
第一個輸出的是綠色和藍色,此時函數的上下文是colors,所以this
指向colors
第二個輸出的是undefined 和undefined,此時直接用圓括號呼叫函數,上下文就是window,此時this
指向的是window
所以,我們可以看出函數的上下文也就是this
是由呼叫函數的方式決定。
常見的函數上下文情況:
- 物件打點呼叫它的方法函數,則函數上下文是這個打點的對象,
this
指向這個物件obj.fun();
上下文就是obj - #直接用圓括號呼叫函數,上下文就是window 對象,
this
指向window 對象
舉例:
function fun() { return this.a + this.b;}var a = 1;var b = 2;let obj = { a : 5, b : fun(), fun : fun}let res = obj.fun();console.log(res);
在obj 裡面的b 這裡的fun() 是直接用圓括號呼叫的,所以此時的fun( ) 上下文就是window 對象,所以這裡的this
指向window,b = 1 2 = 3;
obj.fun() 的fun() 是由obj 打點調用的,所以它的上下文就是obj,所以這裡的this
指向obj,所以res = 5 3 = 8
3. 數組/ 類別數組物件
數組/ 類別數組物件枚舉出函數進行調用,上下文是這個數組/ 類別數組物件
即可以看成:
数组[下标](); 调用这个函数的上下文对象就是这个数组
讓我們透過例子來理解:
let arr = [1, 2, 3, function() { console.log(this[0]);}];arr[3]();
## 這裡下標為3 是個函數,透過陣列列舉出來下標示為3 的對象,然後再執行,所以它的上下文就是這個陣列arr
類別陣列物件:
- 什麼是類別數組物件?
length屬性的物件
例如:
arguments物件就是一個類別數組對象,它是函數的實參列表
function fun() { arguments[3]();}fun(1, 2, 3, function() { console.log(this[0]);})
arguments[3]()這個語句,所以就會輸出
this[0],它是個類別數組物件列舉函數進行調用,所以它的上下文就是
arguments,
this指向它。
4. 立即執行函數立即執行函數(IIFE),它的上下文就是window 對象,所以它的
this指向的是window
var a = 1;let obj = { a : 2, fun : (function() { let a = this.a; return function() { console.log(a + this.a); } })()};obj.fun();
obj.fun()由前文所講,fun() 由obj 調用,所以這裡的
this指向obj;
obj 中的fun 等於一個立即執行函數的回傳值,
就相當於
obj = function() { console.log(a + this.a);}這裡的
this#的是obj,所以this.a = 2;
在這個立即執行函數裡面它的上下文物件是window,所以它的
this指向window,所以這裡面的let a = this.a的
this指向的會是window 對象,所以a = 1,所以它的回傳值那裡的a = 1;
所以最終輸出1 2 = 3
this指向window 物件
let obj = { a : 1, b : 2, fun : function() { console.log(this.a + this.b); }}var a = 3;var b = 4;setTimeout(obj.fun, 2000);
這裡
setTimeout的呼叫函數是
obj.fun,它是由延時器調用的,它將在2s 後運行,所以它的
this指向window 對象,輸出7
let obj = { a : 1, b : 2, fun : function() { console.log(this.a + this.b); }}var a = 3;var b = 4;setTimeout(function() { obj.fun();}, 2000);
此时,setTimeout
的第一个参数变成一个匿名函数,此时匿名函数的this
指向的是 window 对象;
在匿名函数中obj.fun()
,这个fun()
是由 obj 调用的,所以此时fun
里面的this
指向的是 obj,所以输出 3
6. 事件处理函数
事件处理函数的上下文是绑定事件的DOM 元素
,this
指向的是DOM 元素
即:
DOM元素.onclick = function() { 这里的上下文就是 DOM元素,this指向DOM元素};
让我们来通过一个例子来理解一下:
nbsp;html> <meta> <meta> <meta> <title>事件处理函数</title> <style> p { width: 200px; height: 200px; float: left; border: 1px solid #000; margin-right: 10px; } </style> <p></p> <p></p> <p></p> <script> function show() { alert("You click " + this.id); } let box1 = document.getElementById('box1'); let box2 = document.getElementById('box2'); let box3 = document.getElementById('box3'); box1.onclick = show; box2.onclick = show; box3.onclick = show; </script>
当我们点击构建出来的三个盒子时,弹出的对话框中会输出对应的盒子 id
因为事件处理函数中,this
指向的就是对应的DOM 元素
【相关推荐:javascript学习教程】
以上是徹底搞懂JavaScript中this指向問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制:1.通過Node.js實現服務器端編程,適用於高並發請求處理。 2.通過ReactNative進行移動應用開發,支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制,適用於硬件交互。

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序(一個Edtech應用程序),您可以做同樣的事情。 首先,什麼是多租戶SaaS應用程序? 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

本文展示了與許可證確保的後端的前端集成,並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript是現代Web開發的核心語言,因其多樣性和靈活性而廣泛應用。 1)前端開發:通過DOM操作和現代框架(如React、Vue.js、Angular)構建動態網頁和單頁面應用。 2)服務器端開發:Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發:通過ReactNative和Electron實現跨平台開發,提高開發效率。

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

Python更适合数据科学和机器学习,JavaScript更适合前端和全栈开发。1.Python以简洁语法和丰富库生态著称,适用于数据分析和Web开发。2.JavaScript是前端开发核心,Node.js支持服务器端编程,适用于全栈开发。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

禪工作室 13.0.1
強大的PHP整合開發環境

SublimeText3 Linux新版
SublimeText3 Linux最新版

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

記事本++7.3.1
好用且免費的程式碼編輯器

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。