怎么理解并掌握JavaScript中的this

這篇文章主要介紹“怎么理解并掌握JavaScript中的this”，在日常操作中，相信很多人在怎么理解并掌握JavaScript中的this問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么理解并掌握JavaScript中的this”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

我們先看一段代碼：

let from = 'WuHan';  var obj = {     from: 'BeiJing',     logFrom: function () {         console.log(from);     } };  let logFrom = obj.logFrom; logFrom(); obj.logFrom();

執行上面的代碼，打印的結果是：

打印結果都是 WuHan，這個例子迷惑的地方主要是下面這兩個 from 的定義，第一個屬于全局變量，第二個屬于局部變量，logFrom 函數使用的是全局的  from 還是 obj 對象內部的 from。答案是「使用全局的 from」。

那如果想使用 obj 對象內部定義的 from 該咋么做呢?這就需要進入我們今天要討論的話題 「this 機制」，困擾讀者比較深的是 this  究竟代表誰。記住一句話「this 始終代表的是一個對象」。

當把上面的代碼換成( 把打印語句 console.log(from) 換成 console.log(this.from) )：

var obj = {     from: 'BeiJing',     logFrom: function () {         console.log(this.from);     } };

當執行：

let logFrom = obj.logFrom; logFrom();

執行結果是 undefined。

當執行：

obj.logFrom();

執行結果是 BeiJing。

為什么會是這樣?

其實 this  就是被「動態」綁定到執行上下文中的一個屬性，也就是說當構建一個執行上下文的時候就會綁定一個 this  屬性。主要有兩種執行上下文：全局執行上下文和函數執行上下文，那么就有兩種 this，一種全局執行上下文中的 this，另一種是函數執行上下文中的  this。

(1) 當在全局執行一個函數的時候(通過括號的方式執行)，this 指向全局對象，在瀏覽器中，如果在嚴格模式下 this 為  undefined，在非嚴格模式下，this 為 window。比如 let logFrom = obj.logFrom，此時變量 logFrom  屬于全局變量，通過全局調用一個函數，this 為 window(這里屬于非嚴格模式)，window 沒有屬性 from，故結果為 undefined。

這里給大家留個思考題，如果把第一行代碼中的 let 換成 var，結果是什么?

(2) 當通過某個對象調用一個方法的時候，this 為當前的對象。比如通過 obj 調用方法 logFrom，this 為 obj，所以打印結果為  BeiJing。

使用第 1、2 這兩條可以搞定大多數 this 的問題，但是有一種情況需要留意。比如下面的代碼：

let lefex = {     name: 'suyan',     age: 0,     addAge: function () {         console.log('outer this = ', this);         this.age += 2;         setTimeout(function () {             console.log('inner this = ', this);             this.age += 1;         }, 100);     } }; lefex.addAge();

打印結果為(非嚴格模式下執行)：

結果發現兩個 this 并不一樣，內部函數并不會繼承外部函數的 this。為了解決這個問題，就有了 let that = this  這樣丑陋的代碼。

當然可以使用箭頭函數解決這個問題：

this 指向就是當前創建的對象，下面代碼中  this 指的是 suyan。

function Person(name) {     this.name = name;     console.log(this); } let suyan = new Person('suyan');

到此，關于“怎么理解并掌握JavaScript中的this”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！