JavaScript語言中this指向研究

周虎

摘要：JavaScript逐漸從一門簡單的腳本語言進化成為一門強大的面向對象編程語言，尤其在對象的this指向上，不僅借鑒了其他高級語言的優點，并結合自身靈活的編程能力，在程序運行中可以動態改變this指向。該文針對this在全局變量、函數、對象中的指向，以及通過apply、call和bind改變綁定對象后this的指向進行了深入的探討并進行了總結歸納，便于讀者更深層次的理解JavaScript中的this指向問題。

關鍵詞：JavaScript;this;bind;apply;call

中圖分類號：TP312? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）26-0162-02

開放科學（資源服務）標識碼（OSID）：

1 背景

JavaScript是面向Web的編程語言，其動態以及面向對象的編程風格使得它已經從一門簡單的腳本語言進化成為一門強大的編程語言[1]。在高級語言面向對象編程過程中，都會用到this關鍵字，一般用來指向構建的對象，同樣在JavaScript編程語言中，在很多情況下也會用到this關鍵字，this在其不同的上下文環境中，this的指向會各不相同，尤其在全局變量、函數和對象中的指向，以及通過apply、call和bind在改變綁定對象后this的指向問題，對于初學者來說很容易混淆，并因此可能導致程序錯誤。本文根據this在不同上下文環境中的指向問題進行分類探討，便于讀者對JavaScript中的this指向問題的理解和應用。

2 JavaScript中的this指向分析

在JavaScript語言中，使用到this關鍵字的上下文通常包括全局變量、普通函數、構造函數、對象函數和箭頭函數，以及通過關鍵字apply、call和bind改變對象指向后this的指向。下面就不同情況下this的指向進行分析探討。

2.1 全局變量和函數中this指向

在全局變量中，this默認指向的是window對象，此時可以省略this，也可以使用window來代替，如下面代碼所示：

var str="hello JavaScript";

function fn（）{

console.log（this.str）;

}

this.fn（）;

console.log（this）;

在上面代碼中this指向就是window對象，即使在普通函數fn（）中，此時this也是指向的window對象，用來獲取全局變量的值。但是在ES6以后，如果改用let來定義全局變量，此時全局變量將不再是window對象的屬性了，如下面代碼所示：

let str="hello JavaScript";

console.log（str）;//hello JavaScript

console.log（this.str）;//undefined

在上面代碼中，可以使用變量名str直接訪問，但是不能使用this.str來訪問，因為let定義的全局變量不再屬于window對象，此時將輸出undefined。

2.2 構造函數中的this指向

JavaScript可以通過構造函數來創建并初始化對象，只不過JavaScript沒有類定義和特殊的構造器定義，需要程序員自己定義一個構造函數來創建屬性，而所有的函數都可以被用來定義構造函數[2]。在構造函數中使用this，這點和其他高級語言類似，this指向的是使用new創建的對象，如下面代碼所示：

function Student（name，age）

{

this.name=name;

this.age=age;

}

var stu=new Student（"zhangsan"，15）;

console.log（stu.name）;//zhangsan

在上面代碼中，構造函數中的this就指向了使用Student函數創建的當前對象stu，這一點和其他的高級語言構造函數中的this功能類似，都是指向當前對象本身。

2.3 對象函數中的this指向

面向對象編程思想的重點在“對象”上，對象實質上是“客觀事物”在程序設計語言中的表現形式[3]。在JavaScript對象中可以使用this來訪問對象的屬性和函數，此時this的指向是當前對象，但是如果對象的函數是其他全局函數的引用，那么全局函數中的this指向就可能發生改變，如下面代碼所示：

var name="zhangsan";

function show（）

{

console.log（this.name）;

}

var stu={

name：'lisi'，

show：show

}

show（）;//輸出zhangsan

stu.show（）;//輸出lisi

在上面代碼中，如果直接調用show（）函數，則是輸出全局變量name的值”zhangsan”，但是在stu對象中的show函數是對全局函數show（）的引用，stu.show（）在執行時show函數中的this則指向了stu對象，所以輸出“lisi”。

如果對象屬性還是一個對象，并且和父對象具有相同的屬性，那么this則指向當前的屬性對象，如下面代碼所示：