深入理解this對象

this的定義

在JavaScript中this表示函數運行的時候自動生成的一個內部對象，只能在函數內部使用，下面是一個簡單的例子：

function test(){
    alert(this == window);
}
test();

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

code1 
有的時候this的使用會讓許多人覺得琢磨不定，但是總結一句話就是誰調用的方法this就是指向誰下面我們分五個方面來介紹一下this

1.函數調用(指向window)

在我們平時定義一個函數的時候然後在調用它，就是指向的window對象,就像上面先定義了一個函數test,然後去調用它，其實真正調用test方法的是window對象(在JavaScript中都是對象.屬性/方法，如果是window對象可以省略)，這時候的this是指向window可以用下面的代碼進行嘗試:

        var a = 'out';
        function test(){
            alert(this.a);
        }
        test();  //out
        var t = new test();
        alert(t.a);// undefined undefined

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• 1
• 2
• 3
• 4
• 5
• 6
• 7

2.作爲構造函數調用

這個是指向的新的對象,其實這個例子在上面已經提出來了，下面只需改動上面的一個地方也就是在test的函數中加上this.a=a,輸出的結果就不同了，看下面的代碼：

        var a = 'out';
        function test(){
            this.a = a;
            alert(this.a);
        }
        test();  //out
        var t = new test();
        alert(t.a);// out out

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

第一的對象是指向的window第二個對象是指向t(test的實例化)這個對象

3.作爲對象的方法調用

函數還可以作爲某個對象的方法調用，這時候this就是這個上級的對象，

        function test(){
            alert(this.x);
        }
        var o = {};
        o.x=1;
        o.m=test;
        o.m();  //1
        //o.m=test();  //undefined

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

4.作爲元素的節點

這次先看代碼：

        var value = 'nihao';
        function f1(){
            alert(this.value);
        }
        var val = document.getElementById('email');
        val.onclick=f1;

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

下面是一行的HTML代碼：

<input id="email" type="text" />

• 1

• 1

在點擊input之後我們會看到彈出的是我們輸入的值，而不是window對象的’nihao’，這是 因爲每一個獲取的DOM元素也是一個對象；

5.call()和apply()

這兩個函數的作用是相同的語法有一點不同； 
他的作用是改變函數的調用對象，他的第一個參數就表示改變後的調用這個函數的對象(就是改變使用這個函數對象的this指向) 
看下面的代碼：

    var name="helios";
    function setName(addr,weight){
        console.log(this.name+'---'+addr+'---'+weight);
        console.log('wancheng');
    }
    var cat = {name:'hei',age:12},
        dog = {name:'gou'};
    setName.call(dog,'shangsha',32);
    setName.apply(cat,['beijing',21]);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

call()方法第一個參數傳遞的是調用這個方法的對象的this指向(上面的例子就是setName的this指向dog)，後面還可以有多個參數分別是實際參數 
apply()一共能有兩個參數第一個參數和call方法是一樣的，第一個參數是實際參數的數組

非預期效果

this的主要應用前面已經介紹完了，但是在使用this的時候，初學者很容易使用this不當，造成非預期效果下面就來說明一下：

    var obj={
        bar:"yuansu",
        foo:function(){
            (function(){
                alert(this.bar);//這個this指向的window對象 會彈出undefined；
            })()
        }
    }
    obj.foo();

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

這裏先要指出一個誤區，不是在函數裏面定義的函數，this就是指向的上一級函數的this這是不正確的，在函數裏面定義的函數也是要看是誰調用的這個函數(方法)this纔是誰；在這裏並不是obj調用foo裏面的匿名函數，實際上是window,如果想要達到預期的效果值許改一點代碼就可以了，看下面代碼：

    var obj={
        bar:"yuansu",
        foo:function(){
            var self = this;  //把obj這個對象用self保存下來
            (function(){
                alert(self.bar);//這裏的self就是obj了
            })()
        }
    }
    obj.foo();

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

總結

調用形式	this指向
普通函數	window
構造函數	實例化後的對象
對象的方法	該對象
DOM節點	該節點對象
call或者apply	第一個參數

參考：

http://blog.csdn.net/woshinannan741/article/details/51146889