在javascript當中每個function都是一個對象,this是javascript語言的一個關鍵字。它表明函數運行時,自動生成的一個內部對象,只能在函數內部使用
this出現的場景分爲四類
一、有對象就指向調用對象
二、沒調用對象就指向全局對象:window是js中的全局對象
三、用new構造就指向新對象
四、經過apply或者call或bind來改變this的指向
一、函數有全部對象時:指向所屬對象
舉個栗子
var a={value:20};
a.show=function(){
console.log(this.value)
console.log(this)
}
show()這個函數所屬對象是a,並由a調用.所以this指向對象是a
函數沒有所屬對象:指向全局對象
window.name='阿姨請您別把你閨女介紹給我';
function foo(){
console.log(this.name)
}
foo()
構造器中的this:指向新對象
var a=function(){
this.value=100;
}
var p1=new a();
console.log(p1.value);//100
這裏面的this指向新對象
apply和call調用以及bind綁定:指向綁定對象
apply()方法接受兩個參數第一個是函數運行的做用於,另外一個是一個參數數組(arguments)
call()方法第一個參數的意思與apply方法相同,只是其餘的參數須要一個個列舉出來
簡單來講:call的方式更接近咱們平時調用函數,而apply須要咱們傳遞Array形式的數組給它。
var a={value:100};
var show=function(){
console.log(this)
}
foo();//全局變了 global
foo.apply(a);//{value:100}
foo.call(a);//{value:100}
var aA=foo.bind(a);
aA();//{value}
關於this的指向
this的指向在函數定義的時候是肯定不了的,只有函數執行的時候才能肯定this到底指向誰,實際上this的最終指向是那個調用它的對象
栗子一:
function a(){
var user='阿姨請不要把您閨女介紹給我';
console.log(this.user);//undefined
console.log(this);//window
}
按照咱們上面說的this最終指向的是調用它的對象,這裏的函數a實際是被window對象所點出來的,下面代碼能夠證實
function a(){
var user='阿姨請不要把您閨女介紹給我';
console.log(this.user);//undefined
console.log(this);//window
}
window.a();
栗子二:
var a={
user:'阿姨請不要把您閨女介紹給我',
fn:function(){
console.log(this.user)
}
}
a.fn()
這裏面的this指的是a,由於你調用這個fn是經過a.fn()執行的,那天然指向就是對象a,this的指向在函數建立的時候是覺定不了的,在調用的時候才能決定
栗子三:推翻上面的理論
var a={
user:'阿姨請您不要把您閨女介紹給我'
foo:function(){
console.log(this.user)
}
}
window.a.foo();//輸出來是a這個對象裏面的user。
爲何不是window呢?按照道理來講this會指向調用它的對象,window是js中的全局對象,而咱們建立變量實際上是給window添加屬性,因此咱們能夠用window.a
咱們在來看一個栗子
var a={
b:10,
foo:{
b:20,
show:function(){
console.log(this)
}
}
}
a.foo.show()
這裏面輸出的是foo這個對象,爲何會是foo?而不是a!那麼下面咱們來講一下this的幾種狀況
一、若是一個函數中有this,可是它沒有被上一級的對象所調用,那麼this指向的就是window,這裏須要說明的是在js的嚴格版中this指向的不是window,可是咱們不討論嚴格模式
二、若是一個函數中有this,這個函數有被上一級對象調用,那麼this指向的就是上一級的對象
三、若是一個函數中有this,這個函數中包含多個對象,儘管這個函數是被最外層的對象所調用,this指向的也只是它上一級的對象。上面的例子能夠證實
栗子四:繼續探討第三種狀況
var a={
b:10,
foo:{
show:function(){
console.log(this.b)
}
}
}
a.foo.show()//undefined
儘管對象foo中沒有a這個屬性,這個this指向的也是對象foo,所以this只會指向它的上一級對象,無論這個對象中有沒有this要的東西
栗子五:特殊狀況
var a={
b:10,
foo:{
b:20,
show:function(){
console.log(this.b);
console.log(this)
}
}
}
var j=a.foo.show;
j()
//第一次輸出是undefined
//第二次輸出的是window
這裏的this指向是window,爲何會這樣?咱們要清楚一句話this永遠指向的是最後調用它的對象,也就是看它執行的時候是誰調用的,上面的案例中show被foo引用,可是在將show賦值給變了j的時候並無執行,因此最終指向是window