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.οnclick=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就是指向神马。

 

转载于:https://www.cnblogs.com/druid/p/5103929.html