从函数内变量的访问，到匿名函数和自调用函数

最新推荐文章于 2022-05-16 14:31:19 发布

shayloyuki

最新推荐文章于 2022-05-16 14:31:19 发布

阅读量608

点赞数

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/shaylo/article/details/121517690

版权

本文介绍了JavaScript中的局部变量与全局变量的访问规则，强调了使用局部变量以保持代码清晰的重要性。深入讲解了匿名函数的定义及调用方式，特别是自调用函数（IIFE）的作用，如封闭作用域、避免全局变量污染。同时，详细阐述了IIFE的实现原理和常见形式，并讨论了分号的使用规范。此外，还提到了自调用函数中传入window对象和undefined参数的原因。

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

变量的分类：local variables 和 global varibles

在学习函数内定义的变量（local variables局部变量）时，看到有提示：推荐尽可能使用 local variables，不要使用 global variables 全局变量，因为这样可以让代码干净且易于理解。

见链接：Functions (javascript.info)

突然想到，这不就是之前看到过的“避免污染全局变量”么，突然一下子茅塞顿开。把之前的项目代码翻来看，突然就理解了之前头疼不已的自调用函数问题。

下面记录一下：

变量的分类：local variables 和 global varibles

只有函数内部 和 语句 statements 的{}符号内 的代码属于 block 块级作用域，在这里面声明的变量叫做 local variables 局部变量；除此之外地方声明的变量叫做 global varibles 全局变量。

访问规则是：

局部变量只能在 block 内访问，不能在全局访问。比如说函数内部声明的变量 a, 在这个函数外就访问不到（对于访问不到的属性名或变量，JavaScript 会返回 undefined 表示 unassigend 未赋值）。
但是对于全局变量，可以在任意位置访问，也就是说，在 block 中也能访问（这里解释一下：全局变量是 window 对象的某个属性名。比如全局变量 b，就可以通过 window.b 在任意位置访问到）。

因此，可以通过下面第 118 行代码来暴露函数内部的对象 Game，供函数外部调用，让 Game 变为一个全局变量。

具体做法是：

原理：

对于一个对象 obj 来说，如果 obj 内部没有属性名 key, 就可以通过赋值的方式添加属性名，即 obj.key = 'something' 。

因此，在这里通过 window.Game = Game，直接给 window 增加了Game这个属性名，让 Game 成为了全局变量，在函数外部也可以被调用。这样就突破了 block 块级作用域对局部变量 Game的限制。

匿名函数

定义函数一般有两种方式：

参考链接：JavaScript匿名函数的理解_w3cschool

第一种：function 关键字

// function 关键字定义
function foo(x) {
    return x * 2
}

第二种：匿名函数

// 匿名函数定义

// 方式一：赋值给变量
let foo = function (x) {
    return x * 2
}

// 方式二：自调用函数创建
(function (x) {
    return x * 2
})(5);

匿名函数的调用

匿名函数，即没有函数名的函数，因此不能直接被外部调用，只能通过赋值或者自执行函数调用。

参考链接：(4条消息) JS 匿名函数——几种不同的调用方式_足各路-优快云博客_js 匿名函数

自调用函数IIFE

作用

在定义函数的时候就执行函数，因此又叫自执行函数。

它可以封闭作用域，在作用域外无法调用其内部的函数，避免作用域内定义的变量污染全局变量。比如上图中，就无法在自调用函数外访问 runSnake 等函数（但是由于通过 window.Game = Game 把函数内部的 Game 对象暴露给了外部，因此在外部可以通过 window.Game 访问到局部变量 Game，这样就限定了访问局部变量的方式）。