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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信平臺小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了珠海免費(fèi)建站歡迎大家使用！

我們先看一段代碼：

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

執(zhí)行上面的代碼，打印的結(jié)果是：

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

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

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

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

當(dāng)執(zhí)行：

let logFrom = obj.logFrom; logFrom();

執(zhí)行結(jié)果是 undefined。

當(dāng)執(zhí)行：

obj.logFrom();

執(zhí)行結(jié)果是 BeiJing。

為什么會是這樣?

其實(shí) this  就是被「動態(tài)」綁定到執(zhí)行上下文中的一個屬性，也就是說當(dāng)構(gòu)建一個執(zhí)行上下文的時候就會綁定一個 this  屬性。主要有兩種執(zhí)行上下文：全局執(zhí)行上下文和函數(shù)執(zhí)行上下文，那么就有兩種 this，一種全局執(zhí)行上下文中的 this，另一種是函數(shù)執(zhí)行上下文中的  this。

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

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

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

使用第 1、2 這兩條可以搞定大多數(shù) 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();

打印結(jié)果為(非嚴(yán)格模式下執(zhí)行)：

結(jié)果發(fā)現(xiàn)兩個 this 并不一樣，內(nèi)部函數(shù)并不會繼承外部函數(shù)的 this。為了解決這個問題，就有了 let that = this  這樣丑陋的代碼。

當(dāng)然可以使用箭頭函數(shù)解決這個問題：

this 指向就是當(dāng)前創(chuàng)建的對象，下面代碼中  this 指的是 suyan。

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

到此，關(guān)于“怎么理解并掌握J(rèn)avaScript中的this”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！