系列文章導航：

JavaScript學習筆記一——數據類型

JavaScript學習筆記二——函數

JavaScript學習筆記三——作用域

JavaScript學習筆記四——Eval函數

JavaScript學習筆記五——類和對象

JavaScript學習筆記六：prototype的提出

Javascript學習筆記七——原型鏈的原理

Javascript學習筆記八——用JSON做原型

Javascript學習筆記九——prototype封裝繼承

Javascript學習筆記十——網頁運行原理

Javascript學習筆記十一——包裝DOM對象

Javascript學習筆記十三——關于響應事件

Javascript學習筆記十二——Ajax入門

具體的事情記不清了，某一天下班后聽到兩個同事在說關于關于事件的問題。

這里簡單說下：

<input type="button" runat="server"  value="Click Me" id="ButtonTest" />

很普通的一個按鈕，我們要為其添加點擊事件，有兩種方法：

A.

    <input type="button" runat="server" onclick="Alert()" value="Click Me" id="ButtonTest" />
    <script type="text/javascript">
        function Alert() {
            alert("Click Me");
        }
    script>

B.

    <input type="button" runat="server" value="Click Me" id="ButtonTest" />
    <script type="text/javascript">
        document.getElementById("ButtonTest").onclick = function () {
            alert("Click Me");
        }
    script>

我們稱A方法為靜態綁定，B方法為動態綁定。我們來看A方法，他近乎可等于這樣的效果：

    <input type="button" runat="server" onclick="Alert()" value="Click Me" id="ButtonTest" />
    <script type="text/javascript">
        document.getElementById("ButtonTest").onclick = function () {
            Alert();
        }
    script>

也就是說，當我們靜態綁定一個事件的時候，實際上是系統默認為我們做了一個匿名函數，然后把我們的方法體包于其中。由于這樣，就涉及到了this的問題。

我們來看這樣一段代碼，這也是我在公司初學JS的時候，公司的JS小牛拋給我的問題。

    <input type="button" runat="server" onclick="Alert1()" value="Test1" id="ButtonTest1" />
    <input type="button" runat="server" onclick="Alert2(this)" value="Test2" id="ButtonTest2" />
    <script type="text/javascript">
        function Alert1() {
            alert(this.value);
        }
        function Alert2(obj) {
            alert(obj.value);
        }
    script>

當試驗這樣一段代碼時，便會發現第一個按鈕會彈出”undefined”，第二個按鈕彈出”Test2”。原因就是如我上面所說，在按鈕一中，方法等于聲明了一個匿名函數，然后講Alert1()閉包于其中，也就是說，Alert1()是無法找到其調用者的，所以這時，他會去找window對象的value屬性，結果發現未定義，我們可以這樣證明：

    <input type="button" runat="server" onclick="Alert1()" value="Test1" id="ButtonTest1" />
    <input type="button" runat="server" onclick="Alert2(this)" value="Test2" id="ButtonTest2" />
    <script type="text/javascript">
        value = "window";
        function Alert1() {
            alert(this.value);
        }
        function Alert2(obj) {
            alert(obj.value);
        }
    script>

運行上面的代碼，就可以很好地理解問題了！