JavaScript scope作用域與this關鍵字

身為程式設計師， 你可能早已經習慣於物件導向語言中指涉當前物件的參考（或指標）， 如的c++中的this或python 中的self，當然具有OO屬性（ javascript 其實更多的是一種所謂的函數式語言）的javascript 同樣， 它也具有引用當前屬性的物件的指標（或引用）， 也就是this關鍵字。

為了理解this關鍵字，如果你只想記住一句話，那應該是this關鍵字總是指向當前函數的所有者物件（執行空間）， 至於這句話如何理解， 可以參見下面的詳細說明。

那麼什麼是 scope 呢？

wikipedia 中的解釋是 In computer programming， scope is an enclosing context where values and expressions are associated。 中文即是所謂的 作用域， 它指明的是一個數值或表達式所關聯的上下文（能夠被引用的執行空間）。

scope 與this有什麼關係呢？ 如果從上面的定義來看， this指向的總是當前引用此函數的對象，而當你要判斷當前引用的對象時， 這時你就得弄清楚當前函數所在的 scope。 具體可見下面的分析。

this關鍵字

請看下面的幾個例子。

一個 python 的例子：

class Person(object):
"""a person class
    """
def __init__(self, name):
self.name = name    #这里的self指向的是实例化后的对象,如下面中的Magic
def get_name(self):
return self.name
Magic = Person("Magic")
print Magic.name

一個 javascript 的例子：

window.name = "Magic from window"
var get_name = function(){
    // this的具体指向只能在运行时才能确定,也就是确定运行时调用其的对象
    return this.name;   
};
// 输出Magic from window, get_name调用的对象为window
alert(get_name());  
var obj = {}
obj.name = "Magic from obj";
// 输出Magic from obj, 我们强制地使用了 apply来更改调用的对象,使其指向obj
alert(get_name.apply(obj)); 
var innerobj = {
    "name" : "Magic from innerobj"
};
innerobj.get_name = get_name;   // 使得innerobj的get_name方法指向了global scope的get_name函数
alert(innerobj.get_name()); // 输出Magic from innerobj, 此时this指向的是innerobj

那麼從上面的簡單例子來看， this 總是在運行時才能確定其具體的指向， 也才能知道它的調用對象。而這點也正是動態語言一個重要特性。

那麼如何確定目前this指向的引用物件呢？通常可以這樣判斷：

如果在global的scope（可以參見下面的說明來明確什麼是global scope）來調用，則指向的是bowser的頂級對象window 例如： get_name()

如果， 有類似於這樣的引用， innerobj。 get_name() 則很顯然this指向的是innerobj

如果我們使用了apply， call來進行強制的引用對象指向， 則也會很顯然地指向強制的對象，如 get_name。 apply(obj)。

關於apply和call

這2個關鍵字可以很簡單地理解為進行this引用對象（運行空間）強制轉換， 二者的語法如下：

fun.call(object, arg1, arg2, .. .)

fun.apply(object, [arg1, arg2, ...])

二者目的是相同的(動態更改函數的運行空間, 或稱作更改this指向的對象), 只是在提供給函數的參數上的呼叫方法不同.

範例程式碼如下:

var test_call_apply = function(name, gender, school){
alert(this.age + name + gender + school);
};
test_call_apply.call({age:24}, "Magic", "male", "ISCAS");
test_call_apply.apply({age:24}, ["Magic", "male", "ISCAS"]);

scope詳述

var global_scope = "I'm global";
var fun = function(){
var fun_scope = "I'm in fun scope";
return innerfun(){
var inner_func_scope = "I'm in the inner fun scope";
return global_scope + fun_scope + inner_func_scope; //此处的引用是重要的,请特别注意
};
};
alert(fun()());

請注意上面的程式碼，其中：

global_scope 它是global scopeo

inner_func_scope 是一個位於一個函數內的函數的scope

你也可以繼續內嵌函數， 那麼會產生若干個scope。

於是有個問題出現了，為什麼innerfun方法可以引用不在它自身scope的變數？

在回答這個問題之前，需要先介紹一個概念 scope chain。 所謂的 scope chain 是指 在 javascript 的程式碼中形成的一個具有優先順序，相關的作用域的鏈。

以上面的程式碼為例，

對於global的scope而言，它會為自己建立一個global的scope chain(當然此時，這個鏈只有一個scope)。

對於fun函數的scope而言，它首先建立一個與global相同的scope chain，然後再加入自己的scope(此時，這個鏈有2個scope)，類似於這樣的結構： global==>fun

對於innerfun而言，除了fun函數所具有的鏈外，它還會加入自己的scope(當然，此時這個鏈有3個scope)，類似於這樣的結構：global==>fun==> innerfun

scope chain具有下面的特徵：

有序

每當建立一個函數時，會自動產生一個scope並加入自己的scope chain中

這個chain類似於一種棧，在查找變數時總是先從頂端查起

其實也很好理​​解，在計算某個表達式時，它會對自己的scope chain進行從上到下的查找，如果找到了它會立即返回這個值，如果找完了整個chain也沒有找到，則回傳undefined。

這個查找機制也就決定了，通常位於chain的前端的scope有更高的優先權。

例如 javascript 在計算 global_scope + fun_scope + inner_func_scope; 這個表達式時， 它會查找上面圖示中的scope chain，從而確定出最後的結果。

一些说明

如果你弄清楚了上面的论述，应该说你对this关键字和scope已经具有完全的知识基础了，但是我们需要在实际中更好地使用和理解这些概念，这样才能把能力上升到别一个层次，这也即所谓的理论与实践的关系。

请看下面这个例子：

var change_color = function(){
this.style.color = "red";
};
window.onload = function(){
var text = document.getElementById("text");
text.onclick = change_color;    //此时this指向的是text这个对象(dom对象)
};
// 下面这行代码是在body中
//这点需要特别注意, inline script指向的是window,此处会无定义  
<span id="another" onclick="change_color()">My color will be changed2.</span>

需要特别注意的是：

inline event registration中的this并非指向的是自己的dom节点，而是global scope的window，这点可以从上面的例子中得到证明

这种inline event registration是不可取的，推荐的是 Unobtrusive JavaScript (处理逻辑和页面结构相分离)

javascript 是一种非常强大的动态语言，它是披着C语言外衣的函数式语言，如果你只当作它是一种类C的命令式语言，那么你的知识层次还过于低，而倘若你能够理解到javascript 的函数式语言本质，你在运用 javascript，理解 jQuery 及其它的库，甚至自己写一些 javascript 都会游刃有余的。