JavaScript学习之旅--this指向问题
在我学习JS的过程中,经常被this搞得头晕眼花,所以写这篇文章来加深理解,留作备忘。由于自己还是个菜鸟,所以有欠妥的地方还请各位看官批评指正。
以我现在的水平,我认为this就是函数或对象方法的调用者,并总结了5种this的指向情况:
1、在全局作用域下,函数中this的指向
1 function globalFn(){ 2 console.log(this); 3 } 4 console.log(window.globalFn);//globalFn作为了window的一个属性,输出了函数本身,方便下行代码的理解 5 globalFn();//调用函数,输出window
2、自动执行函数中this的指向
1 //在全局作用域中的自动执行函数 2 ;(function autoFn(){ 3 console.log(this);//指向window 4 })() 5 6 //在对象中的自动执行函数 7 var obj={ 8 autoFn:(function(){ 9 console.log(this);//同样指向window 10 })() 11 }
3、在dom元素绑定事件中this的指向
1 ele.onclick=function(){ 2 console.log(this);//当用鼠标点击ele元素时,触发事件输出的是ele这个dom元素 3 } 4 5 //DOM二级事件绑定 6 ele.addEventListener("click",function(){ 7 console.log(this);//同样是ele这个dom元素 8 },false);
但是在低版本IE浏览器中用ele.attachEvent()来代替,而此事件中的this会存在问题(指向window)。
4、构造函数中this的指向
1 function Person(){ //构造函数 2 this.age=22; 3 } 4 var p=new Person(); 5 p.age;//输出为22,而不是undefined,所以this指向的是该类的实例对象
5、通过call和apply改变this的指向
1 var obj={ 2 x:123 3 } 4 function fn(){ 5 console.log(this.x); 6 } 7 fn.call(obj);//通过call方法,fn中的this指向了obj,所以输出了123
在非严格模式下,如果call方法没有参数或者第一个参数是null、undefined,那么fn中的this会指向window,如果在严格模式下("use strict"),第一个参数是神马,fn中的this就是指向神马。