如何理解JavaScript中的this

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

this是什么？

指向函數(shù)本身？

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

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。也就是說this其實并沒有指向函數(shù)本身。

指向作用域？

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

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

foo(); // undefined

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

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

this的綁定規(guī)則

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

1.默認(rèn)綁定

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

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

// 執(zhí)行時啟用嚴(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，說明指向的確實是window對象。需要特別注意的一點是：嚴(yán)格模式下指向undefined指的是函數(shù)體內(nèi)啟用了嚴(yán)格模式，而不是調(diào)用時。

2. 隱式綁定

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

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的一個屬性進(jìn)行執(zhí)行，此時obj作為了函數(shù)的上下文，此時this指向了obj，this.a等價于obj.a。在對象屬性鏈?zhǔn)降恼{(diào)用中，只有最后一層會對調(diào)用位置產(chǎn)生影響，也就是說最后一層會影響this指向。

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

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

這是隱式綁定最常見的一個問題，隱式丟失：被隱式綁定的函數(shù)會丟失綁定對象。雖然bar是對obj.foo的一個引用，但實際上引用的還是foo函數(shù)本身，bar函數(shù)就是一個獨立函數(shù)的調(diào)用，參考第一條，此時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提供了兩個方法call和apply，傳入的第一個參數(shù)是一個對象，會把this綁定到這個對象。如果是傳入的是一個原始值（字符串、數(shù)字、布爾），會被轉(zhuǎn)換成它的對象形式（new String(), new Boolean(), new Number()）。

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

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

4. new

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

1. 創(chuàng)建一個空對象

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

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

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

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

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

優(yōu)先級

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

看完上述內(nèi)容，你們對如何理解JavaScript中的this有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。