[轉帖]JavaScript全解析——this指向

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

freeflydom

2023年5月26日 18:27 本文熱度 564

this指向（掌握）

this 是一個關鍵字，是一個使用在作用域內的關鍵字

作用域分為全局作用域和局部作用域（私有作用域或者函數作用域）

全局作用域

全局作用域中this指向window

局部作用域

函數內的 this, 和函數如何定義沒有關系, 和函數在哪定義也沒有關系，只看函數是如何被調用的(箭頭函數除外)

可分為以下場景：

普通函數中調用

普通函數中的this和全局調用一樣，this指向window

<script>
    // 全局使用 this 
    console.log(this) //window 
    console.log(window) //window 
    console.log(window === this) //true 
    //普通函數調用 
    function fn() { 
        console.log('我是全局 fn 函數') 
        console.log(this) //window 
    } 
    fn() 
</script>


對象（包含數組）中調用

該函數內的 this 指向 點 前面的內容，也就是那個對象或者數組

語法：

<script> 
    //對象函數調用 
    function fn() { 
        console.log(this) //{fun: ƒ} 
    } 
    var obj = { 
        fun: fn 
    } 
    obj.fun() 
    obj['fun']() 
</script>

定時器處理函數中調用

定時器中的this同樣也是指向window

<script> 
    // 定時器處理函數 
    setTimeout(function() { 
        console.log(this); //window 
    }, 1000) 
</script>

事件處理程序中調用

事件處理程序中的this指向的是事件源

<!DOCTYPE html> 
<html> 

<head> 
   <meta charset="UTF-8"> 
   <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>Document</title> 
   <style> 
       div { 
           width: 200px; 
           height: 200px; 
           background-color: red; 
        } 
    </style> 
</head> 

<body> 
   <div>hello world</div> 
   <script> 
       var res = document.queryselector('div') 
       
       res.onclick = function() { 
           console.log(this); //
       } 
   </script> 
</body> 

</html>

自執行函數中調用

●自執行函數中的this也指向window

<script> 
    (function() { 
        console.log(this); //window 
    })() 
</script>

強行改變this指向

通過上面的學習大家知道，this在不同的情況指向是不同的，但是有時候需要指向一個制定的對象，這就需要改變this的指向

可以理解成不管之前指向哪里，現在我讓你指向哪里你就要指向哪里

強行改變this指向的方式可以通過call、apply和bind來改變

call調用

作用：改變函數內部this的指向

語法：

函數名.call()

對象名.函數名.call(參數1，參數2，參數3...)

參數：

○第一個參數是this要指向的對象

○從第二個參數開始，依次給函數傳遞實參

特點： 會立即調用函數或者說立即執行

<script> 
    function fn(a, b) { 
        console.group('fn 函數內的 打印') 
        console.log('this : ', this) 
        console.log('a : ', a) 
        console.log('b : ', b) 
        console.groupEnd() 
    } 
    var obj = { 
        name: '我是 obj 對象' 
    } 
    var arr = [100, 200, 300, 400, 500] 
    // 用 call 調用 
    fn.call(obj, 100, 200) 
    fn.call(arr, 1000, 2000) 
    /* 
    this : {name: '我是 obj 對象'} 
    a : 100 
    b : 200 
    fn 函數內的 打印 
    this : (5) [100, 200, 300, 400, 500] 
    a : 1000 
    b : 2000 
    */ 
</script>


apply調用

作用： 改變函數內部this的指向

語法：

○函數名.apply()
○對象名.函數名.apply(參數1，[參數2，參數3...])

參數：

○第一個參數是this要指向的對象

○第二參數的一個數組，要傳遞的實參要放到數組里面，就是有一個實參也要放到數組里面

特點： 會立即調用函數或者說立即執行

<script> 
    function fn(a, b) { 
        console.group('fn 函數內的 打印') 
        console.log('this : ', this) 
        console.log('a : ', a) 
        console.log('b : ', b) 
        console.groupEnd() 
     } 
     var obj = { 
         name: '我是 obj 對象' 
     } 
     var arr = [100, 200, 300, 400, 500] 
     // 用 apply 調用 
     fn.apply(obj, [100, 200]) 
     fn.apply(arr, [1000, 2000]) 
     /* 
     fn 函數內的 打印 
      this : {name: '我是 obj 對象'} 
      a : 100 
      b : 200 
      fn 函數內的 打印 
      this : (5) [100, 200, 300, 400, 500] 
      a : 1000 
      b : 2000 
      */ 
</script>

bind調用

作用： 改變函數內部this的指向

語法：

函數名.bind()

對象名.函數名.bind(參數1，參數2，參數3...)

參數：

第一個參數是this要指向的對象

從第二個參數開始，依次給函數傳遞實參

特點： 函數不會立即調用，會返回一個改變this指向以后的函數，使用的時候需要調用

<script> 
    function fn(a, b) { 
        console.group('fn 函數內的 打印') 
        console.log('this : ', this) 
        console.log('a : ', a) 
        console.log('b : ', b) 
        console.groupEnd() 
     } 
     var obj = { 
         name: '我是 obj 對象' 
     } 
     var arr = [100, 200, 300, 400, 500] 
     // 用 bind 調用 
     // 注意: 因為是 bind, 不會把 fn 函數執行, 而是把 fn 
     // res 接受的就是 bind 方法復制出來的 fn 函數, 和 fn 
     var res = fn.bind(obj, 100, 200) 
     var res1 = fn.bind(arr, 1000, 2000) 
     res() 
     res1() 
     /* 
     fn 函數內的 打印 
     this : {name: '我是 obj 對象'} 
     a : 100 
     b : 200 
     fn 函數內的 打印 
     this : (5) [100, 200, 300, 400, 500] 
     a : 1000 
     b : 2000 
     */ 
</script>