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);//yeman
console.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);//yeman
show1();
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(); //yeman
b.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");
输出的结果依次是:
xiee
window
yeman
haowan
object{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