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就是指向神马。

 

posted @ 2016-01-05 22:05  druid_000  阅读(230)  评论(2编辑  收藏  举报