CSDN话题挑战赛第2期
参赛话题：面试宝典
🔥前言
面试题
面试题：
问题剖析：
问题解答：
复习(什么是this指向)
首先我们需要去回顾一个问题：什么是this指向呢？
我们必须要知道this是一个关键字，然后this的出现会有普通函数和箭头函数之分：
场景一：
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)
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])
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()