面试官：能解释一下javascript中的this吗

一.前言

　　关于javascript中的this对象，可能已经被你们说烂了。

　　即便是这样，我依然决定将这篇文章给水出来。毕竟全国在新型肺炎的影响下，公司无法正常复工。

　　除了刷刷手机，仍是要适当的学习一下。

　　废柴是真很差当，劳逸结合才是王道。

二.正戏开始

　　面试官：你能给我解释一下javascript中的this吗

　　我：（固然能够哇，成竹在胸，咳咳）javascript中的this对象是指函数运行时，在函数内部生成的一个对象。

　　面试官：那你大概说一下它的用法吧

　　我：（摩拳擦掌准备开始吹水）好，我大概说几种使用场景。（接下来就须要我一我的演戏了）

　　

　　第一种是全局函数中的this对象。

　　好比下面这个全局函数test

<script>
　　function test(){
　　　　
　　}
</script>          

　　假如咱们将这个全局函数做为普通函数使用，那么这个全局函数内部的this对象指向的就是window对象。

　　

 　　（事实胜于雄辩，虽然不能给面试官看结果，可是气势上已经拿到一分）

　　除了做为普通函数使用以外，test全局函数也能够做为构造函数去使用，那么函数内部的this对象指向的是构造函数建立出来的实例。

　　

　　在test构造函数中，this.a=10这行是关键代码。

　　假设咱们在不知道this对象是什么的状况下，这行代码仅仅是给this对象添加了一个属性a，而且赋值为10 。

　　而后看测试结果打印出来的对象o，发现o也多了一个属性a，它的值也为10 。

　　因此不难想到在test函数运行时，this绑定到了new出来的对象上，即this指向了构造函数建立出来的实例o；

　　第一种this的使用场景就吹完了，若是这样啰嗦的回答面试官，估计就直接让我回家了。

　　因此总结一下我这样回答面试官：

　　　　第一种全局函数中的this对象，假如咱们将这个全局函数做为普通函数使用，那么这个全局函数内部的this对象指向的就是window对象；

　　　　若是将这个全局函数做为构造函数使用，那么函数内部的this对象指向的是构造函数建立出来的实例。

 

　　第二种是对象方法中的this。

　　在好比下面这个obj对象的increase方法。

var obj = {
　　a: 10,
　　increase: function(){
	this.a++;
　　}
}

　　如今咱们去调用obj对象的increase方法

　　

　　obj的increase方法中的关键代码为this.a++，该函数调用完成后，在去打印obj对象，发现obj对象中a的属性值由10增长为11。

　　那么increase方法这中的this.a++的效果实际上等效于obj.a++。

　　因此对于第二种对象方法中的this，它指向的就是该对象自己。

　　

　　那么到这里，我已经个人能力范围内回答完了面试官的问题。

　　（若是幸运的话，面试官应该还不会赶我走）

 

　　面试官：说了这么多，那我这里有几个实例代码，你来给我分别说一下这几个示例代码输出都是什么吧。

　　（接着面试官扔给我几张写满了代码的A4纸）。

　　我：（忽然心慌慌，可是不能怂，按照前面说的几种场景往里套呗）

　　题目一：

　　

　　（看到这个心情愉快呀，这不就是我刚说的this的第一种使用场景吗。并且是将全局函数做为普通函数使用，那函数里的this指向的就是window。那既然函数f中的this指向的是window对象，那this.age就至关于window.age。而后我镇定自若的回答面试官）

　　题目一按照代码执行的输出顺序，第4行的输出结果为20，第7行的输出结果也是20（面试官不说话，应该是默认了个人回答是正确的）。

 

　　题目二：

　　

 

 　　（这个乍一看跟题目一有些类似，只是在第3行中对age的定义有了变化，并且在第6行还多了一个打印输出。

　　　在往下看，发现函数f依然是做为普通函数去使用的，那既然是这样，第3行的this.age=40也就至关于window.age=40。

　　　因此第3行代码执行的时候确定会覆盖第1行对age的赋值。到这里我微微一笑，开始回答面试官）

　　   题目二按照代码执行的输出顺序，第6行输出结果为20；第4行当输出结果为40；第8行当输出结果为40。

　　

　　题目三：

　　

　　（这个题目一看仍是我前面说的this的第一种使用场景，只是全局函数做为普通函数使用）

　　题目三按照代码执行的输出顺序，第5行输出20；第8行输出20。

　　

　　题目四：

　　

　　（额，这个代码有点长呀，可是不能慌。

　　  看完前8行以为没啥问题，第九、10行看完后内心咯噔了一下。

　　  将obj的getName方法赋值给了一个变量fn，而后打印fn()？？？

　　  静下心想想，第9行其实是以声明式方式建立了一个全局函数fn，而后在第10行调用fn。

　　 接着我陷入了沉思，那调用fn时，这个this究竟是指向obj对象呢，仍是指向全局的window对象。

　　 大脑飞速旋转，想到刚开始对面试官说的那句话：javascript中的this对象是函数运行时，在函数内部生成的一个对象。

　　 因而我不断的重复这句话，而后一个激灵反应上来，既然是this是函数运行时生成的，那我应该关注fn函数运行时的状况呀。

　　 先抛开函数fn是由obj的getName方法赋值生成的这个事情。

　　 fn生成之后，它是一个全局函数，这个毋庸置疑。再者，fn运行时是以普通函数的方式调用的。

　　那fn函数在运行时，内部的this对象就是window了，那第10行打印就是全局的"babi"了，恩，必定是这样。

  　  擦擦汗在继续看，又发现了16行的代码，感受和第10行代码有些殊途同归之处。

　　接着前面的思路往里套，无论otherObj.getName是怎么建立的，它在运行的时候是做为otherObj对象的方法运行的，那这就符合前面说的第二种使用this的场景：对象方法中的this，它指向的就是该对象自己。

　　想完这些抬头看了一下面试官，一声不响甚至有些不耐烦，因而虚虚的回答他）

 

　　题目四按照代码执行的输出顺序，第10 行的输出结果为"babi"；第17行的输出结果为"mini"。

　　（此时看到面试官眉头舒展，微微一笑）

 

　　面试官：好，那这个问题到此结束......

　

三.拷问结束

　　面试官的灵魂拷问结束后，回到家里把记得的示例代码都验证了一遍，居然发现都对了。

　　因而默默的奖励本身一个鸡腿。

　　

 

　　声明：文章中场景纯属捏造，切勿当真。小小总结，欢迎拍砖。