JavaScript this的多種場(chǎng)景使用
什么是 this
this 是 JavaScript 語言的一個(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：
// 問題示例
box1.onclick = function() {
var num = 0;
setInterval(function() {
num++;
this.innerHTML = str.substring(0, num); // this 指向 window，無法正常工作
}, 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ù)沒有自己的 this，它捕獲定義時(shí)所在上下文的 this 作為自己的 this
- 任何方法（call ()、apply ()、bind ()）都無法改變箭頭函數(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 () 方法
語法：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 () 方法
語法：fun.apply(thisArg, [argsArray])
- 與 call () 類似，但參數(shù)通過數(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 () 方法
語法：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)文章
javascript伸縮型菜單實(shí)現(xiàn)代碼
這是一款真正的JavaScript伸展收縮型菜單，鼠標(biāo)放上看一看，是不是很酷？鼠標(biāo)劃出菜單項(xiàng)的時(shí)候，背景會(huì)伸長。菜單沒有加鏈接，想用的自己加，再美化一下，絕對(duì)夠個(gè)性吧。2015-11-11
這篇文章主要為大家詳細(xì)介紹了QRCode.js二維碼生成并能長按識(shí)別，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
js屏蔽F12審查元素，禁止修改頁面代碼等實(shí)現(xiàn)代碼
有時(shí)候我們需要屏蔽客戶端的F12，以防菜鳥也可以隨意修改我們的代碼，也處于源碼的保護(hù)等操作，這里就為大家分享一下常見的代碼2020-10-10
這篇文章主要給大家介紹了關(guān)于手撕javascript繼承的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了EL表達(dá)式截取字符串的函數(shù)說明，在文章下面給大家介紹了JSTL中自帶的方法列表以及其描述，需要的朋友參考下吧2017-09-09
純javaScript、jQuery實(shí)現(xiàn)個(gè)性化圖片輪播【推薦】
本文主要介紹了純javaScript、jQuery實(shí)現(xiàn)個(gè)性化圖片輪播的方法，并在文章結(jié)尾附上源碼下載。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了JavaScript DOM事件(筆記) ,需要的朋友可以參考下2015-04-04
JavaScript實(shí)現(xiàn)新年倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)新年倒計(jì)時(shí)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
JS中IP地址與整數(shù)相互轉(zhuǎn)換的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS中IP地址與整數(shù)相互轉(zhuǎn)換的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-04-04
JS+Ajax+Jquery實(shí)現(xiàn)頁面無刷新分頁以及分組 超強(qiáng)的實(shí)現(xiàn)
JS+Ajax+Jquery實(shí)現(xiàn)頁面無刷新分頁以及分組 超強(qiáng)的實(shí)現(xiàn) 加上你的CSS完全可以與EXT媲美哦2009-08-08