位置: IT常识 - 正文
2022前端面经---改变this指向问题(call、apply、bind)(2021年前端面试)
编辑：rootadmin推荐整理分享2022前端面经---改变this指向问题(call、apply、bind)(2021年前端面试)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:2021年前端面试,2019前端面试,2021前端面试最新笔试题,2021前端,2021前端面试最新笔试题,2021年前端面试,2021前端面试最新笔试题,2021年前端面试,内容如对您有帮助，希望把文章链接给更多的朋友！
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); //<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指向倒是不经意间要使用的！
上一篇：训练自己的GPT2-Chinese模型(训练自己的GPT)
