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

CSDN话题挑战赛第2期
参赛话题:面试宝典

✅ 作者简介:一名迈入大三的大学生,致力于提高前端开发能力
✨ 个人主页:前端小白在前进的主页
系列专栏 : 2022面经
⭐️ 个人社区 : 个人交流社区
学习格言: ☀️ 打不倒你的会使你更强!☀️

前言

要不是话题挑战赛第二期的凭空出现,可能我想不起来这个前端面经的栏目了(请原谅我!!!),这一期的话就来一篇在面试过程中一定会遇到的问题js中如何改变this指向,并且怎么去手写改变this指向的三种方法,话不多说,这些问题都将在本篇文章中解决!

目录

  • 面试题
  • 复习(什么是this指向)
  • 改变this指向的三个方法
    • 1. call()方法
    • 2. apply()方法
    • 3. bind()方法
  • 个人经验总结

面试题

面试题:

请你讲一讲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); //
click
} </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指向倒是不经意间要使用的!

你可能感兴趣的:(2022面经,前端)