详细请参考原址:https://blog.csdn.net/qq_41635167/article/details/82798428
学习js已经一年多,对this也算是了解。前两天看了一些关于this指向的面试题,打算总结一下在js中关于this 的各种问题,结果发现讲解this的博客很多,但质量高的很少,所以写下了这篇博客希望可以帮助到需要的人。
一.this指向判断
上面这张图很好的说明了this的指向问题,图中dot(.)意思就是使用对象名加方法调用,dot之前的对象就是指调用这个对象,例如下面例子中的np.x,dot之前的对象指的就是np,来看下面的例子:
1.
function gzb(x,y){
this.x = x;
this.y = y;
}
var np=new gzb(1,1);
np.x; //1
var p=gzb(2,2);
p.x; //error, p是一个空对象undefined
x; //2
在这个例子中,我们首先定义了一个构造函数gzb,然后使用new创建了一个对象np,从上面的图中我们可知,构造函数中的this指向创建的新对象np,所以np.x被赋值为1。然后我们又执行了var p=gzb(2,2),这行代码和var p=new gzb(2,2)的区别是什么呢?我们首先来看this指向,根据上面的图我们可知,this应该指向window,因为他既没有用new,也没有用dot(.)来进行调用。var p=gzb(2,2)的作用相当于先执行var p ,然后执行 gzb(2,2),所以p为undefined,全局变量x为2。
2.
var gzb = {
x : 0,
y : 0,
moveTo : function(x, y) {
this.x = this.x + x;
this.y = this.y + y;
}
};
gzb.moveTo(1,1);
gzb.x; //1
根据图中的方法,是用dot(.)进行调用,则指向.moveTo之前的调用对象,即gzb对象,所以gzb.x值为1。
3.
var Obj = {
gzb1:function () {
console.log(this);
function gzb2() {
console.log(this);
}
gzb2();
}
};
Obj.gzb1();
这段代码运行后会输出什么呢?应该是Obj对象和window,我们可以看到Obj.gzb1()是用dot(.)进行调用的,所以函数gzb1中的this应该指向Obj,然后在gzb1函数中还包含了一个gzb2函数,gzb2函数是怎么调用的呢?他是有gzb1函数进行调用的,也就是说它既没有使用new也没有使用dot(.)进行调用,所以gzb2中的this指向window。