成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Javascript 深入淺出This

Y3G / 759人閱讀

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

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

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

What ’s this？

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

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

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

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

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

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

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

這他娘的太可怕了，我要問的是 This 到底是什么鬼,你好家伙，給我羅列那么多，要暈了！?。?/h5>

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

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

廢話少說，上個菜?。。?/p>

{% highlight ruby %}

　　function example(){

　　　　this.n = "hello world !";

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

　　}

　　example(); // hello world !   Window

{% endhighlight %}

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

{% highlight ruby %}

　　var n = "hello world !";

　　function example(){

　　　console.log(this.n);

　　}

   example(); // hello world !

{% endhighlight %}

你瞧，又是 " hello world ! ",不急，咱有一千種姿勢等你來解鎖；再換。

{% highlight ruby %}

　　var n = "hello world !";

　　function example(){

　　　　this.n = 0;

　　}

　example();

　console.log(n); // 0 !

{% endhighlight %}

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

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

{% 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 %}

快來看，當(dāng)執(zhí)行 dogs.showName(); 時，輸出 Collie (牧羊犬),說明這個時候的 This 是指向 dogs 這個對象的；

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

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

{% highlight ruby %}

　　function example(){

　　　　this.n = "hello world !";

　　}

　　var other = new example();

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

{% endhighlight %}

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

使用 apply 或 call 調(diào)用
apply()是函數(shù)對象的一個方法，它應(yīng)用某一對象的一個方法，用另一個對象替換當(dāng)前對象。

{% 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 %}

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

那么試試給apply（）指定一個對象。

{% 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 %}

此時輸出了"hey~",說明對象替換成功，this 指向了 o 這個對象。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91288.html

相關(guān)文章

  • JavaScript深入淺出

    摘要：理解的函數(shù)基礎(chǔ)要搞好深入淺出原型使用原型模型，雖然這經(jīng)常被當(dāng)作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統(tǒng)的類繼承還要強大。中文指南基本操作指南二繼續(xù)熟悉的幾對方法，包括，，。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。 怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家?guī)韼椭?...（據(jù)說是阿里的前端妹子寫的） this 的值到底...

    blair 評論0 收藏0

  • JavaScript深入淺出第1課：箭頭函數(shù)中的this究竟是什么鬼？

    摘要：箭頭函數(shù)沒有自己的值，箭頭函數(shù)中所使用的來自于函數(shù)作用域鏈。使用箭頭函數(shù)打印對于內(nèi)層函數(shù)，它本身并沒有值，其使用的來自作用域鏈，來自更高層函數(shù)的作用域。 《JavaScript 深入淺出》系列： JavaScript 深入淺出第 1 課：箭頭函數(shù)中的 this 究竟是什么鬼？ JavaScript 深入淺出第 2 課：函數(shù)是一等公民是什么意思呢？ 普通函數(shù)與箭頭函數(shù) 普通函數(shù)指的是...

    MRZYD 評論0 收藏0

  • JavaScript深入之bind的模擬實現(xiàn)

    摘要：也就是說當(dāng)返回的函數(shù)作為構(gòu)造函數(shù)的時候，時指定的值會失效，但傳入的參數(shù)依然生效。構(gòu)造函數(shù)效果的優(yōu)化實現(xiàn)但是在這個寫法中，我們直接將，我們直接修改的時候，也會直接修改函數(shù)的。 JavaScript深入系列第十一篇，通過bind函數(shù)的模擬實現(xiàn)，帶大家真正了解bind的特性 bind 一句話介紹 bind: bind() 方法會創(chuàng)建一個新函數(shù)。當(dāng)這個新函數(shù)被調(diào)用時，bind() 的第一個參數(shù)...

    FingerLiu 評論0 收藏0

  • JavaScript深入之執(zhí)行上下文

    摘要：深入系列第七篇，結(jié)合之前所講的四篇文章，以權(quán)威指南的為例，具體講解當(dāng)函數(shù)執(zhí)行的時候，執(zhí)行上下文棧變量對象作用域鏈?zhǔn)侨绾巫兓?。前言在深入之?zhí)行上下文棧中講到，當(dāng)代碼執(zhí)行一段可執(zhí)行代碼時，會創(chuàng)建對應(yīng)的執(zhí)行上下文。 JavaScript深入系列第七篇，結(jié)合之前所講的四篇文章，以權(quán)威指南的demo為例，具體講解當(dāng)函數(shù)執(zhí)行的時候，執(zhí)行上下文棧、變量對象、作用域鏈?zhǔn)侨绾巫兓摹?前言 在《Jav...

    gougoujiang 評論0 收藏0

  • JavaScript深入之new的模擬實現(xiàn)

    摘要：深入系列第十二篇，通過的模擬實現(xiàn)，帶大家揭開使用獲得構(gòu)造函數(shù)實例的真相一句話介紹運算符創(chuàng)建一個用戶定義的對象類型的實例或具有構(gòu)造函數(shù)的內(nèi)置對象類型之一也許有點難懂，我們在模擬之前，先看看實現(xiàn)了哪些功能。 JavaScript深入系列第十二篇，通過new的模擬實現(xiàn)，帶大家揭開使用new獲得構(gòu)造函數(shù)實例的真相 new 一句話介紹 new: new 運算符創(chuàng)建一個用戶定義的對象類型的實例或具...

    tianlai 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<