[轉(zhuǎn)帖]JavaScript全解析——this指向

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

freeflydom

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

this指向（掌握）

this 是一個(gè)關(guān)鍵字，是一個(gè)使用在作用域內(nèi)的關(guān)鍵字

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

全局作用域

全局作用域中this指向window

局部作用域

函數(shù)內(nèi)的 this, 和函數(shù)如何定義沒(méi)有關(guān)系, 和函數(shù)在哪定義也沒(méi)有關(guān)系，只看函數(shù)是如何被調(diào)用的(箭頭函數(shù)除外)

可分為以下場(chǎng)景：

普通函數(shù)中調(diào)用

普通函數(shù)中的this和全局調(diào)用一樣，this指向window

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


對(duì)象（包含數(shù)組）中調(diào)用

該函數(shù)內(nèi)的 this 指向 點(diǎn) 前面的內(nèi)容，也就是那個(gè)對(duì)象或者數(shù)組

語(yǔ)法：

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

定時(shí)器處理函數(shù)中調(diào)用

定時(shí)器中的this同樣也是指向window

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

事件處理程序中調(diào)用

事件處理程序中的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>

自執(zhí)行函數(shù)中調(diào)用

●自執(zhí)行函數(shù)中的this也指向window

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

強(qiáng)行改變this指向

通過(guò)上面的學(xué)習(xí)大家知道，this在不同的情況指向是不同的，但是有時(shí)候需要指向一個(gè)制定的對(duì)象，這就需要改變this的指向

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

強(qiáng)行改變this指向的方式可以通過(guò)call、apply和bind來(lái)改變

call調(diào)用

作用：改變函數(shù)內(nèi)部this的指向

語(yǔ)法：

函數(shù)名.call()

對(duì)象名.函數(shù)名.call(參數(shù)1，參數(shù)2，參數(shù)3...)

參數(shù)：

○第一個(gè)參數(shù)是this要指向的對(duì)象

○從第二個(gè)參數(shù)開始，依次給函數(shù)傳遞實(shí)參

特點(diǎn)： 會(huì)立即調(diào)用函數(shù)或者說(shuō)立即執(zhí)行

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


apply調(diào)用

作用： 改變函數(shù)內(nèi)部this的指向

語(yǔ)法：

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

參數(shù)：

○第一個(gè)參數(shù)是this要指向的對(duì)象

○第二參數(shù)的一個(gè)數(shù)組，要傳遞的實(shí)參要放到數(shù)組里面，就是有一個(gè)實(shí)參也要放到數(shù)組里面

特點(diǎn)： 會(huì)立即調(diào)用函數(shù)或者說(shuō)立即執(zhí)行

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

bind調(diào)用

作用： 改變函數(shù)內(nèi)部this的指向

語(yǔ)法：

函數(shù)名.bind()

對(duì)象名.函數(shù)名.bind(參數(shù)1，參數(shù)2，參數(shù)3...)

參數(shù)：

第一個(gè)參數(shù)是this要指向的對(duì)象

從第二個(gè)參數(shù)開始，依次給函數(shù)傳遞實(shí)參

特點(diǎn)： 函數(shù)不會(huì)立即調(diào)用，會(huì)返回一個(gè)改變this指向以后的函數(shù)，使用的時(shí)候需要調(diào)用

<script> 
    function fn(a, b) { 
        console.group('fn 函數(shù)內(nèi)的 打印') 
        console.log('this : ', this) 
        console.log('a : ', a) 
        console.log('b : ', b) 
        console.groupEnd() 
     } 
     var obj = { 
         name: '我是 obj 對(duì)象' 
     } 
     var arr = [100, 200, 300, 400, 500] 
     // 用 bind 調(diào)用 
     // 注意: 因?yàn)槭?bind, 不會(huì)把 fn 函數(shù)執(zhí)行, 而是把 fn 
     // res 接受的就是 bind 方法復(fù)制出來(lái)的 fn 函數(shù), 和 fn 
     var res = fn.bind(obj, 100, 200) 
     var res1 = fn.bind(arr, 1000, 2000) 
     res() 
     res1() 
     /* 
     fn 函數(shù)內(nèi)的 打印 
     this : {name: '我是 obj 對(duì)象'} 
     a : 100 
     b : 200 
     fn 函數(shù)內(nèi)的 打印 
     this : (5) [100, 200, 300, 400, 500] 
     a : 1000 
     b : 2000 
     */ 
</script>