this的指向问题

138 阅读2分钟

多少做了一些参考

在函数中this到底取何值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了。因为this的取值是执行上下文环境的一部分,每次调用函数,都会产生一个新的执行上下文环境。

情况分为4种。

No.1 构造函数

我们对构造函数的方式通常都是通过new的形式来创建,而且构造函数本身就是一个对象。

image.png

看这段代码,就很明显的表示了,this现在是指向了,fn内部,也就是说是在函数真正被调用执行的时候确定的

如果是通过直接调用Fn(),那么会作为普通函数一样,指向window。

image.png

No.2 函数作为对象的一个属性

这里有2个形式

函数作为对象的一个属性时,并且作为对象的一个属性被调用

函数不作为对象的一个属性被调用

上个例子,参考文章中举例

image.png

为什么箭头函数指向window,因为箭头函数 没有this...

回到fun上,fun不仅作为一个对象的一个属性,而且的确是作为对象的一个属性被调用。结果this就是obj对象。

那不作为对象的一个属性被调用呢,比如

var fn = obj.fun;

fn();

这个时候this指向的是window,因为这个时候没有作为obj的一个属性被调用

No.3 普通函数

这个其实,也不用太多理解,反正记住普通函数调用指向window。

No.3 函数用call或者apply

这个后面来讲,专门分析一下,顺便说一下call,apply,bind怎么用。

说完文章里面的内容,让我们来看看,一些使用场景吧

image.png

这个时候this抛出了异常,它说没有这个name

image.png

image.png

this指向undefined,undefined上没有this对象,会抛出错误

再看一个

image.png

函数的调用是在某个对象上触发的,即调用位置上存在上下文对象。典型的形式为 XXX.fun()

person调用了fn。跟上面说的第二条符合,那么这个this指向的就是person这个对象,自然就能访问对象值name。