javaScript之this的五種情況

標籤：blog   his   span   產生   onclick   處理常式   style   window   logs   

    this一直是JavaScript研究的難題，特別是在筆試和面試中的各種程式分析問題中，也常常會被問到。下面來看一看this被運用的五中情況：

（1）       純粹的函數調用

    函數最普通用法，此時屬於全域調用，函數內this指向全域對象window。

樣本一：

var x=20;   function test(){      var x = 10;      console.log(this.x)}

輸出：20，因為函數test執行環境為window。

樣本2：

var x=20; function test(){      this. x = 10;      console.log(this.x)}test()console.log(x);

輸出：

10

10

    由於test函數內部this指向window，所以第3行代碼修改了x的值。

（2）     作為對象的方法使用

    函數作為某個對象的方法，此事this指向該對象。

function text(){console.log(this.x)}var obj = {};obj.x = 10;obj.out = text;obj.out()

輸出： 10

（3）       建構函式產生執行個體對象

    作為建構函式使用時，this指向該對象新建立的執行個體。

var x = 2;function text(){this.x =1;}var inst = new text();console.log(inst.x);

輸出： 1

（4）     使用apply

apply()方法是改變函數內部this的值，若為空白預設是指向全域對象window。

var x = 2; 　　function test(){ 　　　console.log (this.x); 　　} 　　var obj={}; 　　obj.x = 1; 　　obj.m = test;  obj.m.apply();obj.m .apply (obj);

輸出：

2

1

    第8行代碼將函數內部的this指向window，故輸出為2。第9行代碼等價於obj.m()。因為作為對象方法的函數其內部this就指向該對象。

（5）事件處理常式中的this

    在DOM級事件處理常式中this指向觸發事件的元素，而對於IE事件來說，this指向全域對象window。

HTML:<input id="myinput" type="text" value="javascript中onclick中的this" onclick=" test(this);"/>javaScript:function test(obj){ alert(obj); //[object HTMLInputElement] alert(obj.id); //myinput alert(obj.value); //javascript中onclick中的this }

    還有閉包中的this是指向window的，掌握以上幾種運用方法，相信你可以所向睥睨。

javaScript之this的五種情況