js学习总结之this

this的指向经常把初学者绕晕，因此我花了时间仔细阅读书籍以及参考别人的博客

以下是我参考的博客链接
https://segmentfault.com/a/1190000002640298
http://www.cnblogs.com/sharpxiajun/p/4148932.html
http://web.jobbole.com/88264/
http://www.cnblogs.com/wangfupeng1988/p/3996037.html
将这些大牛与我自己的理解写一个总结

首先记住两句话，

1.如果在js语言中没有通过new(包括对象字面量定义)，call和apply改变函数的this指针，函数this指针都是指向window。

2.谁调用的函数，this就指向谁。

1.1 先阐述(没有通过new(包括对象字面量定义)，call和apply改变函数的this指针)函数this指针指向window或者说是全局变量

var a="yeman";console.log(this.a);//yemanconsole.log(window.a);//yeman

var a="yeman"; function show1(){    var a="xiee";    var show2=function(){            console.log(this.a)   //yeman        }        show2();    }show1();

var a="yeman";function show1(){    this.a="xiee";  }console.log(this.a);//yemanshow1();console.log(this.a);//xiee,因为window.a 被改变为xiee

1.2 出现new(包括对象字面量定义)

《javascript高级编程》里对new操作符的解释：

　　new操作符会让构造函数产生如下变化：

　　1. 创建一个新对象；

　　2. 将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；

　　3. 执行构造函数中的代码（为这个新对象添加属性）；

　　4. 返回新对象

var name="haha";var a={    name:"yeman",    show:function(){       console.log(this.name);      }}var b=new Object();b.name="xiee",b.show=function(){    console.log(this.name);}a.show(); //yemanb.show(); //xiee

1.3 call和apply对this的影响

var name="yeman";function show(name){    console.log(name);    console.log(this);    console.log(this.name);}show("xiee");var obj={    name:"haha"};show.call(obj,"haowan");输出的结果依次是:xieewindowyemanhaowanobject{name="haha"}haha

2.谁调用函数，this就指向谁

var name="xiee"     var a={    name:"yeman",    show:function(){       console.log(this.name);      } } a.show(); //yeman如果fn函数不作为obj对象的属性来调用? var name="xiee"var a={    name:"yeman",    show:function(){       console.log(this);  //window       console.log(this.name);   //xiee    }    }; var b=a.show; b();

因为此时的函数不是作为对象的属性被赋值，而是作为一个普通方法被调用，因此this指向的是window

总结：这两条结合看。

补充当this碰到return
如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。还有一点就是虽然null也是对象，但是在这里this还是指向那个函数的实例，因为null比较特殊

function a(){    this.id="yeman";      }var b= new a;console.log(b.id); //yeman---------------------------------------------------------function a(){    this.id="yeman";        return {};            //返回的对象，this指向返回的对象，该返回的对象为{}没有定义name，所以结果为undefined}var b= new a;console.log(b.id);//undefined-----------------------------------------------------------function a(){    this.id="yeman";        return function (){};            //返回的对象，this指向返回的对象，该返回的对象为function (){}没有定义name，所以结果为undefined}var b= new a;console.log(b.id);//undefined----------------------------------------------------------function a(){    this.id="yeman";        return 1;            //返回的不是对象，this指向函数的实例，所以结果为yeman}var b= new a;console.log(b.id);//yeman   -------------------------------------------------------------function a(){    this.id="yeman";        return undefined;            //返回的不是对象，this指向函数的实例，所以结果为yeman}var b= new a;console.log(b.id);//yeman   --------------------------------------------------------function a(){    this.id="yeman";        return null;            //null比较特别，本来null是对象，但他还是指向那个函数实例}var b= new a;console.log(b.id);//yeman