首页 > 资讯 > 宏观 > 正文

JavaScript全解析——this指向-焦点热闻

2023-05-11 17:20:39来源：博客园

本系列内容为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指向的是事件源

                      Document          hello world
    <script>        var res = document.querySelector("div")               res.onclick = function() {            console.log(this); //
       }    </script>

自执行函数中调用

●自执行函数中的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指向的一些基础知识点，更多技术干货、知识技巧可以关注我们！有不清楚的问题也可以在评论区交流讨论，也可以私信小千~

标签：