<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          解讀Javascript中的this機制,別再為了 this 發愁了

          時間:?2017-11-10閱讀:?788標簽:?this

          題記:JavaScript中有很多令人困惑的地方,或者叫做機制。但是,就是這些東西讓JavaScript顯得那么美好而與眾不同。比方說函數也是對象、閉包、原型鏈繼承等等,而這其中就包括頗讓人費解的this機制。不管是新手還是老手,不仔細深摳一下還真鬧不明白this倒地咋回事捏。今天,我們就一起看一下this倒地咋回事,別再為了this發愁了。


          1、this是啥?


          簡言之,this是JavaScript語言中定義的眾多關鍵字之一,它的特殊在于它自動定義于每一個函數域內,但是this倒地指引啥東西卻讓很多人張二摸不著頭腦。這里我們留個小懸念,希望看完這篇文章了你能回答出來this到底指引個甚。


          2、this有啥用?


          那邊觀眾又該問了,既然this這么難以理解,那么為個甚還要用它呢?我們來看個例子:

          function identify() {
              return this.name.toUpperCase();
          }
          function sayHello() {
              var greeting = "Hello, I'm " + identify.call( this );
              console.log( greeting );
          }
          var person1= {
              name: "Kyle"
          };
          var person2= {
              name: "Reader"
          };
          identify.call( person1); // KYLE
          identify.call( person2); // READER
          sayHello.call( person1); // Hello, I'm KYLE
          sayHello.call( person2); // Hello, I'm READER


          這段代碼很簡單,我們定義了兩個函數,分別為identify和sayHello。并且在不同的對象環境下執行了它們,達到了復用的效果,而不用為了在不同的對象環境下執行而必須針對不同的對象環境寫對應的函數了。簡言之,this給函數帶來了復用。那邊客官又問了,我不用this一樣可以實現,如:

          function identify(context) {
              return context.name.toUpperCase();
          }
          function sayHello(context) {
              var greeting = "Hello, I'm " + identify( context);
              console.log( greeting );
          }
          var person1= {
              name: "Kyle"
          };
          var person2= {
              name: "Reader"
          };
          identify( person1); // KYLE
          identify( person2); // READER
          sayHello( person1); // Hello, I'm KYLE
          sayHello( person2); // Hello, I'm READER


          仔細一看,這位客官給出的解決方法的確也達到了類似的效果。贊一個!我想說的是,隨著代碼的增加,函數嵌套、各級調用等變得越來越復雜,那么傳遞一個對象的引用將變得越來越不明智,它會把你的代碼弄得非常亂,甚至你自己都無法理解清楚。而this機制提供了一個更加優雅而靈便的方案,傳遞一個隱式的對象引用讓代碼變得更加簡潔和復用。好了,知道了this的用處,那么再看看我們對它的誤解。


          3、關于this的誤解


          相信很多童鞋是學過其它語言的,在很多編程語言中都有this的機制,慣性思維把其它語言里對它的理解帶到了JavaScript中。同時,由于this這個單詞的理解導致了我們產生了對它各種各樣的誤解。所以,開始前,我們先澄清下對它的誤解。


          3.1 誤解一:this引用function本身


          我們都知道,在函數里引用函數可以達到遞歸和給函數屬性賦值的效果。而這在很多應用場景下顯得非常有用。所以,很多人都誤以為this就是指引function本身。例如:

          function fn(num) {
              console.log( "fn: " + num );
              // count用于記錄fn的被調用次數
              this.count++;
          }
          fn.count = 0;
          var i;
          for (i=0; i<10; i++) {
              if (i > 5) {
                  fn( i );
              }
          }
          // fn: 6
          // fn: 7
          // fn: 8
          // fn: 9
          console.log( fn.count ); // 0 -- 耶?咋不是4捏?


          上面我們想要記錄fn被調用的次數,可是明顯fn被調用了四次但count仍然為0。咋回事捏?這里簡單解釋下,fn里第4行的自增隱式的創建了一個全局變量count,由于初始值為undefined,所以每一次自增其實依然不是一個數字,你在全局環境下打印count(window.count)輸出的應該是NaN。而第6行定義的函數熟悉變量count依然沒變,還是0。如果對這個執行結果不清楚的,歡迎去看我前些天的那篇博文(聊一下JS中的作用域scope和閉包closure scope和closure),在這里你只需要知道,this引用的是function這種理解是錯誤的就行。


          這邊就會又有人問了,既然this不是引用function,那么我要實現遞歸函數,該咋引用呢?這里簡單回答下介個問題,兩種方法:①函數體內用函數名來引用函數本身②函數體內使用arguments.callee來引用函數(不推薦)。那么既然第二種方法不推薦,匿名函數咋引用呢?用第一種,并且給匿名函數一個函數名即可(推薦)。


          3.2 誤解二:this引用的是function的詞法作用域


          這種誤解欺騙的人可能更多一些。首先,澄清一下,this并沒有引用function的詞法作用域。的確JS的引擎內對詞法作用域的實現的確像是一個對象,擁有屬性和函數,但是這僅僅是JS引擎的一種實現,對代碼來說是不可見的,也就是說詞法作用域“對象”在JS代碼中取不到。(關于詞法作用域,如果不理解,可以參考之前的一篇博文《聊一下JS中的作用域scope和閉包closure scope和closure》)。看個錯誤的例子:

          function fn1() {
              var a = 2;
              this.fn2();//以為this引用的是fn1的詞法作用域
          }
          function fn2() {
              console.log( this.a );
          }
          fn1(); //ReferenceError


          上面的代碼明顯沒有執行出想要的結果,從而可以看到this并沒有引用函數的詞法作用域。甚至,可以肯定的說,這個例子里fn2可以在fn1里正確執行都是偶然的(理解了詞法作用域你就知道為什么這里執行不報錯了)。


          4、this到底跟啥有關?


          好了,扯了那么多都沒上干貨,有的觀眾都開始關閉當前頁開始離席了。這里,我們鄭重聲明:this跟函數在哪里定義沒有半毛錢關系,函數在哪里調用才決定了this到底引用的是啥。也就是說this跟函數的定義沒關系,跟函數的執行有大大的關系。所以,記住,“函數在哪里調用才決定了this到底引用的是啥”。


          5、this機制的四種規則


          this到底綁定或者引用的是哪個對象環境決定于函數被調用的地方。而函數的調用有不同的方式,在不同的方式中調用決定this引用的是哪個對象是由四種規則確定的。我們一個個來看。


          5.1 默認綁定全局變量


          這條規則是最常見的,也是默認的。當函數被單獨定義和調用的時候,應用的規則就是綁定全局變量。如下:

          function fn() {
              console.log( this.a );
          }
          var a = 2;
          fn(); // 2 -- fn單獨調用,this引用window


          5.2 隱式綁定


          隱式調用的意思是,函數調用時擁有一個上下文對象,就好像這個函數是屬于該對象的一樣。例如:

          function fn() {
              console.log( this.a );
          }
          var obj = {
              a: 2,
              fn: fn
          };
          obj.fn(); // 2 -- this引用obj。


          需要說明的一點是,最后一個調用該函數的對象是傳到函數的上下文對象(繞懵了)。如:

          function fn() {
              console.log( this.a );
          }
          var obj2 = {
              a: 42,
              fn: fn
          };
          var obj1 = {
              a: 2,
              obj2: obj2
          };
          obj1.obj2.fn(); // 42 -- this引用的是obj2.


          還有一點要說明的是,失去隱式綁定的情況,如下:

          function fn() {
              console.log( this.a );
          }
          var obj = {
              a: 2,
              fn: fn
          };
          var bar = obj.fn; // 函數引用傳遞
          var a = "全局"; // 定義全局變量
          bar(); // "全局"


          如上,第8行雖然有隱式綁定,但是它執行的效果明顯是把fn賦給bar。這樣bar執行的時候,依然是默認綁定全局變量,所以輸出結果如上。


          5.3 顯示綁定


          學過bind()\apply()\call()函數的都應該知道,它接收的第一個參數即是上下文對象并將其賦給this。看下面的例子:

          function fn() {
              console.log( this.a );
          }
          var obj = {
              a: 2
          };
          fn.call( obj ); // 2


          如果我們傳遞第一個值為簡單值,那么后臺會自動轉換為對應的封裝對象。如果傳遞為null,那么結果就是在綁定默認全局變量,如:

          function fn() {
               console.log( this.a );
          }
          var obj = {
               a: 2
          };
          var a = 10;
          fn.call( null); // 10


          5.4 new新對象綁定


          如果是一個構造函數,那么用new來調用,那么綁定的將是新創建的對象。如:

          function fn(a) {
              this.a = a;
          }
          var bar = new fn( 2 );
          console.log( bar.a );// 2


          注意,一般構造函數名首字母大寫,這里沒有大寫的原因是想提醒讀者,構造函數也是一般的函數而已。


          6、結束語


          讀到現在,1中問的問題你該自己能回答上來了。上面介紹的四種關于this綁定的4中情況和規則,現實寫代碼的過程中肯定比這要多和復雜,但是無論多復雜多亂,它們都是混合應用上面的幾個規則和情況而已。只要你的思路和理解是清晰的,那肯定沒問題的。


          作者:front-Thinking  
          來源:www.cnblogs.com/front-Thinking/p/4364337.htm


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/79

          Js中常見this指向問題

          無論是工作或者面試中,this指向問題是經常遇到的。所以這篇文章把常見的指向問題列出來給大家,避免踩坑。首先我們要知道,在函數中this到底取何值,是在函數真正被調用執行的時候確定的,函數定義的時候確定不了,也就是說,this的指向完全取決于函數調用的位置

          this指針

          javascript中this指針是動態的,主要是根據當前函數執行上下文及函數調用方式決定的.以函數方法調用時this指針全局或嚴格模式中為undefined,以方法調用時this是指針當前對象實例的.以構造函數方式時this指向當前創建的實現對象。

          Js中this的綁定規則

          對于 JavaScript 新手來說,this 是非常基礎同時也難以理解的知識點。比如下面的代碼,this 指向就有三種方式。默認情況下,this 指向全局對象。例如下面的代碼。

          如何修復Vue中的 “this is undefined” 問題

          一個可能的原因是混淆了常規函數和箭頭函數的用法,如果你遇到這個問題,我猜你用的是箭頭函數。如果用常規函數替換箭頭函數,它可能會為你修復這個問題。我們再深入一點,試著理解為什么會這樣。

          This is this

          this的指向是JavaScript中一個經久不衰的熱門問題,在不同的場景下指向規則也不同,在此本文總結了this在不同場景下的指向規則以及ES6中新增的箭頭函數中this的指向問題

          Js中this指向問題(函數的調用方式)

          在ES6之前,函數內部的this是由函數的調用方式決定的。構造函數調用 ,這時 p.say 屬于Object,為Object的實例。this:say構造函數的實例,實例中并沒有age屬性,值為:undefined

          JavaScript this 關鍵詞

          JavaScript this 關鍵詞指的是它所屬的對象。它擁有不同的值,具體取決于它的使用位置:在方法中,this 指的是所有者對象。單獨的情況下,this 指的是全局對象。

          尋找this綁定對象?找到調用棧&調用位置

          經常聽到這么一句話,找this只需要看 誰是調用方 。當函數被調用時會記錄函數調用調用方式、傳參包括this等各種屬性。有時候 this 綁定對象情況太抽象,找到準確的 調用方 還是有一定的難度。

          理解 JS 中的 This, Bind, Call, 和 Apply

          盡管這this是一個復雜的話題,但它也是在您開始編寫第一個JavaScript程序后立即出現的話題。在本文中,您將了解什么this是指隱含根據上下文,您將學習如何使用bind,call和apply方法,明確確定的值this。

          JS this指向問題

          this問題,是很多前端同學初學JS的攔路虎,甚至一些兩三年工作經驗的同學對this的理解還是模棱兩可或是有一些誤解,一個常見的誤區就是:this指向函數本身。本文嘗試總結了一下this的使用,并在最后總結了this指向的確定規則

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网