你不知道的this

terasum 發布于2019-08-19 17:51 / 1414人閱讀

摘要：本內容來自你不知道的上卷，做了簡單的總結。如果不使用這段代碼該如何寫呢那就需要給和顯示傳入一個上下文對象對比發現提供了額一種更優雅的方式來隱式傳遞一個對象引用。四總結隨著你使用的模式越來越復雜，顯式傳遞上下文對象會讓代碼變得越來越混亂。

本內容來自《你不知道的JavaScript(上卷)》，做了簡單的總結。

this關鍵字是javascript最復雜的機制之一。它是一個很特別的關鍵字，被自動定義在所有的函數作用域中。但是即使是非常有經驗的javascript開發者也很難說出他到底指向什么。本節將分三個部分講解javascript中的this：

為什么要使用this

兩種常見的對于this的誤解

this到底是什么

一、為什么要使用this

在書中通過兩段代碼的對比來說明為什么要使用this。第一段代碼如下：這段代碼在不同的上下問對象(me和you)中重復使用函數identify()和speak(),不用針對不同的對象編寫不同版本的函數。

function identify(){
      return this.name.toUpperCase();
  }
  function speak(){
      var greeting = "hello, I am " + identify.call(this);
      console.log(greeting);
  }
  var me = {
      name: "zhou"
  }
  var you = {
      name: "reader"
  }
  identify.call(me); //ZHOU
  identify.call(you); //READER
  speak.call(me); // hello, I am ZHOU
  speak.call(you); // hello, I am READER

如果不使用this, 這段代碼該如何寫呢？那就需要給identify()和speak()顯示傳入一個上下文對象

      function identify(cxt){
          return cxt.name.toUpperCase();
      }
      function speak(cxt){
          var greeting = "hello, I am " + identify(cxt);
          console.log(greeting);
      }
      identify(you); //READER
      speak(me); //hello, I am ZHOU

對比發現：this提供了額一種更優雅的方式來隱式“傳遞”一個對象引用。因為，隨著你使用的模式越來越復雜，顯式傳遞上下文對象會讓代碼變得越來越混亂。因此，通過使用this可以將API設計的更加簡潔并且易于復用。

二、兩種常見的對于this的誤解 誤解1.指向函數自身

把this理解為指向函數自身，這個推斷從英語語法角度是說的通的。
常見的在函數內部引用自身的情況有：遞歸或者是一個在第一次被調用后自己接觸綁定的事件處理器。 JavaScript的新手開發者(比如說我)通常認為：既然可以把函數看作一個對象，那就可以在調用函數時存儲狀態(屬性的值)。
現在我們來分析這個模式，讓大家看到this并不像所想的那樣指向函數本身。下面這段代碼，我們想要記錄函數foo被調用的次數：

      function foo(num){
          console.log("foo: " + num);
          this.count++; //記錄foo被調用的次數
      }
      foo.count = 0;
      
      for(var i=0; i<10; i++){
          if(i > 5){
              foo(i)
          }
      }
       // foo: 6
       // foo: 7
       // foo: 8
       // foo: 9
      
       console.log(foo.count); // 0  為什么會是0呢?

foo()函數中的console.log語句產生了4條輸出，證明foo()確實被調用了4次，但foo.count仍然是0，所以，僅從字面上來理解，this指向函數自身是錯誤的。那么，問題的原因是什么呢？
foo()函數是在全局作用域下執行的，this在這段代碼中其實指向window，并且這段代碼在無意中創建了一個全局變量count,他的值為NaN。
那么，遇到這樣的問題許多的開發者(包括我)，不會深入的思考為什么this的行為和預期的不一致，也不會回答那些很難解決，但非常重要的問題。這里提供了三種解決這個問題的方法，其中前兩種方法回避了this的含義和工作原理。代碼如下：

方法一運用作用域(詞法作用域)方法，該方法解決了我們遇到的問題，但是卻沒有直面this。

     function foo(num){
          console.log("foo: " + num);
          data.count++; //記錄foo被調用的次數
      }
      var data ={
       count: 0
      };
      
      for(var i=0; i<10; i++){
          if(i > 5){
              foo(i);
          }
      }
       // foo: 6
       // foo: 7
       // foo: 8
       // foo: 9
      console.log(data.count);// 4

方法二創建一個指向函數對象的詞法標識符(變量)來引用它。同樣該方法仍舊回避了this的問題。

    function foo(num){
          console.log("foo: " + num);
          foo.count++; // foo指向它自身
      }
      foo.count = 0;
      for(var i=0; i<10; i++){
          if(i > 5){
              foo(i);
          }
      }
       // foo: 6
       // foo: 7
       // foo: 8
       // foo: 9
      console.log(foo.count);// 4

方法三既然我們知道this在foo函數執行時指向了別處，那么我們需要做的就是強制this指向foo函數.

function foo(num){
          console.log("foo: " + num);
          this.count++;
      }
      foo.count = 0;
      for(var i=0; i<10; i++){
          if(i > 5){
              foo.call(foo, i); //使用call()可以確保this指向函數本身
          }
      }
       // foo: 6
       // foo: 7
       // foo: 8
       // foo: 9
      console.log(foo.count);// 4

這次我們從this的角度解決了問題。

誤解2.指向函數作用域

第二種常見的誤解是：this指向函數作用域。這個問題有點復雜，因為在某種情況下它是正確的，但在其他情況下他卻是錯誤的。
但一定要明白，this在任何情況下都不指向函數的作用域，在javascript內部作用域和對象確實很相似，可見的標識符都是他的屬性，但作用域“對象”無法通過JavaScript代碼訪問，它存在于JavaScript引擎內部
在文中給出了這樣一段代碼:

    function foo(){
         var a = 2;
         this.bar();
    }
    function bar(){
        console.log(this.a);
    }
    foo(); // ReferenceError: a is not defined

這段代碼試圖通過this聯通foo()和bar()的詞法作用域，從而讓bar()可以訪問foo()作用域的變量a。but it"s impossible!

三、this到底是個什么玩意？

通過排除以上種種的誤解，我們可以得出以下結論：

this是在運行時進行綁定的，并不是在編寫時綁定的。

this的綁定和函數聲明的位置沒有關系，只取決于函數的調用方式。

具體細節是：當一個函數被調用時，會創建一個活動記錄(也稱執行上下文(context))。這個記錄會包含一些信息，比如：函數在哪里被調用(調用棧)，函數的調用方式，傳入的參數等，而this就是這個記錄的一個屬性，會在函數執行過程中被用到。

四、總結

隨著你使用的模式越來越復雜，顯式傳遞上下文對象會讓代碼變得越來越混亂。因此，通過使用this隱式傳遞可以將API設計的更加簡潔并且易于復用。

this既不指向函數自身，也不指向函數的作用域。

this實際上是函數被調用時發生的綁定，它的指向完全取決于函數在哪里被調用。

云服務器 GPU云服務器你不知道的你不知道的javascript 你不知道的javascript上卷你不知道

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78912.html

你不知道的Virtual DOM（五）：自定義組件

摘要：現在流行的前端框架都支持自定義組件，組件化開發已經成為提高前端開發效率的銀彈。二對自定義組件的支持要想正確的渲染組件，第一步就是要告訴某個標簽是自定義組件。下面的例子里，就是一個自定義組件。解決了識別自定義標簽的問題，下一步就是定義標簽了。歡迎關注我的公眾號睿Talk，獲取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、...

lk20150415 2019-08-23 11:41 評論0 收藏0
你不知道的Virtual DOM（六）：事件處理&異步更新

摘要：如果列表是空的，則存入組件后將異步刷新任務加入到事件循環當中。四總結本文基于上一個版本的代碼，加入了事件處理功能，同時通過異步刷新的方法提高了渲染效率。歡迎關注我的公眾號睿Talk，獲取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言目前最流行的兩大前端框架，React和Vue，都不約而同的借助Virtual DO...

caozhijian 2019-08-23 11:51 評論0 收藏0
《你不知道的JavaScript》 (下) 閱讀摘要

摘要：本書屬于基礎類書籍，會有比較多的基礎知識，所以這里僅記錄平常不怎么容易注意到的知識點，不會全記，供大家和自己翻閱不錯，下冊的知識點就這么少，非常不推介看下冊上中下三本的讀書筆記你不知道的上讀書筆記你不知道的中讀書筆記你不知道的下讀書筆記第三本書屬于基礎類書籍，會有比較多的基礎知識，所以這里僅記錄平常不怎么容易注意到的知識點，不會全記，供大家和自己翻閱；不錯，下冊的知識點就這么少，非...

Jacendfeng 2019-08-23 14:35 評論0 收藏0
《你不知道的javascript》筆記_this

下一篇：《你不知道的javascript》筆記_對象&原型寫在前面上一篇博客我們知道詞法作用域是由變量書寫的位置決定的，那this又是在哪里確定的呢？如何能夠精準的判斷this的指向？這篇博客會逐條闡述書中有這樣幾句話： this是在運行時進行綁定的，并不是在編寫時綁定，它的上下文取決于函數調用時的各種條件this的綁定和函數聲明的位置沒有任何關系，只取決于函數的調用方式當一個函數被調用時...

cpupro 2019-08-23 14:16 評論0 收藏0
《你不知道的JavaScript》 (上) 閱讀摘要

摘要：但是如果非全局的變量如果被遮蔽了，無論如何都無法被訪問到。但是如果引擎在代碼中找到，就會完全不做任何優化。結構的分句中具有塊級作用域。第四章提升編譯器函數聲明會被提升，而函數表達式不會被提升。本書屬于基礎類書籍，會有比較多的基礎知識，所以這里僅記錄平常不怎么容易注意到的知識點，不會全記，供大家和自己翻閱；上中下三本的讀書筆記：《你不知道的JavaScript》 (上) 讀書筆記...

FingerLiu 2019-08-23 14:35 評論0 收藏0
你不知道的javascript (1) --- this

摘要：的定義執行上下文。這本書也是舉了好幾個例子來說明，這句話的含義。我個人也認為，不通過代碼，非常難說明問題。所以，修改的是全局的，并不是自身的。 this 先說明一下，this是我JavaScript的盲區，寫這篇文章，就是為了讓自己能重新認識this，并且搞清楚，js里面的this，到底是什么。這個系列主要是記錄我自己看《你不知道的JavaScript》這本書的筆記。 this的定義...

Corwien 2019-08-23 16:12 評論0 收藏0