欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript this的多種場景使用

 更新時間：2025年09月05日 08:55:28   作者：啦工作呢  
this是JavaScript語言的一個關鍵字,代表函數(shù)運行時自動生成的內(nèi)部對象,僅能在函數(shù)內(nèi)部使用, 下面就來介紹一下JavaScript this的多種場景使用,感興趣的可以了解一下

什么是 this

this 是 JavaScript 語言的一個關鍵字，代表函數(shù)運行時自動生成的內(nèi)部對象，僅能在函數(shù)內(nèi)部使用。其值會隨函數(shù)使用場合不同而變化，但核心原則是：this 指向調(diào)用函數(shù)的那個對象。

this 的多種指向場景

1. 全局范圍內(nèi)的 this

在全局作用域中，this 指向全局對象（瀏覽器環(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)用時，this 指向全局對象：

// 案例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);  // 0

3. 事件處理中的 this

在事件處理函數(shù)中，this 指向觸發(fā)事件的元素：

var btn = document.getElementById("btn");
btn.onclick = function() {
  this.value = "按鈕";  // this 指向 btn 元素
}

4. HTML 結(jié)構(gòu)中的 this

在 HTML 標簽的事件屬性中，this 指向綁定事件的元素本身：

<button onclick="fun(this)">點擊</button>
<script>
function fun(_this) {
  console.log(_this);  // 輸出當前點擊的 button 元素
}
</script>

5. 對象方法中的 this

對象字面量中的方法，this 指向該對象本身：

var obj = {
  name: 'jack',
  say: function() {
    console.log('obj中的this', this.name);  // this 指向 obj
  }
}
obj.say();  // "obj中的this jack"

6. 定時器中的 this

定時器（setTimeout/setInterval）中的回調(diào)函數(shù)，this 默認指向 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;  // 保存當前 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，它捕獲定義時所在上下文的 this 作為自己的 this
  • 任何方法（call ()、apply ()、bind ()）都無法改變箭頭函數(shù)的 this 指向
var obj = {
  name: "jack",
  say: () => {
    console.log(this.name);  // this 指向全局對象，而非 obj
  }
};

8. call ()、apply ()、bind () 中的 this

這三個方法用于改變函數(shù)中 this 的指向，是函數(shù)對象的方法。

8.1 call () 方法

語法：fun.call(thisArg, arg1, arg2, ...)

  • 立即調(diào)用函數(shù)
  • 第一個參數(shù)指定 this 指向
  • 后續(xù)參數(shù)以逗號分隔傳遞
function fun2(a, b) {
  console.log(a + b);  // 30
  console.log(this);   // 指向 box1 元素
}
 
box1.onclick = function() {
  fun2.call(this, 10, 20);  // 改變 this 指向為當前元素
}

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ù)組最大值

var arr = [56, 76, 45, 34, 87, 98];
var max = Math.max.apply(null, arr);  // 98
// 等價于 ES6 的擴展運算符
var max = Math.max(...arr);  // 98

8.3 bind () 方法

語法：fun.bind(thisArg, arg1, arg2, ...)

  • 不會立即調(diào)用函數(shù)，而是返回一個新函數(shù)
  • 新函數(shù)中的 this 被永久綁定到 bind () 的第一個參數(shù)
function fun() {
  console.log(this);  // 指向 box1 元素
}
 
box1.onclick = function() {
  var newFun = fun.bind(this);  // 綁定 this 指向
  newFun();  // 手動調(diào)用新函數(shù)
}

call、apply、bind 的區(qū)別

  1. 調(diào)用方式：

    • call () 和 apply () 會立即調(diào)用函數(shù)
    • bind () 不會立即調(diào)用，而是返回一個新函數(shù)

  2. 參數(shù)傳遞：

    • call () 接收參數(shù)列表：func.call(this, arg1, arg2)
    • apply () 接收參數(shù)數(shù)組：func.apply(this, [arg1, arg2])
    • bind () 接收參數(shù)列表：func.bind(this, arg1, arg2)

  3. this 指向：

    • 三者都能改變函數(shù)內(nèi)部 this 指向
    • 若第一個參數(shù)為 null 或 undefined，this 指向 window（非嚴格模式）

 到此這篇關于JavaScript this的多種場景使用的文章就介紹到這了,更多相關JavaScript this場景使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • antd/fusion表格增加圈選復制功能思路詳解

    antd/fusion表格增加圈選復制功能思路詳解

    我們存在著大量在PC頁面通過表格看數(shù)據(jù)業(yè)務場景，表格又分為兩種，一種是antd?/?fusion這種基于dom元素的表格，另一種是通過?canvas?繪制的類似?excel?的表格，這篇文章主要介紹了antd/fusion表格增加圈選復制功能,需要的朋友可以參考下
    2023-09-09
  • VS Code轉(zhuǎn)換大小寫、修改選中文字或代碼顏色的方法

    VS Code轉(zhuǎn)換大小寫、修改選中文字或代碼顏色的方法

    最近在使用VS Code，發(fā)現(xiàn)了不少使用的小技巧，覺著有必要給大家分享下，下面這篇文章主要給大家介紹了關于VS Code轉(zhuǎn)換大小寫、修改選中文字或代碼顏色的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。
    2017-12-12
  • JavaScript實現(xiàn)計算圓周率到小數(shù)點后100位的方法示例

    JavaScript實現(xiàn)計算圓周率到小數(shù)點后100位的方法示例

    這篇文章主要介紹了JavaScript實現(xiàn)計算圓周率到小數(shù)點后100位的方法,簡單分析了圓周率計算的原理并結(jié)合實例形式給出了javascript計算圓周率的具體操作技巧,需要的朋友可以參考下
    2018-05-05
  • JavaScript undefined及null區(qū)別實例解析

    JavaScript undefined及null區(qū)別實例解析

    這篇文章主要介紹了JavaScript undefined及null區(qū)別實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-07-07
  • TypeScript環(huán)境搭建并且部署到VSCode的詳細步驟

    TypeScript環(huán)境搭建并且部署到VSCode的詳細步驟

    本文給大家介紹TypeScript環(huán)境搭建并且部署到VSCode的詳細步驟，本文分步驟給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧
    2021-11-11
  • 利用JavaScript編寫一個簡單的1024小游戲

    利用JavaScript編寫一個簡單的1024小游戲

    在每年的10月24日,我們都會慶祝程序員節(jié),這是一個向所有辛勤工作、創(chuàng)造出無數(shù)令人驚嘆應用和系統(tǒng)的程序員們致敬的日子,為了紀念這個特殊的日子,我們將通過編寫一個簡單的1024小游戲來向所有程序員們表示敬意,本文將詳細解釋如何使用JavaScript編寫這個小游戲
    2023-10-10
  • 腳本分析、壓縮、混淆工具 JSA新版本發(fā)布，壓縮效率提高大約10％

    腳本分析、壓縮、混淆工具 JSA新版本發(fā)布，壓縮效率提高大約10％

    腳本分析、壓縮、混淆工具 JSA新版本發(fā)布，壓縮效率提高大約10％...
    2007-05-05
  • 三劍客：offset、client和scroll還傻傻分不清？

    三劍客：offset、client和scroll還傻傻分不清？

    這篇文章主要給大家介紹了三劍客：offset，client和scroll的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-12-12
  • javascript中Number對象的toString()方法分析

    javascript中Number對象的toString()方法分析

    這篇文章主要介紹了javascript中Number對象的toString()方法,較為詳細的分析了toString()方法的用法及注意事項,非常具有實用價值,需要的朋友可以參考下
    2014-12-12
  • 一秒學會微信小程序制作table表格

    一秒學會微信小程序制作table表格

    這篇文章主要教大家一秒學會微信小程序制作table表格，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-02-02

最新評論