JavaScript this的多種場(chǎng)景使用
更新時(shí)間：2025年09月05日 08:55:28 作者：啦工作呢
this是JavaScript語(yǔ)言的一個(gè)關(guān)鍵字,代表函數(shù)運(yùn)行時(shí)自動(dòng)生成的內(nèi)部對(duì)象,僅能在函數(shù)內(nèi)部使用, 下面就來(lái)介紹一下JavaScript this的多種場(chǎng)景使用,感興趣的可以了解一下
什么是 this
this 是 JavaScript 語(yǔ)言的一個(gè)關(guān)鍵字，代表函數(shù)運(yùn)行時(shí)自動(dòng)生成的內(nèi)部對(duì)象，僅能在函數(shù)內(nèi)部使用。其值會(huì)隨函數(shù)使用場(chǎng)合不同而變化，但核心原則是：this 指向調(diào)用函數(shù)的那個(gè)對(duì)象。
this 的多種指向場(chǎng)景
1. 全局范圍內(nèi)的 this
在全局作用域中，this 指向全局對(duì)象（瀏覽器環(huán)境中為 window）：
var name = 'name1'; console.log(name); // "name1" this.name = 'name2'; console.log(name); // "name2" console.log(this.name); // "name2" window.name = 'name3'; console.log(name); // "name3" console.log(this.name); // "name3" console.log(window.name); // "name3"
2. 純粹的函數(shù)調(diào)用
函數(shù)在全局范圍內(nèi)調(diào)用時(shí)，this 指向全局對(duì)象：
// 案例1
function test() {
this.x = 1;
alert(this.x); // 1
}
test();
// 案例2
var x = 1;
function test() {
alert(this.x); // 1
}
test();
// 案例3
var x = 1;
function test() {
this.x = 0;
}
test();
alert(x); // 03. 事件處理中的 this
在事件處理函數(shù)中，this 指向觸發(fā)事件的元素：
var btn = document.getElementById("btn");
btn.onclick = function() {
this.value = "按鈕"; // this 指向 btn 元素
}4. HTML 結(jié)構(gòu)中的 this
在 HTML 標(biāo)簽的事件屬性中，this 指向綁定事件的元素本身：
<button onclick="fun(this)">點(diǎn)擊</button>
<script>
function fun(_this) {
console.log(_this); // 輸出當(dāng)前點(diǎn)擊的 button 元素
}
</script>5. 對(duì)象方法中的 this
對(duì)象字面量中的方法，this 指向該對(duì)象本身：
var obj = {
name: 'jack',
say: function() {
console.log('obj中的this', this.name); // this 指向 obj
}
}
obj.say(); // "obj中的this jack"6. 定時(shí)器中的 this
定時(shí)器（setTimeout/setInterval）中的回調(diào)函數(shù)，this 默認(rèn)指向 window：
// 問(wèn)題示例
box1.onclick = function() {
var num = 0;
setInterval(function() {
num++;
this.innerHTML = str.substring(0, num); // this 指向 window，無(wú)法正常工作
}, 100);
}
// 解決方案一：使用變量保存 this
box1.onclick = function() {
var _this = this; // 保存當(dāng)前 this 指向
var num = 0;
setInterval(function() {
num++;
_this.innerHTML = str.substring(0, num); // 使用保存的 this
}, 100);
}
// 解決方案二：使用箭頭函數(shù)
box1.onclick = function() {
var num = 0;
setInterval(() => { // 箭頭函數(shù)繼承外部 this
num++;
this.innerHTML = str.substring(0, num); // this 指向 box1
}, 100);
}7. 箭頭函數(shù)中的 this
- 箭頭函數(shù)沒(méi)有自己的 this，它捕獲定義時(shí)所在上下文的 this 作為自己的 this
- 任何方法（call ()、apply ()、bind ()）都無(wú)法改變箭頭函數(shù)的 this 指向
var obj = {
name: "jack",
say: () => {
console.log(this.name); // this 指向全局對(duì)象，而非 obj
}
};8. call ()、apply ()、bind () 中的 this
這三個(gè)方法用于改變函數(shù)中 this 的指向，是函數(shù)對(duì)象的方法。
8.1 call () 方法
語(yǔ)法：fun.call(thisArg, arg1, arg2, ...)
- 立即調(diào)用函數(shù)
- 第一個(gè)參數(shù)指定 this 指向
- 后續(xù)參數(shù)以逗號(hào)分隔傳遞
function fun2(a, b) {
console.log(a + b); // 30
console.log(this); // 指向 box1 元素
}
box1.onclick = function() {
fun2.call(this, 10, 20); // 改變 this 指向?yàn)楫?dāng)前元素
}8.2 apply () 方法
語(yǔ)法：fun.apply(thisArg, [argsArray])
- 與 call () 類似，但參數(shù)通過(guò)數(shù)組傳遞
- 立即調(diào)用函數(shù)
function fun2(a, b) {
console.log(a + b); // 30
console.log(this); // 指向 box1 元素
}
box1.onclick = function() {
fun2.apply(this, [10, 20]); // 參數(shù)以數(shù)組形式傳遞
}實(shí)用案例：獲取數(shù)組最大值
var arr = [56, 76, 45, 34, 87, 98]; var max = Math.max.apply(null, arr); // 98 // 等價(jià)于 ES6 的擴(kuò)展運(yùn)算符 var max = Math.max(...arr); // 98
8.3 bind () 方法
語(yǔ)法：fun.bind(thisArg, arg1, arg2, ...)
- 不會(huì)立即調(diào)用函數(shù)，而是返回一個(gè)新函數(shù)
- 新函數(shù)中的 this 被永久綁定到 bind () 的第一個(gè)參數(shù)
function fun() {
console.log(this); // 指向 box1 元素
}
box1.onclick = function() {
var newFun = fun.bind(this); // 綁定 this 指向
newFun(); // 手動(dòng)調(diào)用新函數(shù)
}call、apply、bind 的區(qū)別
調(diào)用方式：
- call () 和 apply () 會(huì)立即調(diào)用函數(shù)
- bind () 不會(huì)立即調(diào)用，而是返回一個(gè)新函數(shù)
參數(shù)傳遞：
- call () 接收參數(shù)列表：
func.call(this, arg1, arg2) - apply () 接收參數(shù)數(shù)組：
func.apply(this, [arg1, arg2]) - bind () 接收參數(shù)列表：
func.bind(this, arg1, arg2)
- call () 接收參數(shù)列表：
this 指向：
- 三者都能改變函數(shù)內(nèi)部 this 指向
- 若第一個(gè)參數(shù)為 null 或 undefined，this 指向 window（非嚴(yán)格模式）
到此這篇關(guān)于JavaScript this的多種場(chǎng)景使用的文章就介紹到這了,更多相關(guān)JavaScript this場(chǎng)景使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
我們存在著大量在PC頁(yè)面通過(guò)表格看數(shù)據(jù)業(yè)務(wù)場(chǎng)景，表格又分為兩種，一種是antd?/?fusion這種基于dom元素的表格，另一種是通過(guò)?canvas?繪制的類似?excel?的表格，這篇文章主要介紹了antd/fusion表格增加圈選復(fù)制功能,需要的朋友可以參考下2023-09-09
VS Code轉(zhuǎn)換大小寫(xiě)、修改選中文字或代碼顏色的方法
最近在使用VS Code，發(fā)現(xiàn)了不少使用的小技巧，覺(jué)著有必要給大家分享下，下面這篇文章主要給大家介紹了關(guān)于VS Code轉(zhuǎn)換大小寫(xiě)、修改選中文字或代碼顏色的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-12-12
JavaScript實(shí)現(xiàn)計(jì)算圓周率到小數(shù)點(diǎn)后100位的方法示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)計(jì)算圓周率到小數(shù)點(diǎn)后100位的方法,簡(jiǎn)單分析了圓周率計(jì)算的原理并結(jié)合實(shí)例形式給出了javascript計(jì)算圓周率的具體操作技巧,需要的朋友可以參考下2018-05-05
JavaScript undefined及null區(qū)別實(shí)例解析
這篇文章主要介紹了JavaScript undefined及null區(qū)別實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
TypeScript環(huán)境搭建并且部署到VSCode的詳細(xì)步驟
本文給大家介紹TypeScript環(huán)境搭建并且部署到VSCode的詳細(xì)步驟，本文分步驟給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-11-11
利用JavaScript編寫(xiě)一個(gè)簡(jiǎn)單的1024小游戲
在每年的10月24日,我們都會(huì)慶祝程序員節(jié),這是一個(gè)向所有辛勤工作、創(chuàng)造出無(wú)數(shù)令人驚嘆應(yīng)用和系統(tǒng)的程序員們致敬的日子,為了紀(jì)念這個(gè)特殊的日子,我們將通過(guò)編寫(xiě)一個(gè)簡(jiǎn)單的1024小游戲來(lái)向所有程序員們表示敬意,本文將詳細(xì)解釋如何使用JavaScript編寫(xiě)這個(gè)小游戲2023-10-10
腳本分析、壓縮、混淆工具 JSA新版本發(fā)布，壓縮效率提高大約10％
腳本分析、壓縮、混淆工具 JSA新版本發(fā)布，壓縮效率提高大約10％...2007-05-05
三劍客：offset、client和scroll還傻傻分不清？
這篇文章主要給大家介紹了三劍客：offset，client和scroll的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
javascript中Number對(duì)象的toString()方法分析
這篇文章主要介紹了javascript中Number對(duì)象的toString()方法,較為詳細(xì)的分析了toString()方法的用法及注意事項(xiàng),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12
這篇文章主要教大家一秒學(xué)會(huì)微信小程序制作table表格，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02