小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
我们经常需要在脚本的许多地方执行很相似的操作。函数是程序的主要“构建模块”。函数使该段代码可以被调用很多次，而不需要写重复的代码。本篇主要就是简单的总结一下JS函数的几种创建方式。
前言
👉 JavaScript 引擎会在什么时候创建函数？
👉 什么时候选择函数声明与函数表达式？
👉 上期回顾：JavaScript的各种类型转换和转换规则大全
💥 排雷：JavaScript零基础系列
函数的创建方式
使用【函数声明】创建函数
function showMessage() {
console.log( 'Hello everyone!' );
}
使用【函数表达式】创建函数
let sayHi = function() {
console.log( "Hello" );
};
JavaScript 引擎会在什么时候创建函数？
- 【函数表达式】是在代码执行到达时被创建，并且仅从那一刻起可用。
- 而【函数声明】创建的函数被定义之前，它就可以被调用。
sayHi("John"); //✅ Hello, John
function sayHi(name) {
alert( `Hello, ${name}` );
}
sayHi("John"); //❌ error!
let sayHi = function(name) { // (*) no magic any more
alert( `Hello, ${name}` );
};
什么时候选择函数声明与函数表达式？
- 当我们需要声明一个函数时，首先考虑【函数声明】语法
因为我们可以在声明这些函数之前调用这些函数。对代码可读性也更好，因为在代码中查找
function f(…) {…}比let f = function(…) {…}更容易。函数声明更“醒目”。
- 当函数声明不适合对应的任务时，才应使用函数表达式
🎨例：当你需要根据条件声明一个函数时
使用【函数声明】创建
使用【函数表达式】创建
使用箭头函数创建
📖写法：
不带花括号：(...args) => expression — 【右侧是一个表达式：函数计算表达式并返回其结果】。 带花括号：(...args) => { body }— 【花括号允许我们在函数中编写多个语句，但是我们需要显式地 return 来返回一些内容。】
🎨示例：
单行箭头函数
let sum = (a, b) => a + b; //带参数
let double = n => n * 2;// 有一个参数
let sayHi = () => alert("Hello!"); //不带参数
多行箭头函数
let sum = (a, b) => { // 花括号表示开始一个多行函数
let result = a + b;
return result; // 如果我们使用了花括号，那么我们需要一个显式的 “return”
};
JS里内置的几个交互函数
-
提出一个问题，并返回访问者输入的内容，如果他按下「取消」则返回
null。 -
提出一个问题，并建议用户在“确定”和“取消”之间进行选择。选择结果以
true/false形式返回。 -
输出一个
消息。
这些函数都会产生 模态框，它们会暂停代码执行并阻止访问者与页面的其他部分进行交互，直到用户做出回答为止。
结语
文章会持续更新，优化，以及重构！
参考资料：
🎨【点赞】【关注】不迷路，更多前端干货等你解锁
往期推荐
