javaScript中this到底指向誰

1.前言

在JavaScript中，this的指向一直是大多數初學者的易錯點，老是搞不清楚this到底指向誰，而在求職面試中，this的指向問題每每又是高頻考點。本篇博文就來總結一下在JavaScript中不一樣狀況下this到底指向誰。

2.熱身一下

首先，咱們先來看看下面的代碼，請問，下面這段代碼運行後會在控制檯輸出什麼？若是你能立刻回答出程序輸出的結果，那麼你已經很清楚this的指向了，不用再往下看了。

 1 var bar = 2;  2 var obj = {  3   bar: 1,  4   foo: function () {  5       console.log(this.bar)  6  },  7   boo: (function () {  8       console.log(this.bar)  9  })() 10 }; 11 
12 var foo = obj.foo; 13 
14 obj.foo() 15 foo()

運行輸出結果：

經過分析代碼，咱們能夠知道，第一個2是在第8行代碼處輸出的，第二個1是在第14行代碼處輸出的，第三個2是在第15行代碼處輸出的。這樣的結果顯然是因爲不一樣地方的this指向不一樣，致使此this.bar非彼this.bar。那麼到底該怎麼區分不一樣狀況下的this到底指向誰呢？下面咱們就來總結下在JavaScript中幾種不一樣狀況下的this指向問題，只要記住瞭如下五種狀況，保準你之後遇到這樣的面試題再也不懵圈，哈哈哈哈哈。

3.狀況一：自執行函數

//自執行函數
  boo: (function () { console.log(this.bar)    //輸出2
  })()

在上面的熱身代碼中，boo函數是一個自執行函數，也就是說當瀏覽器運行這段代碼時，會先自動執行boo函數。切記：自執行函數裏面的this指向window全局對象。既然this指向了window，那麼this.bar即就是window.bar，因此在該行代碼處輸出2.

4.狀況二：函數調用模式

foo: function () { 　　console.log(this.bar)    //輸出2
}, foo() // 函數調用模式

在形如熱身代碼中第15行這樣的單純的函數調用時，那麼切記：在單純的函數調用模式中，被調用函數內部的this指向window全局對象。因此this.bar即就是window.bar，在該行代碼處輸出2.

5.狀況三：方法調用模式

var obj = { bar: 1, foo: function () { console.log(this.bar)  //輸出1
 } }; obj.foo() // 方法調用模式

在形如obj.foo()這種，對象.方法這種模式咱們稱爲方法調用模式，在這種模式中，this指向調用這個方法的對象。在熱身代碼中,因爲foo函數是被obj.foo()這種方式調用的，那麼foo函數內的this就指向了obj，所以this.bar即就是obj.bar，因此在該行代碼處輸出1。

Tips:關於狀況二和狀況三，咱們能夠簡單粗暴的這麼記：函數執行的時候，看函數名前面是否有"."，有的話"."前面是誰this就指向誰，沒有的話this就指向window全局對象

6.狀況四：構造函數調用模式

這種狀況最容易理解，在使用構造函數實例化對象時，構造函數中的this指向實例化出來的新對象。

function Person(name){ this.name = name console.log(this)              //輸出xiaoming
} xiaoming = new Person('xiaoming')

7.狀況五：apply/call改變this指向

apply和call這兩個方法，能夠修改函數調用上下文，也就是this的指向。call和apply的區別以下：

• apply　　

　　　　函數.apply(對象, 函數須要參數列表，是一個數組)

• call

　　　　函數.call(對象,函數所須要的參數1,參數2,參數3...參數n)

1.第一個參數都是要把this修改指向的對象

2.當函數須要參數的時候，那麼apply是用數組進行參數的傳遞,而call是使用單個的參數進行傳遞

3.apply和call方法第一個傳入參數是null的時候都表示爲函數調用模式,也就是將this指向window

對於這種狀況，咱們只需看函數的第一個參數是誰this就指向誰，若是是null，則指向window全局對象。

8.總結

瞭解了以上五種狀況，再回頭去看熱身代碼，是否是就清楚多了？O(∩_∩)O哈哈~