1. 程式人生 > >深入理解this物件

深入理解this物件

this的定義

在JavaScript中this表示函式執行的時候自動生成的一個內部物件,只能在函式內部使用,下面是一個簡單的例子:

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

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

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

第一的物件是指向的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

4.作為元素的節點

這次先看程式碼:

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

下面是一行的HTML程式碼:

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

在點選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]);

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();

這裡先要指出一個誤區,不是在函式裡面定義的函式,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();

總結

呼叫形式 this指向
普通函式 window
建構函式 例項化後的物件
物件的方法 該物件
DOM節點 該節點物件
call或者apply 第一個引數