JavaScript 函数基础与变量作用域深入解析

函数的定义与调用

在 JavaScript 中，定义函数主要有两种等价的方式：

// 方式一：函数声明
function abs(x) {
  if (x >= 0) {
    return x;
  } else {
    return -x;
  }
}

// 方式二：函数表达式（匿名函数赋值）
var abs = function(x) {
  if (x >= 0) {
    return x;
  } else {
    return -x;
  }
}; // 注意末尾的分号

函数体内部一旦执行到 return 语句，函数即停止执行并返回结果。若未包含 return，函数默认返回 undefined。由于函数本质上是对象，变量名可视为指向该对象的引用。

第1步：理解参数传递特性

• 参数过多：JavaScript 允许传入多于定义的参数，多余参数被忽略。
  示例：abs(10, 'extra') 仍返回 10。
• 参数缺失：若参数少于定义数量，缺失参数值为 undefined。
  示例：abs() 中 x 为 undefined，若进行算术运算可能返回 NaN。

第2步：增强健壮性

为保证类型安全，建议在函数入口添加类型检查：

function abs(x) {
  if (typeof x !== 'number') {
    throw 'Not a number';
  }
  if (x >= 0) {
    return x;
  } else {
    return -x;
  }
}

不定参数处理

当函数需要接收任意数量的参数时，传统方案是使用 arguments 对象，现代方案则推荐使用 ES6 的 rest 参数。

使用 arguments 获取所有参数

function foo(x) {
  alert(x); // 10
  for (var i = 0; i < arguments.length; i++) {
    alert(arguments[i]); // 依次输出 10, 20, 30
  }
}
foo(10, 20, 30);

应用场景：实现可选参数逻辑。例如定义需 2-3 个参数的函数，可通过判断 arguments.length 动态调整赋值：

function foo(a, b, c) {
  if (arguments.length === 2) {
    c = b;
    b = null; // 赋予默认值
  }
}

使用 rest 参数简化操作

function foo(a, b, ...rest) {
  console.log('a = ' + a);
  console.log('b = ' + b);
  console.log(rest); // 数组形式 [3, 4, 5]
}

foo(1, 2, 3, 4, 5);
// a = 1
// b = 2
// Array[3, 4, 5]

foo(1);
// a = 1
// b = undefined
// Array[]

REST 参数必须位于参数列表末尾。若参数不足，它会初始化为空数组而非 undefined。

Return 语句的注意事项

JavaScript 引擎具备“自动加分号”（ASI）机制，这可能导致 return 意外中断：

// 错误写法
function foo() {
  return: // ASI在此处分号，返回undefined
  {name:'foo'}; // 此对象无法返回
}

正确做法是让左花括号紧跟 return 关键字，阻断分号添加：

function foo() {
  return {
    name: 'foo'
  };
}

变量作用域深度解析

函数级作用域 (var)

'use strict';
function foo() {
  var x = 1;
  x = x + 1;
}
// x = x + 2; // ReferenceError!

变量提升：JS 引擎会先将变量声明提升到函数顶部。以下代码等效于：

// 原始代码
function foo() {
  var x = 'Hello,' + y;
  alert(x);
  var y = 'Bob';
}

// 实际执行顺序
function foo() {
  var y;          // 先提升声明
  var x = 'Hello' + y; // y此时为undefined
  alert(x);
  y = 'Bob';      // 再赋值
}

建议：在函数开头集中使用 var 声明所有变量，避免混淆。

全局作用域与命名冲突

全局变量绑定在 window 对象上。多个脚本文件若使用相同全局变量或函数名，易引发冲突。解决方法是创建一个唯一的全局命名空间对象：

var MYAPP = {};
MYAPP.name = 'myapp';
MYAPP.version = 1.0;
MYAPP.foo = function() {
  return 'foo';
};

块级作用域 (let & const)

var 无法限定块级作用域（如 for 循环），循环外的变量仍可被访问。ES6 引入 let 解决此问题：

function foo() {
  var sum = 0;
  for (let i = 0; i < 100; i++) {
    sum += i;
  }
  // i += 1; // ReferenceError! i只在块内存在
}

常量定义

ES6 提供 const 定义常量，同样具备块级作用域。尝试修改常量不会报错但无效：

const PI = 3.14;
PI = 3;        // 修改失败，PI仍为3.14

总结

掌握函数定义规范、合理使用 arguments 或 rest 处理参数，以及遵循 let/const 的现代作用域规则，是编写稳健 JavaScript 代码的关键。以上就是关于 JavaScript 函数基础与变量作用域解析的详细内容，更多关于 JavaScript 编程技巧的资料请关注本站其它相关文章！