javaScript之this的五种情况
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的,掌握以上几种运用方法,相信你可以所向睥睨。