解析js中的this對象

firim 發布于2019-08-21 18:38 / 2826人閱讀

摘要：指定為原始值數字，字符串，布爾值會指向該原始值的自動包裝對象這一點感謝評論區的讀者補充。

前言

（幾天之前寫了源碼分析之后，感覺太疲憊了，寫一些相對輕巧的內容調劑一下，希望喜歡的同學可以點個贊和收藏~）
進入正題，this對象在js中是很常見，但是在這里也經常會出錯，本文將對常見的this對象的情況做一些總結

正文

this對象是在函數運行時，基于函數的執行環境綁定的。

其實這句話的本質就是，誰調用了函數，this就指向誰

具體的來說，通常有以下幾種情況：

全局函數

在全局環境中，this指向Window

 //例子1
  function A() {
    console.log(this)
  }
  A();//Window

上面的例子很簡單，函數A在全局環境中執行，也就是全局對象Window調用了函數。此時this指向Window

對象方法

作為對象方法調用時，this指向調用該方法的對象

//例子2
var  b = {
    getThis:function(){
        console.log(this)
    }
}
b.getThis()//b

到這里我們舉的例子都比較簡單易懂，接下來來一個有意思的：

//例子3
  var c = {
    getFunc:function(){
      return function(){
        console.log(this)
      }
    }
  }
  var cFun = c.getFunc()
  cFun()//Window

這個例子和前一個例子不一樣，運行c.getFunc()時，首先返回的是一個匿名函數，我們將這個函數賦值給cFun，接著在全局環境中調用了cFun()，所以此時this指向的還是Window。

如果我們一定要讓這里返回的是c對象呢？在開頭我們說過，this對象是在函數執行時確定的，在例子3中，執行c.getFunc()時，this對象指向的還是c，所以我們只要保持住這個this就好了,對上面的代碼稍微改動：

//例子4
  var c = {
    getFunc:function(){
        var that = this //在這里保留住this
      return function(){
        console.log(that)
      }
    }
  }
  var cFun = c.getFunc()
  cFun()//c

這也就是我們經常可以在一些代碼中看到var self = this或者var that = this之類的原因了。

call和apply

此時this對象通常指向函數中指定的this值(注意這里的通常2字，考試要考的)

call和apply算是老生常談，但還是稍微介紹下，怕新同學可能沒接觸過（其實是為了湊點字數），拿call來說，語法是這樣的

fun.call(thisArg, arg1, arg2, ...)

這個方法怎么用呢，看下面的例子：

//例子5
var d = {
    getThis:function(){
        console.log(this)
    }
}
var e = {
   name:"e"http://(給e寫個`name`屬性只是因為覺得孤零零的太難看了~~)
}
d.getThis.call(e)//e

在這里我們就可以看出call函數的意思了:指定一個對象o1去調用其他對象o2的方法，此時this對象指向o1

好了，那為什么前面我們說通常呢？因為，有2種例外的情況:

thisArg指定為null和undefined時，this指向window。

thisArg指定為原始值(數字，字符串，布爾值),this會指向該原始值的自動包裝對象（這一點感謝評論區的讀者補充）。請看：

//例子6
var d = {
    getThis:function(){
        console.log(this)
    }
}
  d.getThis.call(null)//Window
  d.getThis.call(undefined)//Window
  d.getThis.call(1) //Number
  d.getThis.call("hello") //String
  d.getThis.call(true) //Boolean

番外：基本包裝類型

既然講到包裝類型，那這里順便補充介紹一下基本包裝類型：基本包裝類型（包括Boolean,String,Number）是一類特殊的引用類型，它們具有引用類型的基本特征，還具有對應的基本類型的特殊行為，舉個例子：

//基本包裝類型
var str = "hello World";
var str2 = s1.substring(2);

首先，str是字符串，字符串是基本數據類型，但是在第二行代碼中，str.substring(2)調用了str的方法，我們知道，基本數據類型不是對象，本來是是不應該有方法的，但是實際上我們知道string，number類型都有對應的方法，因為從內存中訪問str時，訪問進入了一種讀取模式，在后臺自動做了以下轉換：

創建一個String類型的實例

在實例上調用相應方法

銷毀該實例

特點：自動創建的基本包裝類型的對象只存在于執行代碼的瞬間，然后立即銷毀。
那么可以手動創建基本包裝類型嗎？當然可以：

var  str = new String("Hello")//注意這里是new一個實例，而不是用String類型轉換函數
typeof(str)//object
var str2 = String(222)//如果使用類型轉換函數得到的還是類型
ypeof(str2)//string

此時的str就是一個顯式創建的基本包裝類型對象，只是一般來說很少這樣去使用

箭頭函數

es6中的箭頭函數現在也用的比較頻繁，但是有個需要注意的點是：

函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。

其實出現這種情況的根本原因是:箭頭函數沒有this對象，所以箭頭函數的this就是外層代碼的this

//例子7
  var f = {
      getThis:()=>{
          console.log(this)
      }
  }
  f.getThis()//Window

這個例子和前面例子2是基本一樣的，只是把普通函數改寫成箭頭函數，但是此時的this對象已經指向了外層的Window。

考慮到這一點可能不好理解，我們再看幾個例子:

//例子8
  var g = {
    getThis:function(){
      return function(){console.log(this)}
    }
  }
  var h = {
    getThis:function(){
      return ()=> console.log(this)
    }
  }
  g.getThis()()//Window
  h.getThis()()//h

這個例子里，g的getThis寫法就和之前的例子3一樣，由于函數在全局環境中運行，所以此時this指向Window；h的getThis使用了箭頭函數，所以this指向了外層代碼塊的this所以，此時this指向的是h。

總結

小結一下，

一般情況下this對象指向調用函數的對象，全局環境中執行函數this對象指向Window

在call和apply函數中this指向指定的對象，如果指定的對為undefined或者null，那么this對象指向Window

在箭頭函數中，this對象等同于外層代碼塊的this

然后依然是每次都一樣的結尾，如果內容有錯誤的地方歡迎指出；如果對你有幫助，歡迎點贊和收藏，轉載請征得同意后著明出處，如果有問題也歡迎私信交流，主頁添加了郵箱地址~溜了

GPU云服務器云服務器 js中的this js中的this機制 js中的this與html js中的對象

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

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

JS高級入門教程

摘要：解析首先簡稱是由歐洲計算機制造商協會制定的標準化腳本程序設計語言。級在年月份成為的提議，由核心與兩個模塊組成。通過引入統一方式載入和保存文檔和文檔驗證方法對進行進一步擴展。其中表示的標記位正好是低三位都是。但提案被拒絕了。 JS高級入門教程目錄本文章定位及介紹 JavaScript與ECMAScript的關系 DOM的本質及DOM級介紹 JS代碼特性基本類型與引用類型 JS的垃...

zsy888 2019-08-20 14:43 評論0 收藏0
淺談細說 JS 函數(call,apply,重載)

摘要：什么是函數引用的原話函數是一組可以隨時隨地運行的語句。函數是由這樣的方式進行聲明的關鍵字函數名一組參數，以及置于括號中的待執行代碼。什么是函數？引用 W3School 的原話: 函數是一組可以隨時隨地運行的語句。函數是 ECMAScript 的核心。函數是由這樣的方式進行聲明的：關鍵字 function、函數名、一組參數，以及置于括號中的待執行代碼。函數的基本語法是這樣的：...

U2FsdGVkX1x 2019-08-21 10:42 評論0 收藏0
ECMA_作用域深入&This關鍵字

摘要：預解析聲明告知瀏覽器在全局作用域中有一個變量名為的變量。執行代碼的就是棧內存，作用域也是棧內存。關鍵字在中主要研究都是函數中的中的代表的是當前行為執行的主體方法，函數，事件中的上下文代表的是當前行為執行的環境區域例如小明在沙縣小吃吃蛋炒飯。基本認識數據類型基本數據類型 string, number, null, boolean, undefined 引用數據類型 object: ...

Harriet666 2019-08-21 15:49 評論0 收藏0
FE.SRC-webpack原理梳理

摘要：執行完成后會返回如下圖的結果，根據返回數據把源碼和存儲在的屬性上的回調函數中調用類生成，并根據生成依賴后回調方法返回類。 webpack設計模式一切資源皆Module Module(模塊)是webpack的中的關鍵實體。Webpack 會從配置的 Entry 開始遞歸找出所有依賴的模塊. 通過Loaders(模塊轉換器)，用于把模塊原內容按照需求轉換成新模塊內容. 事件驅動架構 we...

cfanr 2019-08-23 17:08 評論0 收藏0
js中的Java式繼承

摘要：中有三種不同的對象，三種對象的屬性和行為和下方的類似構造函數對象構造函數為的類定義名稱，任何添加到這個構造函數對象中的屬性都是類字段和類方法。 JavaScript中的Java式繼承區別 Java類似的強類型面向對象語言，類為實例字段他們是基于實例的屬性或變量，用以保存獨立對象的狀態實例方法他們是類的所有實例所共享的方法，由每個獨立的實例調用類字段這些屬性或者變量是屬于類...

SillyMonkey 2019-08-22 18:50 評論0 收藏0
全面解析JS中的this

摘要：當我們不想再對象內部間接包含引用函數，而像在某個對象上強制調用函數。我們可以用中內置的和的方法來實現，這兩個方法的第一個參數是一個對象，是給準備的，接著再調用函數時將其綁定到。 this是什么在javascript中，每個執行上下文可以抽象成一組對象showImg(https://segmentfault.com/img/bVuKR7); 而this是與執行上下文相關的特殊對象，任何...

calx 2019-08-20 18:59 評論0 收藏0