最近在一个前端学习群里，有人抛出了这么一道 JS 面试题。

var foo = 1;
(function foo(){
    foo = 100;
    console.log(foo);
}())
console.log(foo);

我一看，这不很简单吗？IIFE 局部的 foo 本来指向函数本身，但后来被修改成 100 了，所以局部的 foo 打印 100。全局的 foo 还是保留原来的值，所以全局的 foo 打印 1。

然后我复制代码到控制台运行，发现先打印函数体 foo(){...}，然后再打印 1。

我猜想的第一个打印结果错了，一番查找资料终于搞懂了，于是有了这篇文章。

函数声明式 vs 函数表达式

以下表示形式的是函数声明式，简单说就是 function 前面没有任何运算符，其实就下面一种形式。

function name() {
    ...
}

以下表示形式的是函数表达式，有多种形式。

var fun = function name() {
    ...
}

// 函数前带有 + - * / () && || 等运算符号
(function name(){
    ...
}())

// 又或者
+function name(){
    ...
}()

能认出函数声明式与函数表达式后，我们来看看两者有什么区别。

函数提升

稍微了解 JS 的都知道变量提升(variable hoisting)，除此之外还有函数提升(function hoisting)，也就是说下面的代码是正常运行的。

foo(); // running

function foo() {
    console.log('running');
}

但是函数提升只对函数声明式有效，对函数表达式不生效，下面的代码就会报错。

foo(); // Uncaught TypeError: foo is not a function

var foo = function () {
    console.log('running');
}

区别一：函数声明式会提升函数定义，而函数表达式不提升函数定义。这一区别只是想给大家复习知识点，并不是本文的重点。

函数名绑定的作用域

先看看下面函数的表示形式，记住它有助于接下来的说明。

function BindingIdentifier (FormalParameters) { FunctionBody }

函数声明式和函数表达式的另外一个关键区别是，看函数名(BindingIdentifier)绑定到哪个作用域下。

先看下 ECMAScript 是怎么描述这一区别的。

The BindingIdentifier in a FunctionExpression can be referenced from inside the FunctionExpression's FunctionBody to allow the function to call itself recursively. However, unlike in a FunctionDeclaration, the BindingIdentifier in a FunctionExpression cannot be referenced from and does not affect the scope enclosing the FunctionExpression.

上面说 BindingIdentifier(函数的引用) 可以用于在函数表达式内递归调用自身。而且函数表达式的 BindingIdentifier 只绑定在该函数内部，不污染外部的作用域，外部作用域也无法访问到 BindingIdentifier。

区别二：函数声明式的 BindingIdentifier 绑定在声明时的作用域下，函数表达式的 BindingIdentifier 绑定在函数内部的作用域下。

背后的原因

说了这么多，好像还没说的真正的原因。是的，前面的内容只是铺垫，有了上面的内容，才能更好理解背后的原因。

解释前先说原因：

函数表达式的函数名是不可修改的(ImmutableBinding)。但如果你真修改了，在非严格模式下会静默失败，在严格模式下会报错(Uncaught TypeError: Assignment to constant variable)。
函数声明式的函数名是可修改的(MutableBinding)。

原因出自《You-Dont-Know-JS》的一个 issue，这一 issue 已被作者纳入第二版(second edition)的编写中。

The production FunctionExpression : function Identifier ( FormalParameterListopt ) { FunctionBody } is evaluated as follows: ... Call the CreateImmutableBinding concrete method of envRec passing the String value of Identifier as the argument. ...

调用 CreateImmutableBinding 创建 Immutable's 函数名。

For each FunctionDeclaration f in code, in source text order do ... If funcAlreadyDeclared is false, call env’s CreateMutableBinding concrete method passing fn and configurableBindings as the arguments. ...

调用 CreateMutableBinding 创建 Mutable's 函数名。

当然也可以从 ECMAScript 规范中找到原因：Runtime Semantics: Evaluation。

至于语言为什么要这么规定，我也没想明白，如果有知道的同学可以分享一下。

分析下代码

那回头再分析下一开始的示例，从每一行注释可以帮助理解背后的原因。

var foo = 1; // 在外部作用域声明foo=1

// IIFE是典型的函数表达式
(function foo(){ // 函数名foo，引用函数自身，绑定在函数内部，不污染外部作用域
    foo = 100; // 这里修改了foo，但规范规定不能修改，但不会报错
    console.log(foo); // 还是引用函数自身
}())

console.log(foo); // 外部作用域一直是1

同样的代码，当函数运行在严格模式下，报错提示说：“不能赋值给常量”。也就是说函数表达式的函数名被定义成常量，无法再修改了。

var foo = 1;

(function foo(){
    'use strict'; // 严格模式
    foo = 100; // Uncaught TypeError: Assignment to constant variable
    console.log(foo);
}())

console.log(foo);

为了帮助对比理解，下面给出了函数声明式的示例及解释，下面的代码无论在非严格模式还是严格模式下都打印100，也就是说函数声明式的函数名可以被修改。

// foo是函数声明式
function foo(){ // 函数名foo，引用函数自身，绑定在声明时的作用域下
    foo = 100; // 修改了foo，函数声明式内可以重新修改函数名
    console.log(foo); // 100
}
foo();

如果在函数表达式内使用 var foo = 100; 来重新声明变量，那这个变量就不是不可修改的(ImmutableBinding)，所以内部的 foo 打印 100。

var foo = 1;

(function foo(){
    var foo = 100; // 重新声明变量
    console.log(foo); // 100
}())

console.log(foo); // 1

通过上面的分析解释，希望你可以掌握这道面试题，举一反三。

如果你喜欢这篇文章，请关注我，我会持续输出更多原创且高质量的内容。

原文链接：【理解】一道 JS 面试题