【理解】一道 JS 面试题

2024年1月24日 231次阅读 来源: 前端

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

    原文作者：前端
    原文地址: https://segmentfault.com/a/1190000018916381
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞