掌握HTML中JavaScript函数的定义与调用机制是封装可复用代码块的关键，包括：一、function声明（可提升）；二、函数表达式（不提升）；三、箭头函数（ES6简洁语法）；四、new Function()动态创建；五、HTML内联事件调用。
如果您在编写网页交互逻辑时需要封装可复用的代码块，则必须掌握HTML中JavaScript函数的定义与调用机制。以下是多种可行的定义与调用方式：
一、使用function关键字声明命名函数
该方式定义的是函数声明（Function Declaration），在脚本执行前会被提升（hoisted），因此可在声明语句之前调用。
1、在<script>标签内或外部JS文件中，以function开头，后接函数名、圆括号及花括号包裹的函数体。</script>
2、圆括号中可声明零个或多个形式参数，多个参数之间用英文逗号分隔。
立即学习“前端免费学习笔记（深入）”；
3、花括号内编写具体执行逻辑，如需返回值，使用return语句加表达式。
4、调用时直接写函数名并传入实际参数，例如：calculateTotal(199, 0.15)。
二、使用函数表达式定义匿名函数
该方式将函数赋值给变量，属于函数表达式（Function Expression），不会被提升，必须在赋值完成之后才能调用。
1、用const、let或var声明变量，右侧使用function关键字（不写函数名）定义函数。
2、例如：const formatPrice = function(price) { return '¥' + price.toFixed(2); };
3、调用时使用变量名加括号，如：formatPrice(129.9)。
4、支持立即执行函数表达式（IIFE），如：(function(){ console.log('已执行'); })();。
三、使用箭头函数语法定义函数
箭头函数是ES6引入的简洁写法，适用于简短逻辑，不绑定自身this，不可作为构造函数使用。
1、单个参数时可省略圆括号，无参数需保留空括号，多个参数必须用小括号包裹。
2、函数体为单条返回语句时，可省略花括号与return关键字，如：x => x * 2。
3、含多条语句时，必须用花括号包裹，并显式使用return。
4、调用方式与普通函数一致，前提是已将箭头函数赋值给变量，如：double(8)（其中double = x => x * 2）。
四、使用new Function()动态创建函数
该方式通过字符串参数构造函数体，属于运行时动态生成，性能较低且存在安全风险，仅适用于特殊场景。
1、传入任意数量的字符串参数，最后一个为函数体字符串，其余为参数名字符串。
2、例如：const multiply = new Function('a', 'b', 'return a * b');
3、调用时直接使用变量名加括号，如：multiply(7, 6)。
4、该函数无法访问外层作用域变量，仅依赖传入参数和全局对象。
五、在HTML元素事件中内联调用函数
该方式将函数调用直接写在HTML标签的事件属性中，便于快速绑定，但不利于维护和关注点分离。
1、在按钮、链接等元素上设置onclick、onchange等事件属性。
2、属性值中直接写函数名加括号，或内联JavaScript语句，如：onclick="showMessage('欢迎')"。
3、确保对应函数已在页面中正确定义，否则触发时会报ReferenceError。
4、若需传入DOM元素本身，可使用this关键字，如：onclick="handleClick(this)"。
