Javascript的this理解

王笑朝發布于2019-08-23 16:17 / 1212人閱讀

摘要：一默認綁定默認綁定默認綁定是指在非嚴格模式下，且沒有使用別的綁定規則時，根據函數調用調用棧的上下文來綁定對象全局對象。把函數傳入語言內置函數。使用時盡量避免混用，否則會造成難以維護的后果。

在理解javascript的this之前，首先先了解一下作用域。

作用域分為兩種：

1、詞法作用域：引擎在當前作用域或者嵌套的子作用域查找具有名稱標識符的變量。（引擎如何查找和在哪查找。定義過程發生在代碼書寫階段）
2、動態作用域：在運行時被動態確定的作用域。

詞法作用域和動態作用域的區別是：詞法作用域是在寫代碼或定義時確定的；動態作用域是在運行時確定的。

this的綁定規則

this是在調用時被綁定，取決于函數的調用位置。由此可以知道，一般情況下（非嚴格模式下），this都會根據函數調用（調用棧）的上下文來綁定對象。

一、默認綁定

默認綁定：默認綁定是指在非嚴格模式下，且沒有使用別的綁定規則時，this根據函數調用（調用棧）的上下文來綁定對象（全局對象）。（嚴格模式下則綁定undefined）

舉個栗子：

function foo() {
    console.log(this.a);
};
function bar() {
    var a = 3;
    foo();
}
var a = 2;
bar();  //調用棧在全局作用域，this綁定全局對象

運行結果為： 2
//加上"use strict"運行結果則會變成this is undefined

這里的函數調用時，使用了默認綁定，函數調用（調用棧）的上下文是全局作用域，因此this綁定了全局對象（global）。

eg2:
function foo() {
    console.log(this.a)
};
var a = 2;
(function() {
    "use strict"
    foo();
})();

運行結果為： 2

這里需要注意：對于默認綁定，決定this綁定對象的不是調用位置是否處于嚴格模式，而是函數體是否處于嚴格模式（函數體處于嚴格模式則this綁定undefined；否則this綁定全局對象）。另外：嚴格模式和非嚴格模式雖然有可能可以綁定，但是最好不混用。

間接引用一般也是會應用默認綁定規則。

eg:
function foo() {
    console.log(this.a);
};
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo();   //3
(p.foo = o.foo)();  //2

賦值表達式 p.foo = o.foo的返回值是直接引用目標函數foo。

二、隱式綁定

隱式綁定：由上下文對象調用，綁定到上下文對象。

舉個栗子：

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

這段代碼中，foo()被當做引用屬性添加到obj對象中，obj調用這個引用屬性函數時，會使用該引用屬性上下文，this會被綁定到obj對象。（這個函數嚴格來說不屬于obj對象，只是作為引用屬性）。屬于隱式綁定。

而下面foo()函數的直接執行，并不是obj對象引用，所以上下文對象是全局對象。故this綁定了undefined。屬于默認綁定。

對象引用鏈中只有上一層或者說最后一層在調用位置中起作用。

注意：

隱式綁定的函數會丟失綁定對象。此時它會應用默認綁定，將this綁定到全局對象或者undefined上，取決于是否是嚴格模式。
eg:

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

運行結果："biubiubiu"

解析：看似bar是obj.foo的一個引用，實際上bar是直接引用了函數foo，是一個單純的函數調用，故實為默認綁定。

參數傳遞就是隱式賦值，因此傳入函數時也會被隱式賦值。
eg:

function foo() {
    console.log(this.a);
};
var obj = {
    a: 2,
    foo: foo
};
function bar(fn) {
    fn();
};
var a = "biubiubiu";
bar(obj.foo);

運行結果: "biubiubiu"

解析：實際上參數也是隱式賦值，但是參數傳入函數中，并在函數中執行。此時也是直接引用了函數foo，因此也是單純的函數調用，采用了默認綁定。

把函數傳入語言內置函數。（與上面情況基本相似，將自己聲明函數改成語言內置函數）回調函數丟失this的情況比較常見，況且還有調用回調函數的函數可能還會修改this。

三、顯式綁定

顯式綁定：直接將this綁定到指定對象上。Javascript中絕大多數函數和自己所創建的函數都可以使用這兩種顯式綁定的方法。

1、.call()
2、.apply()
這兩種綁定方法，第一個參數是this綁定的對象。（如果傳入的參數是原始值（字符串類型、布爾類型、數字類型），這個原始值就會被轉成對象形式（new String、new Boolean、new Number）這個稱為：裝箱）

舉個栗子：

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

運行結果： 2

然鵝，顯示綁定并不能解決綁定丟失的問題。這個時候來了一位新朋友 -- 硬綁定（bind）。

3、.bind() （硬綁定是常見場景，故es5提供了該內置方法 Function.prototype.bind。）
bind()會返回一個新編碼函數，把this綁定在指定參數上，并調用函數。

舉個栗子：

function foo(e) {
    console.log(this.a + e);
    return this.a + e;
};
var obj = {
    a: 2
}
var bar = foo.bind(obj); //新編碼函數
var b = bar(3); // 2 3
console.log(b); // 5

bind()還有一個功能：將除了第一個用于綁定this的參數之外的其他參數傳給下層的函數（部分應用，是“柯里化”的一種）。

這里涉及到一個概念：把null或者undefined作為this的綁定對象傳入call、apply、bind，這些值在調用的時候會被忽略，實際應用默認綁定規則。
應用場景：
1、使用apply()展開一個數組，并作為參數傳遞給一個函數。
2、bind()對參數進行柯里化（預先設置一些參數）。

舉個栗子：

function foo(a,b) {
    console.log("a:" + a + ",b:" + b);
};
//數組“展開”成參數
foo.apply(null,[2,3]);  //a:2,b:3
//bind()柯里化
var bar = foo.bind(null,2);
bar(3);  //a:2,b:3

解析：傳入一個參數作為this綁定對象，如果不傳則使用占位符（null），此時會使用默認綁定規則。

上面這個例子可能會產生一定的副作用，如果需要運用這種場景并且更加安全?？梢詣摻ㄒ粋€空對象（可以用任意喜歡的名字來命名）。

var ? = Object.create(null);
//上面這個例子就可以改寫為：
foo.apply(?,[2,3]); //a:2,b:3
var bar = foo.bind(?,2);
bar(3);  //a:2,b:3

注意：硬綁定之后不能使用隱式綁定和顯式綁定對this進行修改
在這里介紹一種軟綁定的方法softBind()，檢查this綁定到全局對象或者undefined后，綁定this到指定的默認對象。綁定后效果和硬綁定一樣，但是保留隱式綁定或者顯式綁定修改this的能力。

四、new綁定

Javascript中的new機制與面向類語言的完全不同。在Javascript中，構造函數只是一些使用new操作符時被調用的函數，不屬于一個類，也不會實例化一個類。稱為對函數的“構造調用”。

舉個栗子：

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

使用new的過程會創建一個全新的對象，this會綁定這個新對象。如果函數沒有返回其他對象，則new表達式函數調用會返回該新對象。（這個新對象會連接prototype）

四種綁定規則的優先級為：new>顯式>隱式>默認 箭頭函數

箭頭函數是根據外層作用域（函數或全局）來決定this。（詞法作用域取代this機制）
箭頭函數this會綁定調用時的對象，且箭頭函數的綁定無法修改（new也不行）。

其實可以理解為，箭頭函數的this在詞法上繼承的是它所在的作用域（函數或全局）的this，而它繼承的函數作用域的this綁定的是在該函數調用上下文對象，所以箭頭函數的this間接的綁定在調用上下文對象。

簡述：箭頭函數this（綁定作用域this）-- 作用域this（綁定在調用上下文對象）。

故：箭頭函數this == 調用的上下文對象

舉個栗子：

function foo() {
    setTimeout(function() {
        //這里的this在詞法上繼承自foo()
        console.log(this.a);
    },100);
};
var obj = { a: 2 };
foo.call(obj);  //2

其實這個栗子也等價于：

function foo() {
    var that = this;  //lexical capture of this
    setTimeout(function() {
        console.log(self.a)
    },100);
}
...與上面一樣

所以，有兩種風格：this風格（四種規則）和詞法作用域風格（that = this和箭頭函數）可供使用。使用時盡量避免混用，否則會造成難以維護的后果。

云服務器 GPU云服務器 javascript的this javaScript中的this javascript中this詳解 javascript理解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102864.html

我對JavaScript中this的一些理解

摘要：匿名函數的執行環境具有全局性，因此它的對象通常指向。如果對此有疑惑，可以看知乎上的答案知乎匿名函數的指向為什么是作為對象方法的調用，指向該對象當函數作為某個對象的方法調用時，就指這個函數所在的對象。因為日常工作中經常使用到this，而且在JavaScript中this的指向問題也很容易讓人混淆一部分知識。這段時間翻閱了一些書籍也查閱了網上一些資料然后結合自己的經驗，為了能讓自...

focusj 2019-08-23 15:23 評論0 收藏0
理解 JavaScript this

摘要：回調函數在回調函數中的指向也會發生變化。在閉包回調函數賦值等場景下我們都可以利用來改變的指向，以達到我們的預期。文章參考系列文章理解閉包理解執行棧理解作用域理解數據類型與變量原文發布在我的公眾號，點擊查看。這是本系列的第 5 篇文章。還記得上一篇文章中的閉包嗎？點擊查看文章理解 JavaScript 閉包。在聊 this 之前，先來復習一下閉包： var name = Nei...

zombieda 2019-08-23 14:10 評論0 收藏0
javascript技術難點（三）之this、new、apply和call詳解

摘要：第四點也要著重講下，記住構造函數被操作，要讓正常作用最好不能在構造函數里 4) this、new、call和apply的相關問題講解this指針的原理是個很復雜的問題，如果我們從javascript里this的實現機制來說明this，很多朋友可能會越來越糊涂，因此本篇打算換一個思路從應用的角度來講解this指針，從這個角度理解this指針更加有現實意義。下面我們看看在ja...

ghnor 2019-08-21 10:27 評論0 收藏0
加深對 JavaScript This 的理解

摘要：使用來調用函數，會自動執行下面操作創建一個全新的對象。所以如果是一個函數的話，會是這樣子的創建一個新對象連接新對象與函數的原型執行函數，改變指向新的對象所以，在使用來調用函數時候，我們會構造一個新對象并把它綁定到函數調用中的上。歡迎來我的博客閱讀：《加深對 JavaScript This 的理解》我相信你已經看過很多關于 JavaScript 的 this 的談論了，既然你點進來...

PiscesYE 2019-08-20 18:02 評論0 收藏0
理解 JavaScript call()/apply()/bind()

摘要：理解文章中已經比較全面的分析了在中的指向問題，用一句話來總結就是的指向一定是在執行時決定的，指向被調用函數的對象。與和直接執行原函數不同的是，返回的是一個新函數。這個新函數包裹了原函數，并且綁定了的指向為傳入的。理解 JavaScript this 文章中已經比較全面的分析了 this 在 JavaScript 中的指向問題，用一句話來總結就是：this 的指向一定是在執行時決定的，...

duan199226 2019-08-23 14:27 評論0 收藏0
javascript的this的理解

摘要：的關鍵字總是讓人捉摸不透，關鍵字代表函數運行時，自動生成的一個內部對象，只能在函數內部使用，因為函數的調用場景不同，的指向也不同。其實只要理解語言的特性就很好理解。個人對中的關鍵字的理解如上，如有不正，望指正，謝謝。 javascript的this關鍵字總是讓人捉摸不透，this關鍵字代表函數運行時，自動生成的一個內部對象，只能在函數內部使用，因為函數的調用場景不同，this的指向也不...

jimhs 2019-08-21 10:56 評論0 收藏0