CSDN话题挑战赛第2期

参赛话题：面试宝典

✅ 作者简介：一名迈入大三的大学生    
    
    
，致力于提高前端开发能力

✨ 个人主页：前端小白在前进的主页

🔥 系列专栏 ： 2022面经

⭐️ 个人社区 : 个人交流社区

🍀 学习格言: ☀️ 打不倒你的会使你更强！☀️

🔥前言

要不是话题挑战赛第二期的凭空出现


     


     


   ，可能我想不起来这个前端面经的栏目了(请原谅我！！！),这一期的话就来一篇在面试过程中一定会遇到的问题js中如何改变this指向
 




 




 

，并且怎么去手写改变this指向的三种方法,话不多说   

   

   

，这些问题都将在本篇文章中解决！

面试题

面试题：

请你讲一讲this指向如何改变？有哪几种方式？

问题剖析：

这种题其实就是考察你对js中的this指向有没有一个深刻的理解和认识 

     

     

  ，改变this指向问题是面试必问的

  




  




  
，切入点就是改变this指向的三种方法！

问题解答：

复习(什么是this指向)

首先我们需要去回顾一个问题：什么是this指向呢？

我们必须要知道this是一个关键字  


  


  


，然后this的出现会有普通函数和箭头函数之分：

普通函数： 谁调用  
     
     
 ，this就指向谁


   




   




   ，如果没有调用者 



 



 



，this默认指向window 箭头函数(es6)：箭头函数的this是父级作用域的(精解：箭头函数外如果还有一个函数包裹             ，那么这个this指向的就是外包裹函数    
    
   。如果箭头函数外没有外包裹函数



    




    




    ，那么this就指向window)

场景一：

console.log(this); //window

我们直接在控制台打印this













，会发现打印出来的是window对象              ，默认情况下



     



     



    ，this指向window对象     


     


     

。

场景二：

setTimeout(function(){ console.log(111,this); // 111 window },2000)

我们使用定时器












，规定2秒后再去执行回调函数打印    
    
    
，最终打印结果为111 window,在这里要注意一下


     


     


   ，根据浏览器的调用机制
 




 




 

，定时器和计时器中回调函数打印this都会是window




 




 




。

场景三：

<div id="box">click</div> <script> box.onclick = function() { console.log(this); //<div id="box">click</div> } </script>

在事件中绑定this   

   

   

，我们点击click后可以发现 

     

     

  ，打印出来了dom元素

  




  




  
，说明我们点击的是这个dom元素

场景四： let obj = { name : lebron james, play : function(){ console.log(this.name); } } obj.play() //lebron james

对象中this指向了调用者  


  


  


，该场景中调用者是obj,那么这个this指向的就是this的name,故打印出来了lebron james

场景五： let obj1 = { name : davis, plays : ()=>{ console.log(this); } } obj1.plays() // window

在字面量中直接定义的箭头函数无法继承该对象的this  
     
     
 ，而是往外再找一层


   




   




   ，就找到了window 



 



 



，因为字面量对象无法形成自己的一层作用域.

改变this指向的三个方法

1. call()方法

let obj1 = { name : james, getName1 : function(a,b,c) { console.log(`getName ${this.name}`); // getName davis console.log(`参数:${a},${b},${c}`); // 参数:1,2,3 } } let obj2 = { name : davis, getName2 : function() { console.log(`getName ${this.name}`); } } obj1.getName1.call(obj2) obj1.getName1.call(obj2,1,2,3) call 执行函数             ，并改变this指向为函数的第一个参数(在这里this指向改变为了传入的第一个参数obj2



    




    




    ，this已经指向了obj2) call 可以传入多个参数

2. apply()方法

let obj1 = { name : james, getName1 : function(a,b,c) { console.log(`getName ${this.name}`); // getName davis console.log(`参数:${a},${b},${c}`); // 参数:1,2,3 } } let obj2 = { name : davis, getName2 : function() { console.log(`getName ${this.name}`); } } obj1.getName1.apply(obj2,[1,2,3]) apply 执行函数













，并改变this指向为函数的第一个参数(同call) apply 只能传入两个参数              ，第二个参数只能是数组的形式

3. bind()方法

let obj1 = { name : james, getName1 : function(a,b,c) { console.log(`getName ${this.name}`); // getName davis console.log(`参数:${a},${b},${c}`); // 参数:1,2,3 } } let obj2 = { name : davis, getName2 : function() { console.log(`getName ${this.name}`); } } let fn = obj1.getName1.bind(obj2,1,2,3) fn() bind 改变this指向为第一个参数



     



     



    ，但是不会自动执行函数,返回一个新的函数












，需要手动执行才行 bind 可以传入多个参数

个人经验总结

我们通过改变this指向的三种方式可以发现    
    
    
，call和apply是相似的


     


     


   ，但是apply只能传入两个参数
 




 




 

，第二个参数必须是数组形式
   

   

  。

bind是特殊的   

   

   

，它的特殊在于会返回一个新的函数 

     

     

  ，不会自动执行

  




  




  
，需要我们自己手动执行

在我们项目开发中其实很少用到改变this指向  


  


  


，但是在面向对象过程中改变this指向倒是不经意间要使用的！