图解 ：一篇完全带你搞懂 JS 中的 this 指向问题

写在前边

Javascript是一门基于对象的动态语言，也就是说，全部东西都是对象，一个很典型的例子就是函数也被视为普通的对象。

其中this就是实现面向对象的一个很是重要的特性，可是 this在Javascript很是容易理解错，尤为是对于接触静态语言比较久的同窗来讲。并且 this又是面试中和实际项目中的重中之重，不得不单独拿出一篇文章来把它理解透透的。

上面说到this参数是面向对象Javascript编程的一个重要组成部分，表明函数调用相关联的对象，也称为函数上下文。我知道，你多是个初学 JS 的同窗，听不懂，不要紧，不用担忧，由于下面还有动画来更好的理解。

思惟导图

一、什么是 this？

什么是 this呢？上边咱们说 this是一个对象，是个啥对象？我们就来动手敲代码打印一下。咱们最多见的 this是在一个函数中， JS 的函数调用有两种方式，一种是咱们直接调用，另一种就是经过 new 的方式来调用，咱们经过两种方式来打印一下 this值是否相同？。

控制台输出以下：

吆喝？咦？虽然都是在函数中，咋打印出来的不同呢？直接经过函数调用的方式打印出来的 this指向的是全局变量Window;经过new的方式调用的函数当作为构造函数，为了可以建立一个实例对对象，它的 this值指向生成的实例对象。

那咱们经过上边的一顿乱操做，知道了 this是一个对象，可是咱们不一样的操做 this指向的对象是不相同的。写到这里，知道 this是个什么东西就能够了，下面咱们再慢慢深刻 this原理。

二、如何判断 this?

既然咱们知道 this 是什么东西了，可是怎么判断 this的值呢？也是咱们上边没有解决的问题。this的指向有三种状况，只要理解了这三种状况，也不用死记硬背，判断 this如鱼得水，在面试中给面试官讲的倒背如流。

三种 this指向状况：

一、对象调用，this 指向该对象（前边谁调用 this 就指向谁）。

对于第一种状况，经过对象调用的方式，this指向谁？要想一探究竟，必须动手实践一下。小鹿，上代码，好嘞~。

控制台打印：

咱们经过亲手测试，咱们发现 this的指向就是 obj，因此咱们总结概括为谁调用了函数， this就指向谁，很简单吧，咱们继续向下看。

二、直接调用的函数，this 指向的是全局 window 对象。

其实这也属于第一种状况，若是咱们直接在全局函数调用了函数，实际上是全局的对象 Window调用了函数，根据第一条咱们得出的结论，谁调用的函数，this就指向谁，想必你已经知道了第二种状况 this指向的就是 Window。

三、经过 new 的方式，this 永远被绑定在新建立的对象上，任何方式都改变不了 this 的指向。

第三种方式刚才咱们也测试过了，this指向的是指向生成的对象实例，不少好奇的小伙伴就会问小鹿，很好奇 new的内部实现，到底作了什么，其实没什么复杂的，不告诉你估计你也经过上边的两个结论能够得出。

咱们从的到的结果进行反推，经过 new的方式 this 指向的是生成的对象实例，那咱们猜想确定内部让这个实例对象调用了函数，因此 this 才指向生成的对象实例。

真实的状况是这样子吗？确实是，咱们 new的过程，其实在内部建立了一个空对象，而后将构造函数传入的参数和属性挂在了这个空对象上，而后返回了这个对象。还涉及该空对象到原型链的的挂载，想要具体了解，能够本身探究下，这里很少说了。

扩展：箭头函数的 this 指向谁？

咱们都知道 ES6 以后，为了使用函数更加方便，在项目中咱们会使用箭头函数，书写方式：

运行程序，控制台输出：

咱们能够得出结论，this在箭头函数中失效了，由于这是因为箭头函数没有单独的 this值。箭头函数的 this与声明所在的上下文相同。也就是说调用箭头函数的时候，不会隐士的调用 this参数，而是从定义时的函数继承上下文。

有关箭头函数这一点，必定要注意，面试的时候也会常常给你刨坑哦！

三、如何改变 this 的值？

咱们对 this的指向已经把它翻了个底朝天，可是不要傲娇，须要本身找点有关 this 的大厂面试题去作，这样巩固一下加深理解。

this能够指向不一样的对象，咱们想要改变 this有没有办法呢？有的，改变 this的方法共有三种，咱们具体看看这三种方法之间的实现和区别，也是面试重点哦！

一、call 方法

call方法用来改变 this的指向，具体我们先看实例：

控制台输出以下：

二、apply 方法

咱们再来看apply方法，一样举个例子：

控制台输出以下：

咱们发现输出的值相同，咱们先不比较二者的区别是什么，咱们继续往下看bind函数。

三、bind 方法

咱们在用 bind函数举个例子：

控制台输出以下：

四、call、apply、bind 三者的区别是什么？

咱们对于三者都进行举例运行了，咱们开始作总结概括，咱们先找找三者的共同点是什么？

• 共同点：

一、都能改变 this 指向，第一个传递的参数都是 this 指向的对象。

二、三者都采用的后续传参的形式。

三者相同点表面上都能看出来，功能都是同样的，可是对于不一样点，就涉及到细节了，不知道你发现了没有？

• 不一样点：

一、call的传参是单个传递的，而 apply后续传递的参数是数组形式，而 bind没有规定，传递值和数组均可以。

二、call和 apply函数的执行是直接执行的，而 bind函数会返回一个函数，而后咱们想要调用的时候才会执行。

你可能会有疑惑，小鹿，难道你就是这样表面看出的吗？虽然咱们表面能够看得出，那不妨咱们本身手写一个 call、apply、和 bind的吧，看了源码的实现，你会以为这三个函数也没有什么难的。由于涉及到时间问题，咱们就不展开讲了，小鹿把代码贴到下边了，感兴趣的能够研究一下。

一、手写 call 函数

二、手写 apply 函数

三、手写 bind 函数

PS：若是咱们使用上边的方法改变箭头函数的 this 指针，会发生什么状况呢？可否对齐进行改变呢？

因为箭头函数没有本身的this指针，经过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定this），他们的第一个参数会被忽略。

四、小结

今天咱们认识了 JS 中 this的使用，想必不管你是初学者仍是已经接触过 JS 的小伙伴，这篇文章应该基本能够看明白，文章可能写的比较 low，小鹿的能力就这么大了，还须要后续和大佬好好学习，争取写出更高难度和质量的文章分享给你们。

最后，每次文章写做加上做图须要好几个小时，原创真心不容易，点个赞、发个Blink，感谢各位小伙伴们的支持！

❤️ 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]

文章+动画写了好几个小时，不妨点赞支持一下。嘻嘻，你不点赞说明你很自私，你怕那么好的文章让别人也看到。开个小小玩笑。

能够关注小鹿公众号：「小鹿动画学编程」，后台回复：“资源”。送你一份小鹿以前自学的资料和拉你进免费学习群哦！

做者Info：

【做者】：小鹿

【原创公众号】：小鹿动画学编程。

【简介】：和小鹿同窗一块儿用动画的方式从零基础学编程，将 Web前端领域、数据结构与算法、网络原理等通俗易懂的呈献给小伙伴。先定个小目标，原创 1000 篇的动画技术文章，和各位小伙伴共同努力一块儿学习！公众号回复 “资料” 送一从零自学资料大礼包！

【转载说明】：转载请说明出处，谢谢合做！~