Js中this關鍵字的指向

scq000 發布于2019-08-19 17:54 / 736人閱讀

摘要：而中在運行期進行綁定的，這是中關鍵字具備多重含義的本質原因。那么可解釋為函數調用是用進行調用的么這個明顯不是，進入否分支，即函數是否用進行調用函數是用進行調用的，即進入是分支，即這里的指向中之前的對象所以

1.前言

在主流的面向對象的語言中（例如Java,C#等)，this 含義是明確且具體的，即指向當前對象，一般在編譯期綁定。而 JavaScript 中this 在運行期進行綁定的，這是JavaScript 中this 關鍵字具備多重含義的本質原因。
JavaScript 中的 this 可以是全局對象、當前對象或者任意對象，這完全取決于函數的調用方式。

2.JavaScript this決策樹

3.實例說明

例1.

var point = { 
    x : 0, 
    y : 0, 
    moveTo : function(x, y) { 
        this.x = this.x + x; 
        this.y = this.y + y; 
    } 
};
point.moveTo(1,1); //this 綁定到當前對象,即point對象

圖解point.moveTo函數的this指向什么的解析圖如下圖所示:

例2：

function func(x) { 
    this.x = x; 
} 
func(5); //this是全局對象window，x為全局變量
x;//x => 5

圖解func函數的this指向什么的解析圖如下圖所示：

例3:

var point = { 
    x : 0, 
    y : 0, 
    moveTo : function(x, y) { 
    // 內部函數
        var moveX = function(x) { 
            this.x = x;//this 指向什么？window
        }; 
    // 內部函數
        var moveY = function(y) { 
            this.y = y;//this 指向什么？window
        }; 
    moveX(x); 
    moveY(y); 
    } 
}; 
point.moveTo(1,1); 
point.x; //=>0 
point.y; //=>0 
x; //=>1 
y; //=>1

說明：
point.moveTo(1,1)函數實際內部調用的是moveX()和moveY()函數, moveX()函數內部的this在 “JavaScript this決策樹“中進行判定的過程是這樣的：
1）moveX(1)函數調用是用new進行調用的么？這個明顯不是，進入“否”分支，即函數是否用dot(.)進行調用？；
2）moveX(1)函數不是用dot(.)進行調用的，即進入“否”分支，即這里的this指向全局變量window，那么this.x實際上就是window.x;

例4.作為構造函數調用的例子：

function Point(x,y){ 
    this.x = x; // this ?
    this.y = y; // this ?
}
var np=new Point(1,1);
np.x;//1
var p=Point(2,2);
p.x;//error, p是一個空對象undefined
window.x;//2

說明：
Point(1,1)函數在var np=new Point(1,1)中的this在 “JavaScript this決策樹“中進行判定的過程是這樣的：
1）var np=new Point(1,1)調用是用new進行調用的么？這個明顯是，進入“是”分支，即this指向np；
2）那么this.x=1，即np.x=1；
Point(2,2)函數在var p= Point(2,2)中的this在 “JavaScript this決策樹“中進行判定的過程是這樣的：
1）var p= Point(2,2)調用是用new進行調用的么？這個明顯不是，進入“否”分支，即函數是否用dot(.)進行調用？；
2）Point(2,2)函數不是用dot(.)進行調用的？判定為否，即進入“否”分支，即這里的this指向全局變量window，那么this.x實際上就是window.x;
3）this.x=2即window.x=2.

例5.用call 和apply進行調用的例子：

function Point(x, y){ 
    this.x = x; 
    this.y = y; 
    this.moveTo = function(x, y){ 
        this.x = x; 
        this.y = y; 
    }; 
} 
var p1 = new Point(0, 0); 
var p2 = {x: 0, y: 0}; 
p1.moveTo.apply(p2, [10, 10]);//apply實際上為p2.moveTo(10,10)
p2.x//10

說明：
apply 和 call 這兩個方法允許切換函數執行的上下文環境（context），即 this 綁定的對象。
p1.moveTo.apply(p2,[10,10])實際上是p2.moveTo(10,10)。那么p2.moveTo(10,10)可解釋為：
1）p2.moveTo(10,10)函數調用是用new進行調用的么？這個明顯不是，進入“否”分支，即函數是否用dot(.)進行調用？；
2）p2.moveTo(10,10)函數是用dot(.)進行調用的，即進入“是”分支，即這里的this指向p2.moveTo(10,10)中.之前的對象p2,所以p2.x=10;

云服務器 GPU云服務器 this的指向改變this指向 js 中關鍵字 jsp關鍵字this

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

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

JS 中的this指向

摘要：當碰到時呵呵再看一個呵呵再來呵呵呵呵呵呵呵呵什么意思呢如果返回值是一個對象，那么指向的是構造函數的實例但是并沒有被返回，如果返回值不是一個對象那么還是指向構造函數創建的實例。為什么要學習this？如果你學過面向對象編程，那你肯定知道干什么用的，如果你沒有學過，那么暫時可以不用看這篇文章，當然如果你有興趣也可以看看，畢竟這是js中必須要掌握的東西。 1. this指向調用他的對象首先...

KavenFan 2019-08-22 11:14 評論0 收藏0
JS 中 this 關鍵字詳解

摘要：首先，必須搞清楚在里面，函數的幾種調用方式普通函數調用作為方法來調用作為構造函數來調用使用方法來調用方法箭頭函數但是不管函數是按哪種方法來調用的，請記住一點誰調用這個函數或方法關鍵字就指向誰。本文主要解釋在JS里面this關鍵字的指向問題(在瀏覽器環境下)。首先，必須搞清楚在JS里面，函數的幾種調用方式: 普通函數調用作為方法來調用作為構造函數來調用使用apply/call...

zoomdong 2019-08-21 10:36 評論0 收藏0
JS中this關鍵字改變指向的三種方法（apply、call、bind）

摘要：函數的幾種調用方式普通函數調用作為方法來調用作為構造函數來調用使用方法來調用方法箭頭函數但是不管函數是按哪種方法來調用的，都需要記住一點誰調用這個函數或方法關鍵字就指向誰。作為構造函數來調用構造函數出來的實例，指向這個實例對象。首先，了解一下this關鍵字。this關鍵字就涉及到函數調用的內容。函數的幾種調用方式: 1 普通函數調用2 作為方法來調用3 作為構造函數來調用4 使用ap...

shiina 2019-08-26 13:51 評論0 收藏0
詳解js和jquery里的this關鍵字

摘要：出于這個原因，該函數返回的，所以在這里指的是，所以返回的是第一個說明關鍵字通常在對象的構造函數中使用，用來引用對象。重寫無法重寫，因為它是一個關鍵字。結論，表示當前的上下文對象是一個對象，可以調用對象所擁有的屬性，方法。在《javaScript語言精粹》這本書中，把 this 出現的場景分為四類，簡單的說就是：有對象就指向調用對象沒調用對象就指向全局對象用new構造就指向新對...

LoftySoul 2019-08-21 12:28 評論0 收藏0
前端js -- this指向總結。

摘要：面向對象編程指向一。總結的值要等到代碼真正執行是才能確定。，調用，只想我們指定的對象后續更新。對象調用，如執行，指向。默認的，指向全局變量。特殊雖然也是對象，但是在這里還是指向那個函數的實例，因為比較特殊。面向對象編程 --- this指向一。首先：, this的指向在函數定義的時候是確定不了的，只有函數執行的時候才能確定this到底指向誰，實際上this的最...

Wuv1Up 2019-08-22 16:03 評論0 收藏0