可复用代码块—”函数“——WEB开发系列49

JavaScript 中，函数构成了另一个核心概念。它们允许开发者将执行特定任务的代码封装成一个独立的代码块，这样就可以在任何需要的时候通过简单的指令来执行这段代码，从而避免了重复编写相同的代码段。

---

什么是函数？

函数是一个代码块，它可以执行特定的任务。在 JavaScript 中，函数通常通过关键字 ​​function​​ 来定义，包含在一对大括号 ​​{}​​​ 中。

函数的基本语法

以下是一个定义和调用函数的示例：

// 定义一个简单的函数
function greet(name) {return "Hello, " + name + "!";
}// 调用函数
console.log(greet("Alice")); // 输出: Hello, Alice!

示例中，​​greet​​ 函数接受一个参数 ​​name​​，并返回一个字符串。在调用这个函数时，我们传入了参数 ​​"Alice"​​。

---

可以在哪找到函数？

JavaScript 中，函数无处不在，在编写代码的每个部分都能找到函数的身影。函数不仅可以由开发者自定义，也有很多内置函数可供我们使用。浏览器环境中提供了许多内置函数，能够帮助我们处理字符串、数组等常见操作。

1. 字符串函数

例如，字符串的 ​​.toUpperCase()​​ 和 ​​.substring()​​​ 方法：

let str = "hello world";// 将字符串转换为大写
console.log(str.toUpperCase()); // 输出: HELLO WORLD// 获取子字符串
console.log(str.substring(0, 5)); // 输出: hello

2. 数组函数

JavaScript 数组提供了一系列内置方法，如 ​​.push()​​, ​​.pop()​​, 和 ​​.map()​​：

let arr = [1, 2, 3];// 添加元素到数组末尾
arr.push(4);
console.log(arr); // 输出: [1, 2, 3, 4]// 删除数组末尾的元素
arr.pop();
console.log(arr); // 输出: [1, 2, 3]// 使用 map 方法创建一个新数组
let doubled = arr.map(num => num * 2);
console.log(doubled); // 输出: [2, 4, 6]

3. 生成随机数

使用 ​​Math.random()​​​ 函数可以生成 0 到 1 之间的随机数：

let randomNum = Math.random();
console.log(randomNum); // 输出: 0.123456789 ...

---

函数与方法

函数与方法有很大的相似性，方法是附加在对象上的函数。我们可以将对象视为拥有自己属性和方法的容器。

以下是一个简单的示例：

let person = {name: "Alice",greet: function() {return "Hello, " + this.name + "!";}
};// 调用方法
console.log(person.greet()); // 输出: Hello, Alice!

​​greet​​ 是 ​​person​​​ 对象的一个方法，它可以访问对象的属性。

---

调用函数

直接调用

函数可以通过其名称直接调用，也可以传递参数：

function add(a, b) {return a + b;
}console.log(add(2, 3)); // 输出: 5

​​call​​ 和 ​​apply​​ 方法

JavaScript 还提供了 ​​call​​ 和 ​​apply​​ 方法来调用函数，并显式设置 ​​this​​​ 的值：

function showThis() {console.log(this);
}let obj = { value: 42 };showThis.call(obj); // 输出: { value: 42 }
showThis.apply(obj); // 输出: { value: 42 }

---

函数参数

可选参数

JavaScript 中，函数参数是可选的。即使我们没有传递参数，函数仍然可以执行：

function greet(name = "Guest") {return "Hello, " + name + "!";
}console.log(greet()); // 输出: Hello, Guest!

默认参数

我们可以为函数参数设置默认值，以防调用时未提供参数：

function multiply(a, b = 1) {return a * b;
}console.log(multiply(5)); // 输出: 5
console.log(multiply(5, 2)); // 输出: 10

---

匿名函数和箭头函数

匿名函数是没有名称的函数，常用于回调函数中：

setTimeout(function() {console.log("This is an anonymous function!");
}, 1000);

箭头函数

箭头函数是一种更简洁的函数表示法，使用 ​​=>​​ 语法。它在许多情况下可以使代码更简洁：

const add = (a, b) => a + b;console.log(add(2, 3)); // 输出: 5

箭头函数实时示例

箭头函数也可以用于更复杂的操作，例如数组的过滤和映射：

let numbers = [1, 2, 3, 4, 5];// 使用箭头函数过滤偶数
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4]

---

函数作用域和冲突

函数作用域是指在函数中定义的变量的可访问范围。JavaScript 中有全局作用域和局部作用域：

局部作用域

当我们在函数内部定义变量时，它们只能在这个函数内部访问：

function myFunction() {let localVar = "I'm local!";console.log(localVar); // 输出: I'm local!
}myFunction();
// console.log(localVar); // 会抛出 ReferenceError: localVar is not defined

全局作用域

全局变量可以在任何地方访问：

let globalVar = "I'm global!";function anotherFunction() {console.log(globalVar); // 输出: I'm global!
}anotherFunction();

变量冲突

当我们在内层函数中定义了与外层函数同名的变量时，会发生变量冲突：

let v = "I'm global!";function scopeTest() {let v = "I'm local!";console.log(v); // 输出: I'm local!
}scopeTest();
console.log(v); // 输出: I'm global!