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

2401_84159688

于 2024-05-05 02:46:14 发布

阅读量314

点赞数 3

分类专栏：程序员文章标签：前端

本文链接：https://blog.csdn.net/2401_84159688/article/details/138456173

版权

程序员专栏收录该内容

189 篇文章 0 订阅

订阅专栏

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

普通函数： 谁调用，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()


![img](https://img-blog.csdnimg.cn/img_convert/62b6e47d127b072c64142a7fe749d36e.png)
![img](https://img-blog.csdnimg.cn/img_convert/6528f33e4318b3afb55940fc7e694786.png)
![img](https://img-blog.csdnimg.cn/img_convert/f3e43d0b493b2b5e635fbcff30aa2359.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**