*js核心：this

標籤：div   htm   alert   解析   html   運行   on()   聲明   cti   

什麼是this

   this是js中的一個關鍵詞，它總是指向一個對象，而具體指向哪個對象是在運行時基於函數的執行環境動態綁定的，而非函數被聲明時的環境。

   當函數被調用時，this被添加到範圍中，例如：

function add(num1,num2) {    var sum = num1 + num2;    return sum;}var total = add(5,10);

   add的範圍鏈如所示，我們可以看到範圍鏈中的兩個this(一個全域範圍中的this和add範圍中的this，後面我們將明白為何兩個this都指向window)：

 

this的指向

this總是指向所屬函數的擁有者對象，具體分為3種情況

1.作為對象的方法調用：  當函數作為對象的方法被調用時，this指向該對象。

var obj={    a:1,    getA:function(){        alert(this===obj);        alert(this.a);    }    };obj.getA();  //分別輸出ture和1

2.作為普通函數調用：  當函數不作為對象的屬性被調用時，也就是我們常說的普通函數方式，此時的this總是指向全域對象。

window.name=‘jacksplwxy‘;var getName=function(){    return this.name;};console.log(getName());  //輸出jacksplwxy

3.構造器調用：  當用new調用建構函式時，該建構函式會返回一個對象，一般情況下，this就會指向這個返回對象。

var myClass=function(){    this.name=‘jacksplwxy‘;};var obj=new myClass();console.log(obj.name);  //輸出:jacksplwxy

 

this實戰

   技巧：this總是指向所屬函數的擁有者對象

//實戰1：var obj={    myName:‘jacksplwxy‘,    getName:function(){        return this.myName;    }};console.log(obj.getName());  //輸出： jacksplwxyvar getName2=obj.getName;console.log(getName2());  //輸出：undefined/*解析：   當調用obj.getName時，getName方法作為obj對象的屬性被調用的，根據this指向情形1規律，此時this指向obj對象，所示輸出jacksplwxy。   當用另外一個變數getName2來引用obj.getName，並調用getName2時，根據this指向情形2規律，此時是普通函數調用方式,this是指向全域window的。所以輸出undefined。*/

//實戰2：var foo = "window";var obj = {    foo : "obj",    getFoo : function(){        return function(){            return this.foo;        };    }};var f = obj.getFoo();f(); //window/*解析：執行var  f = obj.getFoo()返回的是一個匿名函數，相當於:var f = function(){     return this.foo;}f()相當於window.f(), 因此f中的this指向的是window對象，this.foo相當於window.foo, 所以f()返回"window" */

//實戰3：var foo = "window";var obj = {    foo : "obj",    getFoo : function(){        var that = this;        return function(){            return that.foo;        };    }};var f = obj.getFoo();f(); //obj/*解析：執行var f = obj.getFoo() 同樣返回匿名函數，即：var f = function(){     return that.foo;}唯一不同的是f中的this變成了that, 要知道that是哪個對象之前，先確定f的範圍鏈：f->getFoo->window 並在該鏈條上尋找that,此時可以發現that指代的是getFoo中的this, getFoo中的this指向其運行時的調用者，從var f = obj.getFoo() 可知此時this指向的是obj對象，因此that.foo 就相當於obj.foo,所以f()返回"obj"*/

 

轉載請註明文章出處：http://www.cnblogs.com/jacksplwxy/p/6701874.html

*js核心：this