JS函数篇--理解函数的调用

作为一个前端程序猿，我们都写过JS函数，也都调用过JS函数，但你是否曾经想过一个函数被调用的时候真正发生了什么？事实上，函数的调用方式对函数内代码的执行有很大的影响，主要体现在 this 参数以及函数上下文是如何建立的，这点很重要。

那第一个问题就来了：

你知道 JS 中调用一个函数有几种方式吗？（先别急着往后看，可以先在脑海里思索一番）

答案是：4种；

它们分别是：

• 作为一个函数（function）—— eat()，直接被调用。
• 作为一个方法（method）—— dog.eat()，关联在一个对象上，实现面向对象编程。
• 作为一个构造函数（constructor）—— new Dog()，实例化一个新的对象。
• 通过函数的 apply 或者 call 方法 —— eat.apply(dog) 或者 eat.call(dog)。

下面让我们一个一个来看：

1.作为函数直接被调用

听起来有点蠢（函数当然要被作为函数（function）调用了，不然怎么调用？），哈哈好像有点像绕口令。不过我们这里说的“作为一个函数”被调用是为了区别于其他的 3 种调用方式。一般而言，通过()运算符调用一个函数，且被执行的函数表达式不是作为一个对象的属性存在时，就属于直接被调用的方式了。说人话就是，只要它不是作为方法、构造函数或通过 apply 和 call 调用的话，那就是妥妥的直接调用。

其中，作为函数调用又分为 3 种：

当以这种方式调用时，函数上下文（this 关键字的值）有两种可能性：
非严格模式：全局上下文（window 对象）；
严格模式：undefined；

2、作为方法被调用

当一个函数被赋值给一个对象的属性，并且通过对象属性引用的方式调用函数时，函数会作为对象的方法被调用。

这种情况下，函数被称为方法，调用的对象会称为函数的上下文，并且在函数内部可以通过 this 访问到。这也是 JS 实现面向对象编程的主要方式之一。

那么一个函数作为普通函数调用时和作为方法调用时有什么异同点呢？

在上面这段代码中，我们创建了一个独立的普通函数 whatsMyContext ，在它之后的所有代码都是在对这个函数进行引用并调用。

可以看到，在调用 1 和 2 中，即使我们创建了一个变量来引用原函数，在用这个变量调用该函数时，打印出来的 this 值依旧是 window 对象，因为这个变量也是在全局环境下声明的。
然后，在调用 3 和 4 中，我们创建了两个对象，他们都包含了一个名为 getMyThis 的属性，且该属性值为函数 whatsMyContext 的引用。通过这样的方式，我们就在对象上创建了一个名为 getMyThis 的方法。但是，千万别认为 whatsMyContext 成为了 obj_1 或者 obj_2 的一个方法，不，它依然还是一个独立的函数，它只是可以有多种调用方式而已。当调用 3 和 4 执行时，可以看到分别对应打印出了 obj_1 和 obj_2。正好印证了我们前文说的，当一个函数作为一个对象的方法被调用时，它的上下文将会是调用的这个对象，并且能在函数内部通过参数（this）访问到。

3、作为构造函数调用

函数作为构造函数时，在声明上与其他函数并没有本质上的区别，使用函数声明和函数表达式都可以。核心的不同就是在调用方式上，构造函数使用的是：new 关键字。

将我们上一段代码中的函数用构造函数的方式调用的话，代码是这样的：

但实际上，这样的一个构造函数对我们而言不是特别有用。为什么呢？接下来将会说明。

将函数作为构造函数调用是 JS 中一个强大的特性，以下代码为实际例子：

在这个例子中，我们创建了一个名为 Dog 的函数作为构造函数。当通过 new 关键字调用时，它会创建一个空的对象实例，并将其作为函数的上下文（this 参数）传递给函数。构造函数中在该对象上创建了一个名为 bark 的属性并赋值为一个函数，使得该函数成为新创建对象的一个方法。

一般来讲，使用关键字 new 调用函数时会触发以下几个动作：

1. 创建一个新对象。
2. 该对象作为 this 参数传递给构造函数，从而成为构造函数的函数上下文。
3. 新构造的对象作为 new 运算符的返回值（该函数的返回是 object 的情况除外）。（这里提到的情况牵涉到构造函数的返回值问题，有兴趣可以自行搜索一下，此次不展开了）

以上，也就说明了为什么我们前文的 whatsMyContext 不适合作为构造函数。构造函数的目的是创建一个新对象，并进行初始化设置，然后将其作为构造函数的返回值。任何有悖于这两点的情况都不适合作为构造函数。

4、使用 apply 和 call 方法调用

到目前为止，你应该已经注意到了，不同类型函数调用之间的主要区别在于：最终作为函数上下文（this）传递给执行函数的对象不同。

机智好学的你可能会问了：那如果我想要显示地指定一个函数在调用时的上下文怎么办？好问题，这时候你就需要 apply 和 call 了。

apply 和 call 是存在于每个函数上的，它们是 JS 提供的可以用来显示地指定任何对象来作为函数的上下文的方法。

（是的，你没有看错，函数也有方法，毕竟，咱（函数）可是在 JS 中作为第一类对象的存在，它由内置的 Function 构造函数所创建，当然也就具有跟普通对象一样的属性和方法了。）

apply 和 call 的使用方法类似，唯一的区别就是传参的形式不同而已，具体如下：

apply 和 call 通常用于解决在某些回调函数中，默认绑定的上下文（this）指向不正确而导致的问题。他们的功能类似，都是用来改变this指向的，只是后面的传参形式不同，call需要把实参按照形参的个数传进去（参数一个一个写入），apply需要传一个数组，所以在使用的时候，保持一个原则就行了：选择任意可以精简代码的方法。总结来说就是，选择与现有参数相匹配的方法。如果有一组无关的值，则直接使用 call 方法。若已有参数是数组类型，apply 方法会更好。 

延伸——解决函数上下文的另外两个选择：

函数上下文除了通过以上的几种调用方式可以得知之外，还有另外两种选择：

1. 箭头函数——绕过函数上下文：

   箭头函数除了让我们更加简洁优雅地创建了函数之外，它作为回调函数时还有一个更加优秀的特性：箭头函数没有单独的 this 值；它的 this 与声明所在的上下文内容相同。当然这个特性也会导致一些看起来奇怪的行为，那就需要具体情况具体分析了。

2. bind——绑定函数上下文

   函数除了可以使用 apply 和 call 直接指定上下文来调用函数之外，还可以使用 bind 方法来创建一个指定了上下文的新函数。创建的新函数，无论使用哪种方法调用，this 都被设置为绑定的对象本身。同时，需要注意的是，使用 bind 方法不会修改原始函数，而是创建并返回了一个全新的函数。

总结

• 函数的调用方式有 4 种：
  1. 作为函数调用：eat()
  2. 作为方法调用：dog.eat()
  3. 作为构造函数调用：new Dog()
  4. 通过 apply 与 call 方法调用：eat.apply(dog) 或 eat.call(dog)
• 函数的调用方式影响 this 的取值：
  1. 作为函数调用：
     1. 非严格模式：window
     2. 严格模式：undefined
  2. 作为方法调用：this 指向调用的对象
  3. 作为构造函数调用：this 指向新创建的对象
  4. 通过 apply 或 call 调用：this 指向 apply 或 call 的第一个参数
• 箭头函数没有单独的 this 值，this 在箭头函数创建时确定
• 所有函数均可使用 bind 方法，创建新函数，并绑定到 bind 方法传入的参数上。被绑定的函数与原始函数具有一致的行为。