简述JS中THIS的指向？

这里是修真院前端小课堂，每篇分享文从

八个方面深度解析前端知识/技能，本篇分享的是：

【简述JS中THIS的指向？】

大家好，我是IT修真院武汉分院web第16期的学员孟晨，一枚正直纯洁善良的web程序员今天给大家分享一下，修真院官网js（职业）任务四，深度思考中的知识点——简述JS中THIS的指向？

1.背景介绍
this是什么？它有着什么样的功能？
this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

this的特性：
this的指向在函数创建的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象

2.知识剖析
下面会用一系列的代码片段来详细解读this

作为普通函数在全局环境中被调用

在全局环境里面，this 永远指向 window，因此在全局环境里作为普通函数被调用的时候，this 也是指向 window。

这里调用了a函数，而a函数的执行环境是全局环境，这里的this也就指向了全局变量window。

在全局环境里面，this 永远指向 window，因此在全局环境里作为普通函数被调用的时候，this 也是指向 window。

2.作为对象的属性被调用

先来个总结：如果函数作为一个对象的属性方法，并且被调用的时候，那么这个属性方法中的this 就指向这个对象，来看代码：

这里出现的结果与上面相同，因为this指向它的直接上级

稍微复杂一点的情况

这里同样也是对象o点出来的，但是同样this并没有执行它

通过以上例子可以有一下结论

情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window

情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象

情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象

但是还有一个特殊的例子

？这里this指向的还是window

想要明白为什么还需要理解一句话

即this永远指向的是最后调用它的对象

也就是看它执行的时候是谁调用的，虽然函数fn是被对象b所引用，但是在将fn赋值给变量j的时候并没有执行所以最终指向的是window，这和之前例子是不一样的，之前是直接执行了fn。

3.作为构造函数被调用

作为构造函数被调用的时候，this 代表它即将 new 出来的对象;

如果不加 new,表示即作为普通函数调用，指向 window。

4.作为 CALL/APPLY/BIND 方法的调用

作为 call/apply/bind 方法被调用的时候指向传入的值。

5.绑定事件，事件触发后的THIS

元素绑定事件，事件触发后，执行的函数中的this 指向的是当前元素（标签）

3.常见问题
THIS遇到RETURN怎么办？

如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。

虽然null,undefind也是对象，但是在这里this还是指向那个函数的实例，因为null,undefind比较特殊。

可以看看例子

再来2个

然后有个较为特殊的就是null虽然也是对象，但表现出来的是这样的

5.代码实战
6.拓展思考
如何改变this的指向？

setTimeout、setInterval中的this是指向哪里？

如何改变this的指向？

可以使用call或者apply的方法改变指向

如果xxxx.call(a)，this就指向a；当a为null或者undefined的时候，会指向window；假如说要传参，构造函数名.call(“a”,“b”,“c”)，它的第一个参数传到的是this；apply类似，但是与之不同的是，要书写成：构造函数名.apply(“a”,[“b”，“c”])的形式，这就是差别；

可以看一看例子

setTimeout、setInterval中的this是指向哪里？

《 javascript 高级程序设计》中写到：“超时调用的代码都是在全局执行域中执行的”。setTimeout/setInterval 执行的时候，this 默认指向 window 对象，除非手动改变 this 的指向。

还是看一看例子

之前说过，如果直接执行回调函数而没有绑定作用域，那么它的’this’是指向全局对象(‘window’)，在严格模式下会指向’undefined’，然而在’setTimeout’中的回调函数在严格模式下却表现出不同

看看例子

按理说我们加了严格模式，foo 调用也没有指定’this’，应该是出来 ‘undefined’，但是这里仍然出现了全局对象，难道是严格模式失效了吗？
并不，即使在严格模式下，‘setTimeout’ 方法在调用传入函数的时候，如果这个函数没有指定了的 ‘this’，那么它会做一个隐式的操作----自动地注入全局上下文，等同于调用’foo.apply(window)'而非 ‘foo()’；
当然，如果我们在传入函数的时候已经指定 ‘this’，那么就不会被注入全局对象，比如： ‘setTimeout(foo.bind(obj), 1);’；

7.参考文献
JavaScript中的this
彻底理解js中this的指向，不必硬背。

8.更多讨论

这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地

简述JS中THIS的指向？相关推荐

理解js中this的指向
彻底理解js中this的指向 JavaScript 的 this 指向问题深度解析转载于:https://www.cnblogs.com/jeacy/p/6509616.html
JS中this的指向
JS中this的指向,this是js中的一个关键字 1.this的指向有这四种情况 1. 在普通的函数中,this指向全局对象window 2.在构造函数中,this指向创造出来的实例 3.对象的方法 ...
彻底理解js中this的指向
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...
随笔——js中的this指向，apply()与 call()
js中apply和Math.max()函数(原文) apply() Function.apply() 是JS的一个OOP特性,一般用来模拟继承和扩展this的用途,对于上面这段代码,可以这样去理解: ...
理解js中的this指向以及call，apply，bind方法
<script> function a(){var user = "追梦子";console.log(this.user); //undefinedconsole.lo ...
JS中this的指向与改变this指向的三个方法
目录一.this指向的分类 1.全局函数的调用 2.对象中函数的调用 3.setTimeout与setInterval中的this 4.事件绑定中的this 5.箭头函数中的this 6.构造函数中 ...
JS 中 this 的指向
为什么要使用this? 解决的问题? 可以先通过一个例子了解下 function speak(){var name = this.nameconsole.log("Hello I am -- ...
简述JS中 appy 和 call 的详细用法
Apply 和 Call 两个老生常言的方法,使用过程的一些细节还是有很大的异同,具体使用情况可以参照下面例子详细回顾一下. 区别和详解:js中call()和apply()的用法 1.关于call() ...
JavaScript系列—简述JS中的事件委托和事件代理
JS中的事件委托和事件代理什么是事件委托? 事件委托还有一个名字叫事件代理,JS高程上讲:事件委托就是利用事件冒泡,只制定一个时间处理程序,就可以管理某一类型的所有事件.我用取快递来解释这个现象: ...

简述JS中THIS的指向？

简述JS中THIS的指向？相关推荐

最新文章

热门文章