函数表达式

JS定义函数的方式有两种：一种是函数声明，另一种就是函数表达式。函数声明的语法是这样的。

function functionName(arg0, arg1, arg2) {
  //function body
}

函数声明，它的一个重要特征就是函数声明提升（function declaration hoisting），意思是在执行代码之前会先读取函数声明。这就意味着可以把函数声明放在调用它的语句后面。

sayHi()

function sayHi(){
  alert("Hi!")
}

第二种创建函数的方式是使用函数表达式。函数表达式有几种不同的语法形式。下面是最常见的一种形式。

var functionName = function(arg0, arg1, arg2){
  //function body
}

这种形式实际上跟常规的变量赋值没有区别, 就是创建一个变量, 然后将函数赋值给变量, 但是我们需要注意的是, 上面这种方式创建的函数function后面是没有跟函数名的, 我们叫这种函数为匿名函数或者拉姆达函数

这里需要注意的是, 函数表达式没有函数提升

函数表达式在递归中的应用

假设我们有以下阶乘函数

function factorial(num) {
  if(num < 1) {
     return 1
  }
  return num * factorial(num - 1)
}

这个函数看起来并没有什么问题, 但实际上确有一个隐藏的漏洞, 例如下面这种情况

let fn = factorial
factorial = null
console.log(fn(5))

上面的代码中, 我们先将factorial赋值给fn, 然后将factorial指向null, 当我们调用fn函数时, 递归函数在运行到return num * factorial(num - 1)这句, 由于factorial指向了null, 所以函数就会报错

我们可以通过arguments.callee来解决这个问题, arguments.callee时一个指向正在执行的函数的指针, 所以可以实现递归调用

function factorial(num) {
  if(num < 1) {
     return 1
  }
  return num * arguments.callee(num - 1)
}

但是, arguments.callee在es标准中已经渐渐被抛弃, 并且在严格模式下不能访问arguments.callee, 因此我们需要更好的方法来解决这个问题, 用函数表达式就是一个不错的选择

let factorial = (function fn(num) {
    if(num < 1) {
     return 1
    }
    return num * fn(num - 1)
})

上面的代码我们创建了一个fn具名函数表达式, 然后将fn赋值给factorial, 这时候, 即使把函数赋值给另外的其他变量, fn仍然有效, 就避免了上面的问题

闭包

在《JavaScript高级程序设计》中, 对于闭包有着以下定义:
闭包是指有权访问另一个函数作用域中的变量的函数。
创建闭包的常见方式, 就是在一个函数内部创建另一个函数

function fn() {
  var a = 1
  function foo() {
    console.log(a)
  }

  return foo
}

let bar = foo()
bar() //2 闭包

上面的代码就是一个典型的闭包, 我们在全局环境中访问到了fn函数作用域中的变量a, 为了了解清楚这种情况的细节, 我们必须要从作用域链入手

当某个函数被调用时, 会创建一个执行环境(execution context)及相应的作用域链。然后, 使用arguments和其他命名参数的值来初始化函数的活动对象(activation object)。但在作用域链中, 外部函数的活动对象始终处于第二位, 外部函数的外部函数的活动对象处于第三位, 以此类推, 直到全局执行环境为止。

函数执行时, 为了读取或者写入变量的值, 就需要在作用域链中查找变量, 假设我们有下面的例子

function compare(value1, value2) {
  if(value1 < value2) {
    return -1
  }else if(value1 > value2) {
    return 1
  }else {
    return 0
  }
}

let result = compare(5, 10)

当我们调用compare()时, 会创建一个compare的执行环境, 该环境会初始化一个包含arguments, value1和value2的活动对象。在创建执行环境的同时还会创建其作用域链, 这条作用域链包含两个执行环境, 一个compare执行环境和全局执行环境(全局执行环境中有一个包含result和compare的活动对象)。 compare执行环境处于作用域链的第一位, 全局执行环境则处在作用域链的第二位

作用域链

每个执行环境都有一个表示变量的对象——变量对象。全局环境的变量对象始终存在，而像compare()函数这样的局部环境的变量对象，则只在函数执行的过程中存在。在创建compare()函数时，会创建一个预先包含全局变量对象的作用域链，这个作用域链被保存在内部的[[Scope]]属性中。当调用compare()函数时，会为函数创建一个执行环境，然后通过复制函数的[[Scope]]属性中的对象构建起执行环境的作用域链。此后，又有一个活动对象（在此作为变量对象使用）被创建并被推入执行环境作用域链的前端。对于这个例子中compare()函数的执行环境而言，其作用域链中包含两个变量对象：本地活动对象和全局变量对象。显然，作用域链本质上是一个指向变量对象的指针列表，它只引用但不实际包含变量对象。

无论什么时候在函数中访问一个变量时，就会从作用域链中搜索具有相应名字的变量。一般来讲，当函数执行完毕后，局部活动对象就会被销毁，内存中仅保存全局作用域（全局执行环境的变量对象）。但是，闭包的情况又有所不同。

假设我们有下面这个闭包

function createComparisonFunction(propertyName) {
  return function(object1, object2){
    var value1 = object1[propertyName]
    var value2 = object2[propertyName]
    if (value1 < value2){
        return -1
    } else if (value1 > value2){
        return 1
    } else {
      return 0
    }
  }
}

var compareNames = createComparisonFunction('name')
var result = compareNames({ name: 'Nicholas'}, { name: 'Greg' })

//解除对匿名函数的引用（以便释放内存）
compareNames = null

当一个函数定义在另一个函数内部时, 该函数会将它的上层函数的活动对象也添加到他的作用域中, 因此上面这个例子中的匿名函数function(object1, object2){}的作用域链中, 不但包含它自己的活动对象, 还包含了createComparisonFunction()和全局活动对象, 这样, 匿名函数就可以访问createComparisonFunction()中定义的所有变量。更重要的一点, createComparisonFunction()函数在执行完毕后, 由于匿名函数的作用域链仍然引用这个活动对象, 所以这个活动对象不会被销毁, 知道匿名函数被销毁后, 它才会被销毁。

由于闭包会携带包含它的函数的作用域，因此会比其他函数占用更多的内存。过度使用闭包可能会导致内存占用过多。虽然像V8等优化后的JavaScript引擎会尝试回收被闭包占用的内存，但请大家还是要慎重使用闭包。

闭包和变量

作用域链有一个副作用我们必须要注意, 就是闭包只能取得变量的最后一个值。因为闭包保存的时整个活动对象而不是某个特殊的变量值

function fn() {
  var result = []
  for(val i=0; i<10; i++) {
      result[i] = function() {
          return i
      }
  }
  return result
}

这个函数会返回一个函数数组。表面上看，似乎每个函数都应该返自己的索引值，即位置0 的函数返回0，位置1 的函数返回1，以此类推。但实际上，每个函数都返回10。因为每个函数的作用域链中都保存着fn() 函数的活动对象， 所以它们引用的都是同一个变量i 。当fn()函数返回后，变量i 的值是10，此时每个函数都引用着保存变量i 的同一个变量对象，所以在每个函数内部i 的值都是10

我们可以通过一个匿名函数强制让闭包符合预期行为

function fn() {
  var result = []
  
  for(var i=0; i<10; i++) {
    result[i] = (function(num) {
      return function() {
        return num
      }
    })(i)
  }
  return result
}

在重写了前面的fn()函数后，每个函数就会返回各自不同的索引值了。在这个版本中，我们没有直接把闭包赋值给数组，而是定义了一个匿名函数，并将立即执行该匿名函数的结果赋给数组。这里的匿名函数有一个参数num，也就是最终的函数要返回的值。在调用每个匿名函数时，我们传入了变量i。由于函数参数是按值传递的，所以就会将变量i 的当前值复制给参数num。而在这个匿名函数内部，又创建并返回了一个访问num 的闭包。这样一来，result 数组中的每个函数都有自己num 变量的一个副本，因此就可以返回各自不同的数值了。

关于this对象

在闭包中使用this也需要特别注意, 比如下面的例子

var name = "The Window";
var object = {
  name : "My Object",
  getNameFunc : function(){
    return function(){
      return this.name
    }
  }
}
alert(object.getNameFunc()()); //"The Window"（在非严格模式下）

按照作用域链来理解, 匿名函数应该会一层一层向上找活动对象, 那么这个this最终应该会指向其上层对象, 但是实际情况this似乎并没有指向其上层对象, 而是指向了window, 造成这个结果的原因是因为: 对于this和arguments这个两个特殊变量, 内部函数只会搜索到其自身的活动对象为止, 并不会通过作用域链访问其外层活动对象