在前端javascript中，最難理解的就是this的指向問題，這也是面試中最常見的問題。那就看下this存在哪些場景中。
先來看下幾個場景
存在對象之中
var name = 'window_leon'
var obj = {
name:'leon',
fn:function(){
console.log(this.name);
}
};
obj.fn();
這時候斷點this的時候，this顯示的是對象obj?？梢垣@取到對象的name和fn，所以最后控制臺輸出的是leon。再來看下在普通函數之中的this。
var age = '33333';
var getAge = function(){
console.log(this.age);
}
getAge();
執行普通函數時，打印出33333。此時的this指向的對象是window全局。再來看下在構造函數的時候。
function People(city){
this.city = city;
};
var p = new People('suzhou');
console.log(p.city);
調試發現在構造函數中的this指向的是當前構造函數,city屬性又掛載在People的原型鏈上，所以p.city相當于People.city。
從上面3個簡單的栗子中可以總結出一個規律，在javascript中的this，始終指向那個最后調用的那個對象。對象中的obj.fn()指向了obj;普通函數中的getAge()相當于window.getAge()，所以最后的this指向了window；
知道了this的指向，下面就是如何改變this的指向。在js中改變this的指向主要使用的就是call,apply和bind三種方法
使用區別
傳遞參數時，apply是使用數組的形式來傳遞。調用觸發時，bind需要手動觸發函數。
var obj1 = {
name:'leon1',
age:23
};
var obj2 = {
name:'leon2',
age:33
};
var demo = {
name:'demo',
fn:function(){
console.log(this.name);
}
};
var test = {
fn:function(a,b){
console.log(this.name+"++++++"+a+"==========="+b);
}
};
test.fn.call(obj1,1,2);
test.fn.apply(obj2,[2,3]);
test.fn.bind(obj1,4,5)();
demo.fn();//demo
demo.fn.call(obj1);//leon1
demo.fn.apply(obj2);//leon2
demo.fn.bind(obj1)();//leon1
三者的第一個參數都是傳遞你需要指向的對象，后面是傳遞的參數。在使用bind的時候需要注意下兼容性主流都支持，IE11才開始支持這個方法。
其他改變指向方法
var other = {
test:'1234',
fn:function(){
// var self = this;
setTimeout(function(){
// console.log(self.test);
console.log(this.test);
},100)
}
}
other.fn();
在settimeout中，由于是window調用setTimeOut，所以this指向了window,輸出的結果undefined。如果執行var self = this時，this的指向為other對象，通過self變量保存起來。此時在setTimeOut中使用self.test時，從other對象中找到test。ES6中的箭頭函數中，this的使用則完全顛覆上面所說的this始終指向最后調用它的對象。在箭頭函數中，this綁定按照所在函數在哪個對象下面，多層嵌套下，this指向最外層。
如果有寫的不對的，理解錯的請指出，謝謝
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
