javaScript之this的五種情況
阿新 • • 發佈:2017-06-23
默認 事件處理 改變 app ont code 分析 click 函數
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的五種情況