网站
引入
自定义函数就是自己给一段代码起名字，把它封装成一个可以重复使用的功能。
当一段代码会多次使用，或者一段逻辑比较独立时，就可以写成自定义函数。
正文
定义
定义
自定义函数是开发者自己创建的函数，用来封装某个具体功能，需要时通过函数名调用。
JS 内置了很多函数，比如 console.log()。自定义函数就是自己写一个类似的工具。
语法
function 函数名(参数) {
// 函数体
return 返回值;
}例如：
function sayHello() {
console.log("你好");
}
sayHello();sayHello 是自己定义的函数名，sayHello() 是调用这个函数。
为什么需要自定义函数
如果没有函数，重复逻辑就要写很多遍。
console.log("你好，Tom");
console.log("你好，Jerry");
console.log("你好，Lucy");写成函数后，可以复用同一段逻辑。
function sayHello(name) {
console.log("你好，" + name);
}
sayHello("Tom");
sayHello("Jerry");
sayHello("Lucy");这样代码更清楚，也方便后面修改。
函数名
函数名用来说明这个函数做什么。
function getUserName() {
return "Tom";
}函数命名建议：
- 使用有意义的名字
- 通常使用驼峰命名法，例如
getUserName - 动作类函数可以用动词开头，例如
get、set、show、create
不要写太随意的名字：
function a() {
console.log("学习 JS");
}这种名字看不出函数作用。
参数
参数可以让自定义函数更灵活。
function add(a, b) {
return a + b;
}
console.log(add(1, 2));
console.log(add(10, 20));a 和 b 是参数，不同调用可以传入不同数据。
如果函数内部需要外部数据，通常就可以用参数传进去。
返回值
如果函数需要把结果交给外面继续使用，就用 return。
function getTotal(price, count) {
return price * count;
}
let total = getTotal(10, 3);
console.log(total);这里 getTotal(10, 3) 返回 30，然后保存到 total 中。
如果只是执行一个动作，不一定需要 return。
function showMessage() {
console.log("保存成功");
}
showMessage();封装页面操作
自定义函数经常用来封装页面操作。
<p class="text">旧内容</p>
<button id="btn">修改</button>const text = document.querySelector(".text");
const btn = document.querySelector("#btn");
function updateText() {
text.textContent = "新内容";
}
btn.addEventListener("click", updateText);这里 updateText() 是自己定义的函数，点击按钮时执行它。
拆分逻辑
自定义函数也可以用来拆分复杂逻辑。
function getTotal(price, count) {
return price * count;
}
function showTotal(total) {
console.log("总价是：" + total);
}
let total = getTotal(10, 3);
showTotal(total);可以把不同职责拆开：
getTotal()：负责计算数据showTotal()：负责显示结果
常见写法
| 写法 | 作用 |
|---|---|
function fn() {} | 自定义一个函数 |
fn() | 调用自定义函数 |
function fn(a, b) {} | 定义带参数的函数 |
return result; | 返回函数处理结果 |
btn.addEventListener("click", fn); | 把函数作为事件处理逻辑 |
特点
- 自定义函数是自己创建的函数
- 函数名应该能看出功能
- 函数声明后不会自动执行，需要调用
- 参数可以让函数处理不同数据
return可以把结果交给外部继续使用- 重复代码适合封装成函数
- 一个函数最好只负责一个相对明确的功能
理解
自定义函数可以理解为自己做工具。
如果某段代码以后还会用，或者这段逻辑有明确作用，就可以把它做成一个函数。
参数是给工具的材料，return 是工具处理完交回来的结果。
我理解自定义函数的重点是：把重复的、独立的逻辑封装起来，让代码更好读、更好改。
引出
理解了自定义函数之后，可以继续学习 JS 函数调用方式，看看函数在不同场景下是怎么被调用的。