由一道面试题引发的关于js作用域和赋值的思考

最新推荐文章于 2022-08-17 09:18:13 发布

原创最新推荐文章于 2022-08-17 09:18:13 发布 · 516 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript作用域

本文探讨了JavaScript中变量的作用域链查找机制，通过一道面试题解析了局部变量与全局变量的查找流程，以及IIFE(立即调用函数表达式)中函数名不可更改的规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看这道血淋淋的面试题：

var b = 10;
(function b() {
  b = 20;
  console.log(b)
})()

问：最终打印出什么？
js查找变量是沿着作用域链不断向上查找的，局部变量没有继续向上一层查找，一直查到全局作用域，有就返回没有就报undefined。
function b(){…}，这是一个函数声明，也就是变量b指向了自执行函数；
b的函数体内没有声明b变量，所以js引擎会自内而外查找b变量，具体过程：在函数b中查不到b变量，向上一层查找，查到了function b，所以b是一个function；
接下来又对b进行了赋值：b = 20，然而js引擎规定，IIFE(立即调用函数表达式)函数名不允许更改，非严格模式下静默失败，严格模式下报错："Uncaught TypeError: Assignment to constant variable."这里没有标明是严格模式，所以打印出:

ƒ b() {
b = 20;
console.log(b)
}

由上面的问题可以引申出下面写法：

var b = 10;
(function b() {
  'use strict'
  b = 20;
  console.log(b)
})() // "Uncaught TypeError: Assignment to constant variable."

var b = 10;
(function b() {
    window.b = 20; 
    console.log(b); // [Function b]
    console.log(window.b); // 20
})();

var b = 10;
(function b() {
    var b = 20; // IIFE内部变量
    console.log(b); // 20
   console.log(window.b); // 10 
})();