今天就跟大家聊聊有關(guān)如何理解JavaScript中的this，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

海南州網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)于2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

this是什么？

指向函數(shù)本身？

光從字面意思上來(lái)看，很容易讓人覺得this就是指向函數(shù)本身，事實(shí)上真是這樣嗎？我們可以看一個(gè)例子。

function foo() {
    this.count = this.count ? this.count + 1 : 1;
}

for (let i = 0; i < 5; i++) {
    foo();
}
console.log(foo.count); // undefined

可以看到，foo.count輸出的并不是我們期待的5，而是一開始賦值的0。也就是說(shuō)this其實(shí)并沒有指向函數(shù)本身。

指向作用域？

還有一種比較常見的誤解是，this指向了函數(shù)的作用域。

function foo() {
    var a = 2;
    bar();
}
function bar() {
    console.log(this.a);
}

foo(); // undefined

這段代碼中，bar在foo中運(yùn)行，輸出this.a得到的卻是undefined。也就是說(shuō)this也不是指向函數(shù)的作用域的。

這也不是，那也不是，this到底是什么呢？在函數(shù)執(zhí)行過程中，會(huì)創(chuàng)建一個(gè)執(zhí)行上下文（一個(gè)記錄），this就是這個(gè)上下文中的一個(gè)屬性，在執(zhí)行過程中用到。而this的指向則是取決于函數(shù)在哪里被調(diào)用。

this的綁定規(guī)則

this的綁定有四條可以遵循的規(guī)則，下面將一一介紹。

1.默認(rèn)綁定

獨(dú)立函數(shù)調(diào)用，非嚴(yán)格模式下，指向window；嚴(yán)格模式下指向undefined。 這里說(shuō)的獨(dú)立函數(shù)可以理解成除開后面三種情況的一般函數(shù)調(diào)用。

// 非嚴(yán)格模式
var name = 'Willem';
function foo() {
    console.log(this.name);
}
foo(); // Willem

// 執(zhí)行時(shí)啟用嚴(yán)格模式
(function() {
    'use strict';
    foo(); // Willem
    bar(); // Cannot read property 'name' of undefined
})();

// 函數(shù)體使用嚴(yán)格模式
function bar() {
    'use strict';
    console.log(this.name);
}

上述代碼中，分別在普通環(huán)境中輸出Willem，說(shuō)明指向的確實(shí)是window對(duì)象。需要特別注意的一點(diǎn)是：嚴(yán)格模式下指向undefined指的是函數(shù)體內(nèi)啟用了嚴(yán)格模式，而不是調(diào)用時(shí)。

2. 隱式綁定

隱式綁定說(shuō)的是，在函數(shù)執(zhí)行時(shí)，是否被某個(gè)對(duì)象擁有或包含。換句話說(shuō)，在函數(shù)運(yùn)行時(shí)，是否是作為某個(gè)對(duì)象的屬性的方式運(yùn)行的，這樣說(shuō)還是不是很清楚，來(lái)個(gè)栗子：

function foo() {
    console.log(this.a);
}
var a = 1;
var obj = {
    a: 2,
    foo
};
obj.foo(); // 2
var obj2 = {
    a: 3,
    obj
};
obj2.obj.foo(); // 2

示例中，foo被當(dāng)做了obj的一個(gè)屬性進(jìn)行執(zhí)行，此時(shí)obj作為了函數(shù)的上下文，此時(shí)this指向了obj，this.a等價(jià)于obj.a。在對(duì)象屬性鏈?zhǔn)降恼{(diào)用中，只有最后一層會(huì)對(duì)調(diào)用位置產(chǎn)生影響，也就是說(shuō)最后一層會(huì)影響this指向。

有很多前端的小伙伴面試時(shí)或許還見過這樣的題：

function foo() {
    console.log(this.a);
}
var a = 1;
var obj = {
    a: 2,
    foo
};
var bar = obj.foo;
bar(); // 1

這是隱式綁定最常見的一個(gè)問題，隱式丟失：被隱式綁定的函數(shù)會(huì)丟失綁定對(duì)象。雖然bar是對(duì)obj.foo的一個(gè)引用，但實(shí)際上引用的還是foo函數(shù)本身，bar函數(shù)就是一個(gè)獨(dú)立函數(shù)的調(diào)用，參考第一條，此時(shí)this指向了window|undefined。

還有一種經(jīng)典的回調(diào)函數(shù)的this指向問題也是隱式丟失。

function foo() {
    console.log(this.a);
}
function doFoo(fn) {
    fn();
}
var a = 1;
var obj = {
    a: 2,
    foo
};
doFoo(obj.foo); // 1

小結(jié)：在隱式綁定中，賦值的情況下（回調(diào)是隱式賦值）需要特別注意隱式丟失的問題 。

3. 顯示綁定

JavaScript中的Function提供了兩個(gè)方法call和apply，傳入的第一個(gè)參數(shù)是一個(gè)對(duì)象，會(huì)把this綁定到這個(gè)對(duì)象。如果是傳入的是一個(gè)原始值（字符串、數(shù)字、布爾），會(huì)被轉(zhuǎn)換成它的對(duì)象形式（new String(), new Boolean(), new Number()）。

function foo() {
    console.log(this.a);
}
var obj = {
    a: 1
};
foo.call(obj); // 1

雖然我們可以使用call和apply顯式指定this的指向，但是還是會(huì)存在丟失綁定的問題?？梢酝ㄟ^所謂的硬綁定（bind函數(shù)）來(lái)解決，這里就不過多贅述了。

4. new

最后要介紹的是使用new來(lái)做this的綁定的修改，有手動(dòng)實(shí)現(xiàn)過new的童鞋應(yīng)該比較清楚，js中的new和其他語(yǔ)言的new完全不同。
new的執(zhí)行過程：

1. 創(chuàng)建一個(gè)空對(duì)象

2. 當(dāng)前空對(duì)象執(zhí)行原型對(duì)接

3. 返回函數(shù)執(zhí)行結(jié)果或者當(dāng)前這個(gè)空對(duì)象

function Foo(a) {
    this.a = a;
}

var bar = new Foo(2);
bar.a; // 2

使用 new 來(lái)調(diào)用函數(shù)時(shí)，我們會(huì)構(gòu)造一個(gè)新對(duì)象并把它綁定到 函數(shù)調(diào)用中的 this上。

優(yōu)先級(jí)

最后簡(jiǎn)單說(shuō)一下優(yōu)先級(jí)的關(guān)系：new > 顯示綁定 > 隱式綁定 > 默認(rèn)綁定。

看完上述內(nèi)容，你們對(duì)如何理解JavaScript中的this有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。