面试题
请你讲一讲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指向倒是不经意间要使用的！
