JavaScript 函数调用
关键要点
- JavaScript 函数调用是通过函数名后跟括号执行函数，参数可以灵活传递。
- 有四种调用方式：作为函数、方法、构造函数，或使用
call()/apply()，影响this的值。 this关键字根据调用方式指向不同对象，需注意全局调用可能导致命名冲突。- 参数处理支持
arguments和剩余参数（ES6），适合处理不定数量参数。
函数调用概述
JavaScript 函数调用是指通过函数名后跟括号来执行函数的过程。以下是详细讲解，适合初学者理解。
函数定义与调用
函数通过 function 关键字定义，例如：
function add(a, b) {
return a + b;
}调用时，直接写函数名加括号，并可传递参数：
add(5, 3); // 返回 8参数处理
- 如果参数少于定义数量，未传递的参数为
undefined。 - 多余参数可通过
arguments对象访问，或用 ES6 的剩余参数...收集。例如：
function sum(...numbers) {
return numbers.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3); // 返回 6调用方式与 this
JavaScript 有四种调用方式，this 的值不同：
- 作为函数：直接调用，
this指向全局对象（浏览器中为window）。 - 示例：
myFunction(10, 2)，this是window。 - 作为方法：函数是对象属性，
this指向该对象。 - 示例：
myObject.method()，this是myObject。 - 作为构造函数：用
new调用，this指向新对象。 - 示例：
new Person("John")，this是新创建的Person实例。 - 使用
call()/apply()：显式指定this，call()用参数列表，apply()用数组。 - 示例：
myFunction.call(obj, 10, 2)，this是obj。
返回值
函数用 return 语句返回值，无 return 时返回 undefined。注意自动分号插入可能导致问题，例如：
return // 自动分号
{ value: 1 }; // 返回 undefined改为：
return { value: 1 }; // 正确详细报告
以下是关于 JavaScript 函数调用的全面中文讲解，涵盖所有相关细节，适合深入学习。
函数定义与基本调用
函数是 JavaScript 中的基本组件，用于执行特定任务或计算值。定义方式如下：
function myFunction(a, b) {
return a * b;
}调用函数时，使用函数名后跟括号，括号内可传递参数。例如：
myFunction(10, 2); // 返回 20- 执行时机：函数在定义时不会执行，只有在调用时才会运行。
- 参数传递：参数可以是任意类型（数字、字符串、对象等），顺序对应函数定义的参数。
参数处理与灵活性
JavaScript 函数对参数数量没有严格限制：
- 少于参数：未传递的参数值为
undefined，可通过默认参数处理。例如：
function greet(name = "Guest") {
return "Hello, " + name;
}
greet(); // 返回 "Hello, Guest"- 多于参数：多余参数不会报错，可通过以下方式访问：
arguments对象：函数内部可用arguments访问所有参数，类似数组但不是数组。例如：function foo(x) { for (var i = 0; i < arguments.length; i++) { console.log(arguments[i]); } } foo(10, 20, 30); // 输出 10, 20, 30arguments.length可判断参数个数，适合处理不定参数。- 示例：
abs()可检查arguments.length === 0返回0。
- 剩余参数（ES6）：使用
...rest语法，收集多余参数为数组，必须是最后一个参数。例如：function sum(first, ...rest) { return first + rest.reduce((a, b) => a + b, 0); } sum(1, 2, 3, 4); // 返回 10- 剩余参数是真正数组，可直接用
map、reduce等方法。 - 如果参数少，
rest为空数组而非undefined。
- 剩余参数是真正数组，可直接用
函数调用方式与 this 关键字
JavaScript 函数有四种调用方式，每种方式影响 this 的值。this 是保留关键字，指向函数执行时的当前对象，不能修改。
| 调用方式 | 描述 | this 值 | 示例 |
|---|---|---|---|
| 作为函数调用 | 直接调用，属于全局对象（浏览器中为 window） | 全局对象（window） | myFunction(10, 2)，this 是 window，不推荐因可能命名冲突 |
| 作为方法调用 | 函数定义为对象方法，this 指向该对象 | 调用对象 | myObject.fullName()，this 是 myObject，返回对象属性组合 |
作为构造函数调用（用 new） | 用 new 关键字调用，创建新对象，this 指向新对象 | 新创建的对象 | new Person("John", "Doe")，this 是新 Person 实例，初始化属性 |
使用 call() 或 apply() | 显式指定 this，call() 用参数列表，apply() 用数组 | 第一个参数（对象） | myFunction.call(obj, 10, 2)，this 是 obj，严格模式下非全局对象处理 |
- 全局调用注意事项：全局函数可能导致命名冲突和安全漏洞，不推荐使用。
- 严格模式：在
'use strict'下，this在全局调用时不会自动指向window，需注意。
返回值与注意事项
函数通过 return 语句返回值，无 return 时返回 undefined。需注意 JavaScript 的自动分号插入（ASI）规则，可能导致意外行为：
- 正确写法：
function getObject() {
return { name: "foo" };
}- 错误写法（因 ASI）：
function getObject() {
return // 自动插入分号
{ name: "foo" }; // 返回 undefined
}解决方法：确保 return 和返回值在同一行。
最佳实践与应用
- 避免全局函数：全局函数可能与其他脚本冲突，建议定义为对象方法或模块。
- 参数检查：在函数内部检查参数类型和数量，避免运行时错误。例如：
function abs(x) {
if (typeof x !== 'number') {
throw 'Not a number';
}
return x >= 0 ? x : -x;
}- 使用剩余参数：处理不定数量参数时，优先使用
...rest，比arguments更现代。例如，计算和：
function sum(...numbers) {
return numbers.reduce((acc, curr) => acc + curr, 0);
}
sum(1, 2, 3); // 返回 6- 构造函数与
new：用new调用时，函数应初始化对象属性，适合创建实例。
总结
JavaScript 函数调用灵活，支持多种方式（函数、方法、构造函数、call()/apply()），this 的值随调用方式变化。参数处理通过 arguments 或剩余参数实现，返回值需注意自动分号插入。遵循最佳实践可提高代码可读性和可维护性。