在深入了解JavaScript中this關鍵字之前，有必要先退一步，看一下為什么this關鍵字很重要。this允許復用函數時使用不同的上下文。換句話說，this關鍵字允許在調用函數或方法時決定哪個對象才是焦點。之后討論的所有東西都是基于這個理念。我們希望能夠在不同的上下文或在不同的對象中復用函數或方法。

我們關注的第一件事是如何判斷this關鍵字的引用。當你試圖回答這個問題時，需要問自己的第一個也是最重要的問題是“這個函數在哪里被調用”。判斷this引用什么的唯一方法就是看使用this關鍵字的這個方法在哪里被調用。

一 隱式綁定

請記住，判斷this指向要看使用this關鍵字的這個方法在哪里被調用。假如有下面一個對象

const obj = {title: 'test',fn(): {console.dir(this.title)} } 復制代碼

如果想調用fn方法，就要

obj.fn() 復制代碼

這就把我們帶到隱式綁定規則的主要關鍵點。為了判斷 this 關鍵字的引用，函數被調用時先看一看點號左側。如果有“點”就查看點左側的對象，這個對象就是 this 的引用。 在上面的例子中，obj 在“點號左側”意味著 this 引用了 obj 對象。所以就好像 在 fn 方法的內部 JavaScript 解釋器把 this 變成了 obj。 再看如下例子

const obj = {title: 'test',fn() {console.dir(this.title)},sub: {title: 'test2',fn() {console.dir(this.title)}} } obj.fn() // test obj.sub.fn() // test2 復制代碼

每當判斷 this 的引用時，都需要查看調用過程，并確認“點的左側”是什么。第一個調用，obj 在點左側意味著 this 將引用 obj。第二次調用中，sub 在點的左側意味著 this 引用 sub。 所以大多數情況下，檢查使用this方法的點的左側是什么。如果沒有點呢，繼續往下看。

二 顯示綁定

如果fn只是一個獨立的函數，如下

fn() {console.dir(this.title) } const obj = {title: 'test' } 復制代碼

為了判斷this的引用必須先查看這個函數的調用位置，那怎樣才能讓fn調用的時候將this指向this？我們并不能再像上面那樣簡單的使用obj.fn()，因為obj并沒有fn方法。但是在js中，每個函數都有一個方法call，正好解決這個問題。

"call" 是每個函數都有的方法，它允許在調用函數時為函數指定上下文

所以，可以用下面的方式調用fn方法

fn.call(obj) 復制代碼

call是每個函數都有的屬性，并且傳遞給它的第一個參數會作為函數調用時的上下文。也就是說，this會指向傳遞給call的第一個參數

這就是顯示綁定的基礎，因為我們明確的使用call指定了this的引用。 現在將fn改動一下

fn(name1, name2){console.dir(`${this.title} is ${name1} and ${name2}`) } 復制代碼

此時使用call方法就要如下

fn.call(obj, '張三', '李四') 復制代碼

使用call方法需要將參數一個一個的傳遞進去，參數過多，就會越麻煩。此時apply方法就可以解決。

apply和call本質相同，但不是一個個傳遞參數，可以用數組傳參且apply會在函數中為你自動展開。

const arr = ['張三', '李四'] fn.apply(obj, arr) 復制代碼

除了call和apply可以顯示綁定this外，還有bind方法也可以

bind和call調用方式完全相同，不同的是bind不會立即調用函數，而是返回一個能以后調用的新函數

const newFn = fn.bind(obj, '張三', '李四') newFn() 復制代碼

傳入的不是對象： 如果傳入了一個原始值(字符串,布爾類型，數字類型)，來當做this的綁定對象，這個原始值轉換成它的對象形式。 如果把null或者undefined作為this的綁定對象傳入call/apply/bind，這些值會在調用時被忽略，實際應用的是默認綁定規則

三 new 綁定

function fn(a) {this.a = a } const bar = new fn(2) console.log(bar.a) // 2 復制代碼

用new操作符創建對象時會發生如下步驟：

創建一個全新的Object對象實例

將構造函數的執行對象賦給新生成的這個實例

這個新對象會綁定到函數調用的this

如果函數沒有返回其他對象，那么new表達式中的函數調用會自動返回這個新對象 規則：使用構造調用的時候，this會自動綁定在new期間創建的對象上

所以，new fn(2)就相當于

const newObj = new Object() newObj.a = a 復制代碼

還有一種特殊情況，就是當構造函數通過 "return" 返回的是一個對象的時候，此次運算的最終結果返回的就是這個對象，而不是新創建的對象，因此 this 在這種情況下并沒有什么用。注意，返回函數也是返回新的對象，函數對象

function fn(a) {this.a = areturn {} } const bar = new fn(2) console.log(bar.a) // undefined 復制代碼

四 window 綁定

fn() {console.dir(this.title) } const obj = {title: 'test' } fn() // undefined 復制代碼

當點的左側沒有任何東西，也沒有通過call、apply、bind方法調用，也沒有new關鍵字，this就會指向了window。

window.title = '全局' fn() {console.dir(this.title) } fn() // 全局 復制代碼

在ES5添加的嚴格模式中，this不會指向window對象，而是保持為undefined

五 四種綁定的優先規則

顯式綁定 > 隱式綁定 > 默認綁定 new綁定 > 隱式綁定 > 默認綁定

六 丟失的this

在某些情況下會丟失 this 的指向，此時，我們就需要借助 call、apply 和 bind 來改變 this 的指向問題。 示例一，當fn方法作為obj對象的屬性調用時，this指向obj對象，當另外一個變量引用fn方法時，因為它作為普通函數調用，所以this指向window對象

const obj = {title: 'test',fn: function() {console.dir(this.title)} } obj.fn() // test const getTitle = obj.fn getTitle() // undefined 復制代碼

這種方式實際就是函數調用時，并沒有上下文對象，只是對函數的引用，同樣的問題，還發生在傳入回調函數中

test(obj.fn) // 傳入函數的引用，調用時也是沒有上下文 復制代碼

示例二，即使在函數內部定義的函數，如果它作為普通對象調用，this同樣指向window對象

const obj = {title: 'test',name: '張三',fn: function() {console.dir(this.title)function getName(){console.dir(this.name)}getName()} } obj.fn() // test// undefined 復制代碼

七 練習

var xuuu = 123 function test() {var xuuu = 456this.aa = 6666 return function() {console.log(xuuu)console.log(this.aa)console.log(this.xuuu) }var sdf=new test() sdf() // 456， undefined, 123 test()() // 456,6666,123 復制代碼

結論：第一種情況的中this.aa指向sdf，return中this指向全局對象window；第二種情況中兩次this都指向window

八 箭頭函數的this

在以往的函數中，this 有各種各樣的指向(隱式綁定，顯示綁定，new 綁定, window 綁定......)，雖然靈活方便，但由于不能在定義函數時而直到實際調用時才能知道 this 指向，很容易給開發者帶來諸多困擾。比如下面的代碼

function User() {this.name = 'John'setTimeout(function greet() {console.log(`Hello, my name is ${this.name}`) // Hello, my name is console.log(this) // window}, 1000) }const user = new User() 復制代碼

如果想把greet里面的this指向user對象該怎么辦呢？ 1 使用閉包

function User(){const self = thisthis.name = 'John'setTimeout(function greet() {console.log(`Hello, my name is ${self.name}`) // Hello, my name is Johnconsole.log(self) // User {name: "John"}}, 1000) }const user = new User() 復制代碼

** 2 使用顯示綁定bind **

function User() {this.name = 'John';setTimeout(function greet() {console.log(`Hello, my name is ${this.name}`); // Hello, my name is Johnconsole.log(this); // User {name: "John"}}.bind(this)(), 1000); }const user = new User(); 復制代碼

** 利用 setTimeout 的可以傳更多參數的特性 **

function User() {this.name = 'John';setTimeout(function greet(self) {console.log(`Hello, my name is ${self.name}`); // Hello, my name isconsole.log(self); // window}, 1000, this); }const user = new User(); 復制代碼

** 箭頭函數如何解決 **

function User() {this.name = 'John';setTimeout(() => {console.log(`Hello, my name is ${this.name}`); // Hello, my name is Johnconsole.log(this); // User {name: "John"}}, 1000); }const user = new User(); 復制代碼

**箭頭函數在自己的作用域內不綁定 this，即沒有自己的 this，**如果要使用 this ，就會指向定義時所在的作用域的 this 值。在上面的代碼中即指向 User 函數的 this，而 User 函數通過 new 綁定，所以 this 實際指向 user 對象

function foo() {return () => {console.log(this.a);}; } let obj1 = {a: 2 }; let obj2 = {a: 22 }; let bar = foo.call(obj1); // foo this指向obj1 bar.call(obj2); // 輸出2 這里執行箭頭函數 并試圖綁定this指向到obj2 但并不成功 復制代碼

結論： 1、箭頭函數沒有自己的this，它的this繼承于它外面第一個不是箭頭函數的函數的this指向。 2、箭頭函數的 this 一旦綁定了上下文，就不會被任何代碼改變 3、箭頭函數使用call、apply、bind時，會自動忽略掉第一個參數 4、嚴格模式并不影響箭頭函數自己的this

九 最后的圖片

總結

以上是生活随笔為你收集整理的难缠的this的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。