本系列内容为JS全解析，为千锋教育资深前端老师独家创作

致力于为大家讲解清晰JavaScript相关知识点，含有丰富的代码案例及讲解。如果感觉对大家有帮助的话，可以【点个关注】持续追更~

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 lang="en"> 

<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); //<div></div>
       } 
   </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>

以上即为JS中this指向的一些基础知识点，更多技术干货、知识技巧可以关注我们！有不清楚的问题也可以在评论区交流讨论，也可以私信小千~

原文链接：https://www.cnblogs.com/qian-fen/p/17391354.html

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript全解析——this指向 - Python技术站

JavaScript全解析——this指向