2022前端面经---改变this指向问题(call、apply、bind)

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)

1. call 执行函数，并改变this指向为函数的第一个参数(在这里this指向改变为了传入的第一个参数obj2，this已经指向了obj2)
2. 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])

1. apply 执行函数，并改变this指向为函数的第一个参数(同call)
2. 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()

1. bind 改变this指向为第一个参数，但是不会自动执行函数,返回一个新的函数，需要手动执行才行
2. bind 可以传入多个参数

个人经验总结

我们通过改变this指向的三种方式可以发现，call和apply是相似的，但是apply只能传入两个参数，第二个参数必须是数组形式。
bind是特殊的，它的特殊在于会返回一个新的函数，

不会自动执行，需要我们自己手动执行

在我们项目开发中其实很少用到改变this指向，但是在面向对象过程中改变this指向倒是不经意间要使用的！