在前端javascript中兵怯，最難理解的就是this的指向問(wèn)題，這也是面試中最常見(jiàn)的問(wèn)題腔剂。那就看下this存在哪些場(chǎng)景中媒区。
先來(lái)看下幾個(gè)場(chǎng)景
存在對(duì)象之中
var name = 'window_leon'
var obj = {
name:'leon',
fn:function(){
console.log(this.name);
}
};
obj.fn();
這時(shí)候斷點(diǎn)this的時(shí)候，this顯示的是對(duì)象obj掸犬⊥噤觯可以獲取到對(duì)象的name和fn，所以最后控制臺(tái)輸出的是leon湾碎。再來(lái)看下在普通函數(shù)之中的this宙攻。
var age = '33333';
var getAge = function(){
console.log(this.age);
}
getAge();
執(zhí)行普通函數(shù)時(shí)，打印出33333介褥。此時(shí)的this指向的對(duì)象是window全局座掘。再來(lái)看下在構(gòu)造函數(shù)的時(shí)候。
function People(city){
this.city = city;
};
var p = new People('suzhou');
console.log(p.city);
調(diào)試發(fā)現(xiàn)在構(gòu)造函數(shù)中的this指向的是當(dāng)前構(gòu)造函數(shù),city屬性又掛載在People的原型鏈上柔滔，所以p.city相當(dāng)于People.city溢陪。
從上面3個(gè)簡(jiǎn)單的栗子中可以總結(jié)出一個(gè)規(guī)律，在javascript中的this睛廊，始終指向那個(gè)最后調(diào)用的那個(gè)對(duì)象形真。對(duì)象中的obj.fn()指向了obj;普通函數(shù)中的getAge()相當(dāng)于window.getAge()，所以最后的this指向了window超全；
知道了this的指向咆霜，下面就是如何改變this的指向邓馒。在js中改變this的指向主要使用的就是call,apply和bind三種方法
使用區(qū)別
傳遞參數(shù)時(shí)，apply是使用數(shù)組的形式來(lái)傳遞裕便。調(diào)用觸發(fā)時(shí)绒净，bind需要手動(dòng)觸發(fā)函數(shù)见咒。
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
三者的第一個(gè)參數(shù)都是傳遞你需要指向的對(duì)象偿衰，后面是傳遞的參數(shù)。在使用bind的時(shí)候需要注意下兼容性主流都支持改览，IE11才開(kāi)始支持這個(gè)方法下翎。
其他改變指向方法
var other = {
test:'1234',
fn:function(){
// var self = this;
setTimeout(function(){
// console.log(self.test);
console.log(this.test);
},100)
}
}
other.fn();
在settimeout中，由于是window調(diào)用setTimeOut宝当，所以this指向了window,輸出的結(jié)果undefined视事。如果執(zhí)行var self = this時(shí)，this的指向?yàn)閛ther對(duì)象庆揩，通過(guò)self變量保存起來(lái)俐东。此時(shí)在setTimeOut中使用self.test時(shí)，從other對(duì)象中找到test订晌。ES6中的箭頭函數(shù)中虏辫，this的使用則完全顛覆上面所說(shuō)的this始終指向最后調(diào)用它的對(duì)象。在箭頭函數(shù)中锈拨，this綁定按照所在函數(shù)在哪個(gè)對(duì)象下面砌庄，多層嵌套下，this指向最外層奕枢。
如果有寫的不對(duì)的娄昆，理解錯(cuò)的請(qǐng)指出，謝謝
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
