this的引用问题一直是 JavaScript 新人比较头疼的问题。前段时间阅读了方应航老师关于this的文章，加深了对this的理解。同时，在实际项目中遇到了一些文中没有提到的关于this的用法，特此整理一下。
勘误：之前发布的文章，将
call误写成了apply。call和apply的效果是一样的，第一个参数都接收的是函数的context。只不过apply将函数的参数变成了数组进行传递而已。
上下文环境（ context ）
简单来讲，上下文环境指的是当前代码片段（函数）运行时所处的环境。
在 JavaScript 中，每一个函数在执行的时候都会被赋予一个 context ，即函数运行的上下文环境（执行上下文），这个环境通常是一个对象。在函数中，我们使用 this 访问函数的执行上下文。这个上下文环境随着函数的调用方式、形式、位置等的不同会发生变化，因此我们无法直接依赖函数声明时的上下文环境来进行某些操作。这其中最典型的就是 setTimeout 这样的异步函数。
举几个简单的例子，来观察一下函数的执行上下文：
-
这是一个定义在全局环境的函数
foo，我们在全局环境中调用它：
得到了全局对象
Window，蛮合理的。（当然这么理解是不完全正确的，慢慢往下看） -
我们定义一个
obj对象，其中的foo属性指向刚才定义的foo函数：
此时虽然
obj中的foo直接指向了全局foo函数，但是其执行结果却变成了obj对象。 -
我们反过来再试一下：
结果也反过来了。
更难受的是setTimeout这样的方法：
由此证明，函数的执行上下文与函数声明时的上下文不一定相同。所以我们有的时候会看到这样的写法，用来保存函数依赖的上下文环境：
为什么会有这种差别呢？
在 JavaScript 中，“万物皆对象”。每一个 function 其实是由 Function 类生成的一个对象。在执行函数调用时，其实是执行了一个语法糖，真正被调用的是函数的 call 内置方法。这个方法接收两种参数：call(context, [arg1, [arg2..) 。context 便是这个函数执行的上下文，即 this 。来做一个有点暴力的实验：
我们尝试强制指定 foo 的 context 为 obj2 ，结果显然 foo 的 this 被绑定为了 obj2 。
而 JavaScript 又是如何执行这个语法糖的呢？我们肯定会这么猜：JavaScript 会自动向前调用这个函数的的对象，并将这个对象作为 context 再执行 call 。这样说并没有错，但是不全面，来看下边几个实验：
-
先创建一个
father对象：
显然这个是符合我们猜想的。
-
然后我们再创建一个
child对象：
显然也符合我们的猜想。
-
现在我们把两个对象结合起来：
想必和一些人猜想的不一样吧。
JavaScript 只会寻找最终调用该函数的对象，而不会向前追溯。
不过还有一个问题，为什么直接执行函数的时候，会输出 window 这个对象。是因为在浏览器中所有的对象都是 window 的属性，所以 foo() 等价于 window.foo() 吗？答案是否定的。
在 JavaScript 中，如果函数是直接调用的，而不是源自于某个对象，函数的 call 方法的 context 将会被定义成 undefined 。所以 foo() 与 foo.call(undefined) 是完全等价的:
在浏览器策略中，函数 context 如果为 undefined，将会自动绑定全局对象 window。这种绑定在 JavaScript 严格模式下会被禁止。
按照规矩来也不行？
有些写在函数里的函数（或者说，闭包），会丢失原函数的上下文。其实也不怪它，因为函数的执行上下文是不会继承的：
如果你理解了刚才对 call 的解读，你也许就会认为：inner 并没有被任何对象调用，而是直接被执行了，自然会丢失上下文。这样的理解在这个例子中是正确的，但是当函数作为回调时会复杂一些。
回调函数的调用方式与回调函数的执行者有关，其 this 与执行者执行函数时为其指定的 context 有关。没有指定 context 的结果与上边的结果是一致的，但指定了 context 的就不一定了，要仔细阅读文档。
关于 bind
很多时候，由于执行者的不可靠性，或者其他的原因，我们想为函数手动绑定 context 。JavaScript 为我们提供了 bind 方法，返回一个绑定了上下文的函数，来改写一下上边出现的 setTimeout 的例子：
特殊语法：[]
function fn () {
console.log(this)
}
var arr = [fn]
arr[0]()
这样的函数调用，调用对象是数组 arr 本身，所以它将被作为 context 传入：
箭头函数
ES6 为了解决 this binding 这个让人非常头疼的问题，提供了一种新的函数声明方式：箭头函数。箭头函数会自动绑定函数声明时所在的上下文的 this 。关于箭头函数具体的信息可以查阅箭头函数 | MDN
我们可以用箭头函数改写上面出现的 setTimeout 的实验：
总结
函数的 this 最核心的地方就是掌握函数的 call 方法和函数 call 的 context 的推导规则。还有就是注意回调函数和闭包的 this ，因为他们的执行可能并没有经过对象调用，所以很可能丢失 context ，或者指向了别的 context。
网友评论