this的安身之處

在JavaScript的大千世界中,this對象就像一個行蹤不定、居無定所的浪子通常,它的生活彷彿能夠隨處而安,而心裏卻又似有着篤定的堅守,它就是這麼有趣!javascript

初學JavaScript時的咱們,多多少少都拜訪過this,卻又老是找不許時機,屢屢與其擦肩而過。其實this一直就在那裏,不離不棄。java

咱們要記住一句話:this永遠指向函數運行時所在的對象!而不是函數被建立時所在的對象。切記…閉包

本文將分三種狀況來分析this對象到底身處何方。app

普通函數中的this

不管this身處何處,第一要務就是要找到函數運行時的位置。函數

var name="全局";
function getName(){
    var name="局部";
    return this.name;
};
alert(getName());

當this出如今全局環境的函數getName中時,此時函數getName運行時的位置在this

alert(getName());對象

顯然,函數getName所在的對象是全局對象,即window,所以this的安身之處定然在window。此時的this指向window對象,則getName返回的this.name實際上是window.name,所以alert出來的是「全局」!blog

那麼,當this不是出如今全局環境的函數中,而是出如今局部環境的函數中時,又會身陷何方呢?ip

var name="全局";
var twobin={
    name:"局部",
    getName:function(){
        return this.name;
    }
};
alert(twobin.getName());

其中this身處的函數getName不是在全局環境中,而是處在twobin環境中。不管this身處何處,必定要找到函數運行時的位置。此時函數getName運行時的位置get

alert(twobin.getName());

顯然,函數getName所在的對象是twobin,所以this的安身之處定然在twobin,即指向twobin對象,則getName返回的this.name實際上是twobin.name,所以alert出來的是「局部」!

閉包中的this

閉包也是個不安分子,本文暫且不對其過於贅述,簡而言之:所謂閉包就是在一個函數內部建立另外一個函數,且內部函數訪問了外部的變量。

浪子this與痞子閉包混在一塊兒,可見將永無寧日啊!

var name="全局";
var twobin={
    name:"局部",
    getName:function(){
        return function(){
            return this.name;
        };
    }
};
alert(twobin.getName()());

此時的this明顯身處困境,居然處在getName函數中的匿名函數裏面,而該匿名函數又調用了變量name,所以構成了閉包,即this身處閉包中。

不管this身處何處,必定要找到函數運行時的位置。此時不能根據函數getName運行時的位置來判斷,而是根據匿名函數的運行時位置來判斷。

function (){

    return this.name;

};

顯然,匿名函數所在的對象是window,所以this的安身之處定然在window,則匿名函數返回的this.name實際上是window.name,所以alert出來的就是「全局」!

那麼,如何在閉包中使得this身處在twobin中呢?

var name="全局";
var twobin={
    name:"局部",
    getName:function(){
        var that=this;
        return function(){
            return that.name;
        };
    }
};
alert(twobin.getName()());

在getName函數中定義that=this,此時getName函數運行時位置在

alert(twobin.getName());

則this指向twobin對象,所以that也指向twobin對象。在閉包的匿名函數中返回that.name,則此時返回的that.name實際上是twobin.name,所以就能夠alert出來 「局部」!

call與apply中的this

在JavaScript中能管的住this的估計也就非call與apply莫屬了。

call與apply就像this的父母通常,讓this住哪它就得住哪,不得不聽話!

var name="全局";
var twobin={
    name:"局部",
};
function getName(){
    alert(this.name);
}
getName(twobin);
getName.call(twobin);

其中this身處函數getName中。不管this身處何處,必定要找到函數運行時的位置。此時函數getName運行時的位置

getName(twobin);

顯然,函數getName所在的對象是window,所以this的安身之處定然在window,即指向window對象,則getName返回的this.name實際上是window.name,所以alert出來的是「全局」!

那麼,該call與apply登場了,由於this必須聽他們的指揮!

getName.call(twobin);

其中,call指定this的安身之處就是在twobin對象,由於this被迫只能在twobin那安家,則此時this指向twobin對象, this.name實際上是twobin.name,所以alert出來的是「局部」!

一點總結

浪子this:永遠指向函數運行時所在的對象,而不是函數被建立時所在的對象;若是處在匿名函數中或不處於任何對象中,則this指向window對象;若是是call或apply,它指定哪一個對象,則this就指向哪一個對象!

相關文章
相關標籤/搜索