this不仅仅是Javascript的核心内容，也是前端面试的重点，更是在工作中频繁出现的词，那么this是什么？到底this表达了什么？为什么要有this这个词？

彻底搞懂上下文this

1.1 this是什么？

小姐姐先在这里卖个关子，不直接回答上面的问题，我们先来看一个例子：

var 

从上述例子中我们得知：

对象被当作了参数传入了函数内部。运行结果为270，也就是说函数从外面接收信息，主要依靠参数，那么问题来了，如果不靠参数，函数能不能在外部获得信息？？？
答案就是上下文
上下文就是使信息进入函数内部的一种手段

现在我们改变一下上述例子的写法，不使用参数的方式，使用this进入到函数内部，

var 

那么运行的结果也为270,this就是函数的上下文，所以说函数的上下文，是除了参数以外的，最常用的使信息进入函数内部的一种手段。讲述完了this的出现，那么this是怎么被调用的呢？请继续看下面的内容。

1.2 this是啥取决于如何被调用

function定义的函数，this是什么，要看如何调用，而不是如何定义。

调用方式决定this，比如看下面的例子，有个obj对象，它有一个属性函数fn，里面有this，当题读到这时，一定不要激动！！！当函数没有调用的时候，就是Brandan Eich本人来了，都不知道this是谁，因为函数没有被调用。

var 

本题是f()圆括号调用的，所以上下文是window,运行结果为8，这个符合this的判断规则1，那么this有哪些判断规则呢？请接着继续看下面的内容。

1.3 七个this判断规则

规则1：函数直接用圆括号运行，上下文是window对象。

var 

上述例子中看到this，一定要淡定，必须看清楚函数是如何被调用的，那么题中，obj.fun()()，先来看obj.fun()它一运行得到的是一个匿名函数，此函数再圆括号调用即obj.fun()()，其实就是函数直接圆括号运行，所以上下文是window，运行结果为7。

规则2：对象打点调用函数，上下文是这个对象

var 

此题obj.fun()是对象打点调用函数，所以上下文是这个对象，即此题运行的结果取的是obj这个对象中a属性的值为3

规则3：数组（类数组对象）中枚举出函数，上下文是这个数组（类数组对象）

function 

函数fun2作为参数传入函数fun1中，类数组对象中枚举出函数，然后运行上下文是这个类数组对象，fun2函数里面的this是fun1的实际参数列表！，所以this.length的值为 5，arguments.length为2。

规则4：定时器调用函数，上下文是window

var 

定时器调用example函数，所以上下文是window,即运行结果为9。

规则5：被当作了事件处理函数，上下文是触发事件的DOM元素

<button id="button"></button>

var 

程序运行结果为[object HTMLButtonElement]，即this是触发事件的button元素。

规则6：用new调用函数，上下文是函数体内秘密创建的空白对象

用new创建函数会经过4步走：
① 秘密创建空对象
② 将this绑定到这个空对象上
③ 执行语句
④ 返回这个对象

规则7: 用apply、call执行上下文

function 

先看foo()符合规则1：圆括号直接打点调用函数，上下文window,所以getLength.call(this.length)，是作为getLength函数的上下文。又因为 foo()返回的是个立即执行函数，执行函数又返回的是个对象，所以，foo().info()即对象.info()符合规则2：对象打点调用函数，上下文是这个对象。即最后返回的是return对象中length函数的形参列表的长度，result的执行结果为3。

本题中一定要记住：函数的length是形参列表的长度。arguments.length是实参列表的长度。

另外需要知道，arguments.callee表示函数本身，arguments.callee.length也是形参列表的长度。

小结

今天分享了javascript的核心内容——this有关的知识点，希望这篇文章能帮助大家彻底搞懂上下文this，也希望大家能喜欢。如果有更好的建议或相关的经验欢迎大家在下面的评论中与我们一起分享。
如需转载，烦请注明出处：https://www.zhihu.com/people/aileenfeng/posts