在刚接触javascript时,总会被this绕晕,网上的大部分this教程都说得比较抽象,看了很多,自己总结了一点心得。
首先this指向的是一个对象,它只能在函数的内部使用。this指向谁在定义的时候是不知道的,只有在调用的时候才会知道。
接下来我举点例子,看懂了这些例子,理解this就很简单了。
一、
function xxx(){
var a = 1;
console.log(this.a);//undefined
console.log(this);//控制台输出window对象
}
xxx();
这里就会有问题了,为什么this.a是undefined,为什么不是1呢?
接下来我们再看一个函数。
function xxx(){
var a = 1;
console.log(this.a);//undefined
console.log(this);//控制台输出window对象
}
window.xxx();
这两个函数在控制台输出的结果应该是一样的,这能说明什么问题呢?
你用xxx( )等同于使用了window.xxx( ),我们知道全局函数是window对象的方法,这里this指向的是window对象,然而这里的a是xxx( )函数里面的局部变量,window.a的结果当然是undefined;
所以调用全局函数,this指向的是全局对象window,指向的是调用this所在方法的对象。
二、
接下来我们看下一个例子
var uao = {
a:1,
hs:function(){
console.log(this.a);//输出1
console.log(this);//输出对象uao
}
}
uao.hs();
我们可以发现这里的this指向的是uao这个对象,而不是window,接下来我们再看一个函数,
var uao = {
a:1,
hs:function(){
console.log(this.a);//输出1
console.log(this);//输出对象uao
}
}
window.uao.hs();
发现结果与上一次一样,为什么this没有指向window呢?因为hs这个函数是被上一级的uao这个对象所调用的,所以this指向的是上一级的对象。
三、
为了验证以上结论,我们再来做个实验var uao = {
a:1,
b:{
a:2,
hs:function(){
console.log(this.a); //输出2
console.log(this);//输出对象b
}
}
}
uao.b.hs();
我们现在发现this指向的确实是上一级对象b,结论成立;但是
var uao = {
a:1,
b:{
a:2,
hs:function(){
console.log(this.a); //输出undefined
console.log(this);//输出对象window
}
}
}
var sonic = uao.b.hs;
sonic();
如果用函数别名的话,我们发现结果又和第一个例子一样了,其实不难理解,这里其实就是相当于window.sonic( ),所以关键点就是在调用上,uao.b.fn并没有执行,然后就直接赋值给了sonic,然后sonic进行调用,this指向了sonic的上一级对象window,没毛病。
四、
在构造函数中,this指向又会有点不一样
function xxx(){
var a = 1;
console.log(this.a);//undefined
console.log(this);//控制台输出uao对象
}
var uao = new xxx();
这里的this指向的是新创建的uao这个对象,
new改变了this的指向,就我个人拙见,可以简单粗暴的理解为是uao这个对象调用了this,this指向他上一级的对象,也就是uao了。