深入理解JavaScript中的this指向

不知名網(wǎng)友發(fā)布于2019-08-23 16:28 / 909人閱讀

摘要：和作用域判別失敗相關(guān)，而代表作用域判別成功，但是對(duì)結(jié)果的操作是非法的不合理的。在中，構(gòu)造函數(shù)只是使用操作符時(shí)被調(diào)用的函數(shù)，它們并不屬于一個(gè)類，也不會(huì)實(shí)例化一個(gè)類。也就是說(shuō)，中，不存在所謂的構(gòu)造函數(shù)，只有對(duì)函數(shù)的構(gòu)造調(diào)用。

與其他語(yǔ)言相比，js中的this有所不同，也是比較頭疼的問(wèn)題。在參考了一些資料后，今天，就來(lái)深入解析一下this指向問(wèn)題，有不對(duì)的地方望大家指出。

為什么要用this

對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)，this是比較復(fù)雜的機(jī)制，那么為什么要花大量時(shí)間來(lái)學(xué)習(xí)呢，先來(lái)看一段代碼。
如果不使用this，要給identify( )和speak( )顯式傳入一個(gè)對(duì)象：

function identify(context) {
    return context.name.toUpperCase();
}
function speak(context) {
    var greeting = "Hello, I"m" + identify(context);
    console.log(greeting);
}
identify(you);
speak(me);

可以看到，speak( )里面直接寫(xiě)了identify( )的函數(shù)名，然而，隨著使用模式越來(lái)越復(fù)雜，顯式傳遞的上下文會(huì)讓代碼變得混亂，尤其體現(xiàn)在面向?qū)ο笾小?br>顯然，this提供了一種方式來(lái)隱式“傳遞”一個(gè)對(duì)象的引用，更加簡(jiǎn)潔，易于復(fù)用。

this的誤解 1. this指向函數(shù)本身

記錄函數(shù)foo被調(diào)用的次數(shù)：

function foo(num) {
    console.log("foo:" + num);
    
    // 記錄次數(shù)
    this.count++;
}

foo.count = 0;

var i;

for (i = 0; i < 10; i++) {
    if (i > 5) {
        foo(i);
    }
}

// foo: 6
// foo: 7
// foo: 8
// foo: 9

//foo被調(diào)用了多少次？
console.log(foo.count); // 0

從前兩次的console.log( )可以看出，foo確實(shí)被調(diào)用了4次，但是foo.count仍然為0，顯然this指向函數(shù)本身的理解是錯(cuò)誤的。

2. this指向函數(shù)作用域

要明確的是，this在任何情況下都不指向函數(shù)的詞法作用域。因?yàn)椋?strong>作用域“對(duì)象”無(wú)法通過(guò)JavaScript代碼訪問(wèn)，它存在于JavaScript引擎內(nèi)部。
下面的代碼試圖使用this來(lái)隱式引用函數(shù)的詞法作用域，沒(méi)有成功：

function foo() {
    var a = 2;
    this.bar();
}
function bar() {
    console.log(this.a);
}
foo(); // ReferenceError: a is not defined

直接報(bào)出了訪問(wèn)不到foo( )中的a。ReferenceError和作用域判別失敗相關(guān)，而TypeError代表作用域判別成功，但是對(duì)結(jié)果的操作是非法的、不合理的。

this是什么

排除了以上兩個(gè)誤解之后，來(lái)看一下this到底是什么。
this是運(yùn)行時(shí)綁定的，它和函數(shù)聲明的位置沒(méi)有任何關(guān)系，只取決于函數(shù)的調(diào)用方式。當(dāng)一個(gè)函數(shù)被調(diào)用時(shí)，會(huì)創(chuàng)建一個(gè)活動(dòng)記錄（執(zhí)行上下文），這個(gè)記錄包含函數(shù)在哪里被調(diào)用，函數(shù)的調(diào)用方式、傳入的參數(shù)等，this就是這個(gè)記錄的一個(gè)屬性，在函數(shù)執(zhí)行的過(guò)程中用到。即，this總是指向調(diào)用它所在方法的對(duì)象

1. 在瀏覽器中，調(diào)用方法沒(méi)有明確對(duì)象時(shí)，this指向window

function foo() {
    console.log(this.a);
}

var a = 2;

foo(); // 2

在全局中聲明變量a = 2，然后在全局中直接調(diào)用foo( )，this指向了全局對(duì)象，得到a的值。
要注意的是，在嚴(yán)格模式（strict mood）下，如果this沒(méi)有被執(zhí)行環(huán)境定義，那它將綁定為undefined。

function foo() {
    "use strict";
    
    console.log(this.a);
}

var a = 2;

foo(); // TypeError: this is undefined

在嚴(yán)格模式下，調(diào)用foo( )不影響this綁定。

function foo() {
    console.log(this.a);
}

var a = 2;

(function() {
    "use strict";
    
    foo(); // 2
})();

2. 在瀏覽器中，setTimeout、setInterval和匿名函數(shù)執(zhí)行時(shí)的當(dāng)前對(duì)象是全局對(duì)象window

function foo() {
    console.log(this.a);
}

var obj = {
    a: 2,
    foo: foo
};

var a = "global";

setTimeout(obj.foo, 100); // "global"

JavaScript中的setTimeout( )的實(shí)現(xiàn)和下面?zhèn)未a相似：

function setTimeout(fn, delay) {
    // 等待delay毫秒
    fn(); // 調(diào)用函數(shù)
}

3. apply / call / bind可以強(qiáng)制改變this指向

function foo() {
    console.log(this.a);
}

var obj = {
    a: 2
};

foo.call(obj); // 2
foo.apply(obj); // 2
foo.bind(obj); // 2

call和apply的區(qū)別在于第二個(gè)參數(shù)，call是把a(bǔ)rgs全部列出來(lái)，用“,”分隔，而apply是一個(gè)類數(shù)組。call、apply是硬綁定，通過(guò)硬綁定的函數(shù)不能再修改它的this。

function foo() {
    console.log(this.a);
}

var obj = {
    a: 2
};

var bar = function() {
    foo.call(obj);
}

bar(); // 2
setTimeout(bar, 100); // 2

bar.call(window); // 2

函數(shù)foo( )內(nèi)部手動(dòng)調(diào)用了foo.call(obj)，把foo的this強(qiáng)制綁定到了obj，所以后面即使又把bar( )綁定到了window，還是無(wú)法改變this指向。

4. new操作符改變this指向

在傳統(tǒng)的面向?qū)ο笳Z(yǔ)言中，會(huì)使用new初始化類，然而在JavaScript中new的機(jī)制和面向?qū)ο笳Z(yǔ)言完全不同。在js中，構(gòu)造函數(shù)只是使用new操作符時(shí)被調(diào)用的函數(shù)，它們并不屬于一個(gè)類，也不會(huì)實(shí)例化一個(gè)類。也就是說(shuō)，js中，不存在所謂的“構(gòu)造函數(shù)”，只有對(duì)函數(shù)的“構(gòu)造調(diào)用”。

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

var bar = new foo(2);
console.log(bar.a); // 2

使用new調(diào)用foo( )，會(huì)構(gòu)造一個(gè)新對(duì)象并把它綁定到foo( )調(diào)用中的this上。

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

既然有那么多可以改變this的指向，那么它們的優(yōu)先級(jí)是怎么樣的呢，記住這句話：范圍越小，優(yōu)先級(jí)越高。可以按照下面的順序來(lái)判斷：

判斷函數(shù)是否在new中調(diào)用過(guò)：

var bar = new foo();

判斷函數(shù)是否通過(guò)call、apply、bind綁定過(guò)：

var bar = foo.call(obj);

判斷函數(shù)是否在某個(gè)上下文對(duì)象中調(diào)用過(guò)：

var bar = obj.foo();

如果以上情況均不存在，那么在嚴(yán)格模式下，綁定到undefined，否則綁定到全局對(duì)象：

var bar = foo();

GPU云服務(wù)器云服務(wù)器深入理解javascript javaScript中的this 改變this指向 this的指向

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/103071.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

不知名網(wǎng)友

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Oracle數(shù)據(jù)庫(kù)4031故障分析

閱讀 3792·2023-01-11 11:02
Oceanbase新版本復(fù)合分區(qū)添加分區(qū)操作

閱讀 4299·2023-01-11 11:02
VRRP高可用

閱讀 3121·2023-01-11 11:02
Docker技術(shù)之構(gòu)建鏡像和網(wǎng)絡(luò)模式解析

閱讀 5231·2023-01-11 11:02
?CISCO 4500 主引擎版故障處理

閱讀 4793·2023-01-11 11:02
大數(shù)據(jù)開(kāi)發(fā)系列五：kafka& zookeeper 配置kerberos認(rèn)證

閱讀 5568·2023-01-11 11:02
自研實(shí)時(shí)計(jì)算模塊介紹及運(yùn)維數(shù)據(jù)應(yīng)用場(chǎng)景實(shí)施

閱讀 5371·2023-01-11 11:02
DataX的限速與調(diào)優(yōu)

閱讀 4070·2023-01-11 11:02

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

深入理解JavaScript中的this指向

1. 在瀏覽器中，調(diào)用方法沒(méi)有明確對(duì)象時(shí)，this指向window

2. 在瀏覽器中，setTimeout、setInterval和匿名函數(shù)執(zhí)行時(shí)的當(dāng)前對(duì)象是全局對(duì)象window

3. apply / call / bind可以強(qiáng)制改變this指向

4. new操作符改變this指向

相關(guān)文章

**我對(duì)JavaScript中this的一些理解**

**【Javascript】深入理解this作用域問(wèn)題以及new/let/var/const對(duì)this作**

JavaScript中this指向的深入解析

深入理解 Javascript 之 this

**深入理解JavaScript（三）：獲取數(shù)組中的最大值方法（this,apply）**

發(fā)表評(píng)論

0條評(píng)論

不知名網(wǎng)友

男|高級(jí)講師

TA的文章

Oracle數(shù)據(jù)庫(kù)4031故障分析

Oceanbase新版本復(fù)合分區(qū)添加分區(qū)操作

VRRP高可用

Docker技術(shù)之構(gòu)建鏡像和網(wǎng)絡(luò)模式解析

?CISCO 4500 主引擎版故障處理

大數(shù)據(jù)開(kāi)發(fā)系列五：kafka& zookeeper 配置kerberos認(rèn)證

自研實(shí)時(shí)計(jì)算模塊介紹及運(yùn)維數(shù)據(jù)應(yīng)用場(chǎng)景實(shí)施

DataX的限速與調(diào)優(yōu)

最新活動(dòng)