【理解】一道 JS 面试题

2019-03-28 | JavaScript

最近在一个前端学习群里,有人抛出了这么一道 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

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