關于this指向的問題厘擂,想必困擾了很多初學JavaScript的同學,一會指向這個一會指向那個锰瘸,讓初學者一臉懵逼刽严。今天我們就來聊聊js面向對象里this的指向問題,讓初學者看完對this有個大概的了解避凝,不再對其有恐懼的感覺舞萄。
1.構造函數
第一種情況我們聊聊在構造函數里this的指向問題眨补。看下面的代碼:
function Person(){
this.name='老王';
this.age='99';
console.log(this)//Person {'name':'老王','age':'99'}
}
var p1=new Person();
console.log(p1.name)//'老王'
從上面的代碼中我們看到this打印出來是一個對象'name':'老王','age':'99'}倒脓,而這個對象的兩個屬性竟然和構造函數Person中的兩個屬性一樣撑螺,這是巧合嗎?答案當然不是了把还,哪有那么多巧合实蓬。在構造函數中this的指向就是構造函數本身,當然,我們使用這個函數的時候也是把他當做構造函數來使用的吊履,所以打印出來那么對象也沒那么奇怪了安皱。
那么p1.name為什么打印出來是‘老王’,因為p1是構造函數的Person的實例化出來的艇炎,所以p1繼承了Person的屬性酌伊,你要問我為什么,那么請看我關于原型和原型鏈的詳細理解這篇文章缀踪,你就會明白,本文就不過多的闡述了居砖。
2.函數作為對象的一個屬性
函數作為對象的一個屬性,并且作為對象的一個屬性被調用時驴娃,這種情況下this的指向和上面作為構造函數的this指向不一樣了奏候。看下面代碼:
var obj={
'name':'老王',
'age':'99',
'box':function(){
console.log(this);//obj{'name':'老王','age':'99','box':function}
}
}
obj.box();
以上代碼中唇敞,box不僅作為一個對象的一個屬性蔗草,而且的確是作為對象的一個屬性被調用。結果this就是obj對象疆柔。
那么會不會有這種情況咒精,這個函數不是作為對象的一個屬性被調用?有旷档,這種情況可以有模叙。但是此時this的指向又發(fā)生了變化。還是看代碼:
var obj={
'name':'老王',
'age':'99',
'box':function(){
console.log(this);
}
}
var fn=obj.box
fn();
這種情況下大家猜一下this打印出來的是什么鞋屈?
答案是Window范咨,為什么?來谐区,跟著我的思路走湖蜕。
在上面的代碼中我定義了一個全局變量fn,并且賦值為obj.box宋列,那么此時obj.box就已經發(fā)生變化了昭抒,fn是全局變量,屬于window,那么此時this指向window灭返。
3.函數用call或者apply調用
當一個函數被call和apply調用時盗迟,this的值就取傳入的對象的值。至于call和apply如何使用熙含,不會的同學可以去查查其他資料罚缕,這里就不做詳細講解了,因為比較簡單怎静。
4.全局 & 調用普通函數
在全局下邮弹,this永遠指向的都是window,這個誰還有異議可以面壁思過去了蚓聘。
普通函數在調用時腌乡,其中的this也都是window∫鼓担看代碼:
var a='厲害了我的哥';
var box=function(){
console.log(this.a);//厲害了我的哥'
}
box();
普通函調用時為什么this會指向window呢与纽?還是作為全局變量的問題。
5.特殊情況
為什么還有特殊情況呢塘装,請大家注意一個點急迂,this的指向在定時器setTimeout和setInterval會發(fā)生變化。但是變化是什么呢蹦肴?各位同學去百度僚碎,上班時間寫文章怕被抓。