函数与作用域

约 2200 字大约 7 分钟

2025-11-24

函数定义

思考

定义函数有哪些方法，它们有什么区别？

1. 函数声明（具名函数）

console.log(sum(1, 2)) // 可以提前调用
function sum(a, b) {
  console.log(arguments) // [Arguments] { '0': 1, '1': 2 }
  return a + b;
}

// 特点：
console.log(sum(1, 2)); // 3
console.log(sum.name); // "sum"

关键特性：

函数提升：可以在声明前调用
有自己的 name 属性
拥有 arguments 对象
有自己的 this 绑定（根据直接调用它的方式动态绑定）

2. 函数表达式

// 匿名函数表达式
const multiply = function(a, b) {
  return a * b;
};

// 命名函数表达式（推荐）
const divide = function div(a, b) {
  return a / b;
};

关键特性：

无函数提升：必须先定义后使用
可匿名也可命名
适合作为回调函数、IIFE（立即调用函数表达式）
this 绑定根据调用方式动态确定

// console.log(square(5)); // ReferenceError - 不能提前调用
const square = function(n) {
  return n * n;
};
console.log(square(5)); // 25 - 必须先定义

// 定义时可以立即执行函数，末尾添加括号，表示立即执行
const test = function IIFE() {
  console.log(1);
}()

3. 箭头函数 (ES6+)

// 基本语法
const add = (a, b) => a + b;

// 多参数需要括号
const greet = (name, age) => `Hello ${name}, age ${age}`;

// 单参数可省略括号
const double = n => n * 2;

// 函数体多条语句需要大括号和 return
const calculate = (a, b) => {
  const sum = a + b;
  const product = a * b;
  return { sum, product };
};

关键特性：

无函数提升
没有自己的 this（继承自父作用域，定义时就确定）
没有 arguments 对象
不能作为构造函数（不能用 new）
没有 prototype 属性

// this 绑定差异
const obj = {
  value: 42,
  regular: function() {
    console.log(this.value); // 42 - this 指向 obj
  },
  arrow: () => {
    console.log(this.value); // undefined - this 指向外层（全局）
  }
};

obj.regular(); // 42
obj.arrow();   // undefined

4. Function 构造函数

const dynamicFunc = new Function('a', 'b', 'return a + b');
console.log(dynamicFunc(2, 3)); // 5

// 从字符串动态创建
const operation = 'multiply';
const funcBody = operation === 'add' ? 'return a + b' : 'return a * b';
const customFunc = new Function('a', 'b', funcBody);

关键特性：

完全动态创建
性能差（每次都会解析字符串）
安全问题（可能执行恶意代码）
无法访问外层作用域变量（只能在全局作用域运行）

5. 生成器函数

function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = numberGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2

关键特性：

可暂停和恢复执行
返回生成器对象，不是直接返回值
使用 yield 关键字

什么是闭包

思考

什么是闭包？
闭包的作用是什么？

闭包是指一个函数能够记住并访问它的词法作用域，即使这个函数在其词法作用域之外被调用。 它发生在当一个函数嵌套在另一个函数内部时，内部函数可以访问外部函数的变量和参数，即使外部函数已经执行完毕并返回。

简单来说，闭包就是“函数 + 函数声明时的词法作用域”组合形成的一个整体。

闭包的特性

内部函数可以访问外部函数的变量。
外部函数执行完成后，其作用域不会立即销毁，而是被闭包保留。
闭包可以让变量的生命周期延长，直到不再有任何引用为止。

闭包的作用

数据封装与信息隐藏：通过闭包可以创建私有变量，避免全局污染。
回调函数和事件处理：在异步编程中，闭包常用于保存状态。
工厂函数：通过闭包返回特定功能的对象。

示例代码

function outerFunction() {
    let outerVariable = "I'm outside!";

    function innerFunction() {
        console.log(outerVariable); // 访问外部函数的变量
    }

    return innerFunction;
}

const closure = outerFunction();
closure(); // 输出: I'm outside!

在这个例子中，innerFunction 是一个闭包，它记住了 outerFunction 的作用域，并能够在 outerFunction 执行完毕后继续访问 outerVariable。

闭包的注意事项

内存泄漏：由于闭包会持有对外部作用域的引用，如果未正确释放，可能导致内存占用过高。
性能问题：过多使用闭包可能会影响程序性能，尤其是在循环或大量嵌套的情况下。

作用域（Scope）

思考

什么是作用域？

作用域是变量、函数或对象的可访问范围，决定了代码中哪些部分可以访问这些标识符。JavaScript 中有以下作用域类型：

1. 全局作用域

定义在函数或代码块外的变量

可在代码任何位置访问

let globalVar = "全局变量"; // 全局作用域
function show() {
  console.log(globalVar); // 可以访问
}

2. 函数作用域

通过 var 在函数内定义的变量

只能在函数内部访问

function func() {
  var localVar = "局部变量"; // 函数作用域
  console.log(localVar); // 可以访问
}
console.log(localVar); // 报错：localVar未定义

3. 块级作用域（ES6+）

通过 let/const 在代码块（{}）内定义的变量

只能在代码块内访问

if (true) {
  let blockVar = "块级变量"; // 块级作用域
  console.log(blockVar); // 可以访问
}
console.log(blockVar); // 报错：blockVar未定义

作用域链（Scope Chain）

思考

什么是作用域链？

作用域链是 JavaScript 执行上下文中的核心机制，它定义了标识符解析的静态规则。作用域链在函数创建时基于词法环境确立，体现了 JavaScript 的词法作用域特性。

从实现角度看，作用域链是一个由变量对象组成的链表结构，规定了引擎在访问变量时的查找路径。当在某个执行上下文中访问标识符时，引擎会遵循以下解析顺序：

首先在当前执行上下文的变量对象（活动对象）中查找
若未找到，则沿作用域链向上在外层执行环境的变量对象中查找
递归执行此过程，直至抵达全局执行上下文的变量对象
若全局上下文中仍未找到该标识符的定义，则抛出 ReferenceError

这一机制确保了变量访问的确定性和可预测性，同时也是闭包实现的理论基础——函数通过维护其定义时的作用域链，得以在创建它的执行环境销毁后仍能访问其中的变量。

拓展阅读：JavaScript 中的作用域链

立即执行函数

思考

说说对立即执行函数的理解？

立即执行函数（IIFE）是指在函数声明后立即执行的函数表达式。它会形成一个独立的作用域，外部无法访问内部私有属性。

语法为使用括号将函数包裹并跟一个小括号，小括号在括号内外都可。

console

Click the run button to execute the code ...

new fn 与 new fn()

思考

new fn 与 new fn() 有什么区别？

new 运算符的语义定义如下：

new Constructor[([arguments])]

方括号 [] 表示可选。这意味着：

当构造函数不需要参数时，括号 () 是可选的。
new fn 和 new fn() 在 JavaScript 引擎（如 V8）中会被解析为完全相同的抽象操作，都会创建一个新的对象实例，并执行构造函数体内的代码。

function Person() {
  this.name = 'Master';
}

const p1 = new Person;
const p2 = new Person();

console.log(p1.name); // 'Master'
console.log(p2.name); // 'Master'
console.log(p1 instanceof Person); // true
console.log(p2 instanceof Person); // true

两者在功能上完全相同，都会执行构造函数并创建实例。区别仅在于是否传递参数和运算符优先级。

是否传递参数


function Person(name) {
  this.name = name;
}

// 带括号：可以传参
const p1 = new Person('Alice');
console.log(p1.name);  // "Alice"

// 不带括号：无法传参（相当于传 undefined）
const p2 = new Person;
console.log(p2.name);  // undefined

运算符优先级

new fn：先调用 fn,再 new 实例。
new fn()：先 new 实例，再调用 fn。

像代码块1一样，在不访问实例属性的时候，两者没有区别。但除此之外，由于是否有 () 会改变语句的解析优先级，就可能会导致一些问题。

console

Click the run button to execute the code ...

new Foo().name 相当于 (new Foo()).name ,先创建实例，再通过实例访问属性，所以能够访问属性，结果为 'Foo' 。 new Foo.name 相当于 new (Foo.name) ,先访问实例为 undefined ，所以 mew undefined 会抛出错误。

HTML

CSS

JavaScript

vue

react

函数与作用域

函数定义

1. 函数声明（具名函数）

2. 函数表达式

3. 箭头函数 (ES6+)

4. Function 构造函数

5. 生成器函数

什么是闭包

闭包的特性

闭包的作用

示例代码

闭包的注意事项

作用域（Scope）

1. 全局作用域

2. 函数作用域

3. 块级作用域（ES6+）

作用域链（Scope Chain）

立即执行函数

JS code example

new fn 与 new fn()

是否传递参数

运算符优先级

JS code example