“茴”字有四種寫法,this也是一樣


  說到這個地方又想起以前高中還是初中學的《孔乙己》這個梗,但是這里的this顯然實用性比那個要大很多,哈哈。

  簡單來說,this有四種應用場景,分別是在構造函數上、對象屬性中、普通函數中、call和apply方法中。

  先來看第一種,構造函數:

1 function Foo(name){
2             this.name=name;
3         }
4 
5         var f=new Foo();

  在這里,this指向的是新對象f。而在對象屬性中,這又有了一點不同。

1 var obj={
2             a:"funny",
3             b:function(){
4                 console.log(this.a);
5             }
6         };
7 
8         obj.b();//打印出funny

  這里我們把b作為obj對象的一個屬性來執行,執行的時候this就指向當前這個對象obj,所以在控制台會打印出funny;接下來看第三種情況,就那這個例子來說,我們稍微改動一下代碼。

1         var obj={
2             a:"funny",
3             b:function(){
4                 console.log(this.a);
5             }
6         };
7 
8         var f1=obj.b;
9         f1(); //打印出undefined

  在第九行中,我們執行f1發現根本取不到“funny”,而是打印出undefined。原因就是當我們這樣作為一個普通函數執行的時候,this指向window對象的,而window對象下找不到a這個屬性,於是就打印出undefined。順便說一句,如果是找不到一個屬性,會返回undefined;而找不到一個變量,則會返回“xxx is not defined”。

  最后一種情況,在call和apply中。其實我們可以把call和apply當成一種特殊的執行方法。可以叫它“能自定義this指向的執行方法”,這個名字聽起來是不是有點長,但原理的確如此。就是說當我們直接來一個f1()的時候,它的this默認為window。要改變怎么辦呢?就要來點特殊執行手段,在中間多插入一個單詞---call或者apply。

  

1         var obj={
2             a:"funny",
3             b:function(){
4                 console.log(this.a);
5             }
6         };
7 
8         var f1=obj.b;
9         f1.call({a:"serious"}); //改變了this的指向,指向這個新對象,打印出serious

  還是這段代碼,不過我稍微改了下,把它的this的指向扭了一下,最終指到我自己寫的{a:"serious"}這個對象,然后就可以把serious打印出來了。apply和call差不多,因為這里我只傳了一個參數,所以沒法演示。call-->第一個參數為this,后面為其他參數;apply-->第一個參數為this,后面為用數組包裹起來的其他參數。就這么點區別。

  應該還不錯吧(`・ω・´)

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM