Javascript 深入淺出This

Y3G 發(fā)布于2019-08-22 10:48 / 756人閱讀

摘要：中函數(shù)的調(diào)用有以下幾種方式作為對(duì)象方法調(diào)用，作為函數(shù)調(diào)用，作為構(gòu)造函數(shù)調(diào)用，和使用或調(diào)用。作為構(gòu)造函數(shù)調(diào)用中的構(gòu)造函數(shù)也很特殊，構(gòu)造函數(shù)，其實(shí)就是通過(guò)這個(gè)函數(shù)生成一個(gè)新對(duì)象，這時(shí)候的就會(huì)指向這個(gè)新對(duì)象如果不使用調(diào)用，則和普通函數(shù)一樣。

this 是 JavaScript 比較特殊的關(guān)鍵字，本文將深入淺出的分析其在不同情況下的含義，可以這樣說(shuō)，正確掌握了 JavaScript 中的 this 關(guān)鍵字，才算邁入了 JavaScript 這門語(yǔ)言的門檻。

Tips:個(gè)人博客：https://haonancx.github.io；排版更佳~

What ’s this？

要學(xué)一樣?xùn)|西，首先得了解它的含義，this 關(guān)鍵字的含義是明確且具體的，即指代當(dāng)前對(duì)象；細(xì)心的童鞋發(fā)現(xiàn)了當(dāng)前對(duì)象中"當(dāng)前" 這兩個(gè)字；說(shuō)明這個(gè) this 是在某種相對(duì)情況下才成立的。

由于其運(yùn)行期綁定的特性，JavaScript 中的 this 含義要豐富得多，它可以是全局對(duì)象、當(dāng)前對(duì)象或者任意對(duì)象，這完全取決于函數(shù)的調(diào)用方式。JavaScript 中函數(shù)的調(diào)用有以下幾種方式：作為對(duì)象方法調(diào)用，作為函數(shù)調(diào)用，作為構(gòu)造函數(shù)調(diào)用，和使用 apply 或 call 調(diào)用。下面我們將按照調(diào)用方式的不同，分別討論 this 的含義。

This 被分為三種情況：全局對(duì)象、當(dāng)前對(duì)象或者任意對(duì)象;判斷處于那種情況，這完全取決于函數(shù)的調(diào)用方式，JavaScript 中函數(shù)的調(diào)用有以下幾種方式：

作為函數(shù)調(diào)用

作為對(duì)象方法調(diào)用

作為構(gòu)造函數(shù)調(diào)用

使用 apply 或 call 調(diào)用

這他娘的太可怕了，我要問(wèn)的是 This 到底是什么鬼,你好家伙，給我羅列那么多，要暈了！！！

別急，咱一個(gè)蘿卜一個(gè)坑，帶你入坑以后，你就恍然大悟了。

作為函數(shù)調(diào)用

這是我們最常用的方法，這種調(diào)用方式屬于全局調(diào)用，所以呢，這里的 This 就理所應(yīng)當(dāng)?shù)某闪巳謱?duì)象。(全局對(duì)象？？難道它是一輛 "公交車"？)

廢話少說(shuō)，上個(gè)菜！！！

{% highlight ruby %}

　　function example(){

　　　　this.n = "hello world !";

　　　　console.log(this.n);
       console.log(this);

　　}

　　example(); // hello world !   Window

{% endhighlight %}

很顯然，調(diào)用 example(); 時(shí)，輸出了 "hello world !" 還有 Window;這時(shí)候說(shuō)它是全局對(duì)象好像不具備什么說(shuō)服力；咱換個(gè)姿勢(shì)。

{% highlight ruby %}

　　var n = "hello world !";

　　function example(){

　　　console.log(this.n);

　　}

   example(); // hello world !

{% endhighlight %}

你瞧，又是 " hello world ! ",不急，咱有一千種姿勢(shì)等你來(lái)解鎖；再換。

{% highlight ruby %}

　　var n = "hello world !";

　　function example(){

　　　　this.n = 0;

　　}

　example();

　console.log(n); // 0 !

{% endhighlight %}

果然是一輛 "公交車" !!!

作為對(duì)象方法調(diào)用

上述例子中，普通函數(shù)的調(diào)用把 This 作為window對(duì)象的方法進(jìn)行了調(diào)用。顯然 This 指向了 Window 對(duì)象；咱換個(gè)口味，看看下面的菜。

{% highlight ruby %}

var name="Akita";
var dogs={
    name:"Collie",
    showName:function(){
        console.log(this.name);
    }
}

dogs.showName();  //輸出  Collie

var otherName=dogs.showName;

otherName();    //輸出  Akita

{% endhighlight %}

快來(lái)看，當(dāng)執(zhí)行 dogs.showName(); 時(shí)，輸出 Collie (牧羊犬),說(shuō)明這個(gè)時(shí)候的 This 是指向 dogs 這個(gè)對(duì)象的；

而當(dāng)我們嘗試把 dogs.showName 賦給 otherName 時(shí)，我們回頭想想這個(gè) showName() 是做什么用的，很顯然，輸出它函數(shù)的執(zhí)行環(huán)境所指向?qū)ο蟮?name，而此時(shí) otherName 變量相當(dāng)于 Window 對(duì)象的一個(gè)屬性，因此 otherName() 執(zhí)行的時(shí)候相當(dāng)于 window.otherName(),即 window 對(duì)象調(diào)用 otherName 這個(gè)方法，所以 this 關(guān)鍵字指向 window;所以就會(huì)輸出 Akita（秋田犬）。

作為構(gòu)造函數(shù)調(diào)用

JavaScript 中的構(gòu)造函數(shù)也很特殊，構(gòu)造函數(shù)，其實(shí)就是通過(guò)這個(gè)函數(shù)生成一個(gè)新對(duì)象（object），這時(shí)候的 This 就會(huì)指向這個(gè)新對(duì)象；如果不使用 new 調(diào)用，則和普通函數(shù)一樣。

{% highlight ruby %}

　　function example(){

　　　　this.n = "hello world !";

　　}

　　var other = new example();

　　console.log(other.n); //hello world !

{% endhighlight %}

快來(lái)看，我們?yōu)?example 這個(gè)函數(shù) new(構(gòu)造)了一個(gè)新的對(duì)象 other,那么 this 就會(huì)指向 other 這個(gè)對(duì)象，所以就會(huì)輸出 "hello world !"。

使用 apply 或 call 調(diào)用

apply()是函數(shù)對(duì)象的一個(gè)方法，它應(yīng)用某一對(duì)象的一個(gè)方法，用另一個(gè)對(duì)象替換當(dāng)前對(duì)象。

{% highlight ruby %}

   var n = "hello world!";
　　function example(){
　　　　console.log(this.n);
　　}
　　var o={};
　　o.n = "hey~";
　　o.m = example;
　　o.m.apply();//hello world!

{% endhighlight %}

來(lái)看看這行代碼，當(dāng)apply()的參數(shù)為空時(shí)，就是沒(méi)有對(duì)象去替換掉當(dāng)前的對(duì)象，所以默認(rèn)調(diào)用全局對(duì)象。因此，這時(shí)會(huì)輸出"hello world!"，證明this指的是全局對(duì)象。

那么試試給apply（）指定一個(gè)對(duì)象。

{% highlight ruby %}

   var n = "hello world!";
　　function example(){
　　　　console.log(this.n);
　　}
　　var o={};
　　o.n = "hey~";
　　o.m = example;
　　o.m.apply(o);//hey~

{% endhighlight %}

此時(shí)輸出了"hey~",說(shuō)明對(duì)象替換成功，this 指向了 o 這個(gè)對(duì)象。

本文介紹了 JavaScript 中的 this 關(guān)鍵字在各種情況下的含義，雖然這只是 JavaScript 中一個(gè)很小的概念，但借此我們可以深入了解 JavaScript 中函數(shù)的執(zhí)行環(huán)境，才能充分發(fā)揮 JavaScript 的特點(diǎn)，才會(huì)發(fā)現(xiàn) JavaScript 語(yǔ)言特性的強(qiáng)大。 該文章部分知識(shí)網(wǎng)絡(luò)整理