深入理解JavaScript中的this指向

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

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

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

為什么要用this

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

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( )里面直接寫了identify( )的函數(shù)名，然而，隨著使用模式越來越復(fù)雜，顯式傳遞的上下文會讓代碼變得混亂，尤其體現(xiàn)在面向?qū)ο笾小?br>顯然，this提供了一種方式來隱式“傳遞”一個對象的引用，更加簡潔，易于復(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確實被調(diào)用了4次，但是foo.count仍然為0，顯然this指向函數(shù)本身的理解是錯誤的。

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

要明確的是，this在任何情況下都不指向函數(shù)的詞法作用域。因為，作用域“對象”無法通過JavaScript代碼訪問，它存在于JavaScript引擎內(nèi)部。
下面的代碼試圖使用this來隱式引用函數(shù)的詞法作用域，沒有成功：

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

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

this是什么

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

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

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

var a = 2;

foo(); // 2

在全局中聲明變量a = 2，然后在全局中直接調(diào)用foo( )，this指向了全局對象，得到a的值。
要注意的是，在嚴(yán)格模式（strict mood）下，如果this沒有被執(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í)行時的當(dāng)前對象是全局對象window

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

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

var a = "global";

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

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

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

3. apply / call / bind可以強制改變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ū)別在于第二個參數(shù)，call是把args全部列出來，用“,”分隔，而apply是一個類數(shù)組。call、apply是硬綁定，通過硬綁定的函數(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)部手動調(diào)用了foo.call(obj)，把foo的this強制綁定到了obj，所以后面即使又把bar( )綁定到了window，還是無法改變this指向。

4. new操作符改變this指向

在傳統(tǒng)的面向?qū)ο笳Z言中，會使用new初始化類，然而在JavaScript中new的機制和面向?qū)ο笳Z言完全不同。在js中，構(gòu)造函數(shù)只是使用new操作符時被調(diào)用的函數(shù)，它們并不屬于一個類，也不會實例化一個類。也就是說，js中，不存在所謂的“構(gòu)造函數(shù)”，只有對函數(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( )，會構(gòu)造一個新對象并把它綁定到foo( )調(diào)用中的this上。

優(yōu)先級

既然有那么多可以改變this的指向，那么它們的優(yōu)先級是怎么樣的呢，記住這句話：范圍越小，優(yōu)先級越高?？梢园凑障旅娴捻樞騺砼袛啵?/p>

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

var bar = new foo();

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

var bar = foo.call(obj);

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

var bar = obj.foo();

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

var bar = foo();

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103071.html

發(fā)表評論

登陸后可評論

0條評論

不知名網(wǎng)友

男|高級講師

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

TA的文章

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

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

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

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

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

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

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

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

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

深入理解JavaScript中的this指向

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

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

3. apply / call / bind可以強制改變this指向

4. new操作符改變this指向

相關(guān)文章

**我對JavaScript中this的一些理解**

**【Javascript】深入理解this作用域問題以及new/let/var/const對this作**

JavaScript中this指向的深入解析

深入理解 Javascript 之 this

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

發(fā)表評論

0條評論

不知名網(wǎng)友

男|高級講師

TA的文章

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

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

VRRP高可用

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

?CISCO 4500 主引擎版故障處理

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

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

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

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

深入理解JavaScript中的this指向

1. 在瀏覽器中，調(diào)用方法沒有明確對象時，this指向window

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

3. apply / call / bind可以強制改變this指向

4. new操作符改變this指向

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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

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

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