浅谈JS中this在各个场景下的指向

为了保证的可读性，本文采用意译而非直译。

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

1. this 的奥秘

很多时候, JS 中的 this 对于咱们的初学者很容易产生困惑不解。 this 的功能很强大，但需要一定付出才能慢慢理解它。

对Java、PHP或其他标准语言来看，this 表示类方法中当前对象的实例。大多数情况下，this 不能在方法之外使用，这样就比较不会造成混淆。

在J要中情况就有所不同: this表示函数的当前执行上下文，JS 中函数调用主要有以下几种方式：

每种调用类型以自己的方式定义上下文，所以就很容易产生混淆。

此外，严格模式也会影响执行上下文。

理解this关键是要清楚的知道函数调用及其如何影响上下文。

本文主要说明函数的调用方式及如何影响 this，并且说明执行上下文的常见陷阱。

在开始之前，先知道几个术语：

调用函数正在执行创建函数体的代码，或者只是调用函数。 例如，parseInt函数调用是parseInt（'15'）。

2.函数调用

当一个表达式为函数接着一个(，一些用逗号分隔的参数以及一个）时，函数调用被执行，例如parseInt('18')。

函数调用表达式不能是属性方式的调用，如 obj.myFunc()，这种是创建一个方法调用。再如 [1,5].join(',')不是函数调用，而是方法调用，这种区别需要记住哈，很重要滴。

函数调用的一个简单示例：

function hello(name) { return 'Hello ' + name + '!';}// 函数调用const message = hello('World');console.log(message); // => 'Hello World!'

hello('World')是函数调用: hello表达式等价于一个函数，跟在它后面的是一对括号以及'World'参数。

一个更高级的例子是IIFE(立即调用的函数表达式)

const message = (function(name) {  return 'Hello ' + name + '!';})('World');console.log(message) // => 'Hello World!'

IIFE也是一个函数调用:第一对圆括号(function(name) {...})