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

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

this指向(掌握)

this 是一个关键字,是一个使用在作用域内的关键字

作用域分为全局作用域和局部作用域(私有作用域或者函数作用域)

全局作用域

全局作用域中this指向window

局部作用域

函数内的 this, 和 函数如何定义没有关系, 和 函数在哪定义也没有关系,只看函数是如何被调用的(箭头函数除外)

可分为以下场景:

普通函数中调用

普通函数中的this和全局调用一样,this指向window

语法:函数名()

    // 全局使用 this     console.log(this) //window     console.log(window) //window     console.log(window === this) //true     //普通函数调用     function fn() {         console.log('我是全局 fn 函数')         console.log(this) //window     }     fn() 

对象(包含数组)中调用

该函数内的 this 指向 前面的内容,也就是那个对象或者数组

语法:

对象名.函数名()*

对象名

     //对象函数调用     function fn() {         console.log(this) //{fun: ƒ}     }     var obj = {         fun: fn     }     obj.fun()     obj['fun']() 

定时器处理函数中调用

定时器中的this同样也是指向window

     // 定时器处理函数     setTimeout(function() {         console.log(this); //window     }, 1000) 

事件处理程序中调用

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

                      Document            div {            width: 200px;            height: 200px;            background-color: red;         }           
hello world var res = document.querySelector('div') res.onclick = function() { console.log(this); //
}

自执行函数中调用

●自执行函数中的this也指向window

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

强行改变this指向

通过上面的学习大家知道,this在不同的情况指向是不同的,但是有时候需要指向一个制定的对象,这就需要改变this的指向

可以理解成不管之前指向哪里,现在我让你指向哪里你就要指向哪里

强行改变this指向的方式可以通过call、apply和bind来改变

call调用

作用:改变函数内部this的指向

语法:

函数名.call()

对象名.函数名.call(参数1,参数2,参数3…)

参数:

○第一个参数是this要指向的对象

○从第二个参数开始,依次给函数传递实参

特点: 会立即调用函数或者说立即执行

     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     */ 

apply调用

作用: 改变函数内部this的指向

语法:

○函数名.apply()
○对象名.函数名.apply(参数1,[参数2,参数3…])

参数:

○第一个参数是this要指向的对象

○第二参数的一个数组,要传递的实参要放到数组里面,就是有一个实参也要放到数组里面

特点: 会立即调用函数或者说立即执行

     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       */ 

bind调用

作用: 改变函数内部this的指向

语法:

函数名.bind()

对象名.函数名.bind(参数1,参数2,参数3...)

参数:

第一个参数是this要指向的对象

从第二个参数开始,依次给函数传递实参

特点: 函数不会立即调用,会返回一个改变this指向以后的函数,使用的时候需要调用

     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      */ 

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