2.4 函数
函数声明方法一：有名函数
function 函数名([参数列表]) { 函数体; [return [表达式];] }
函数声明方法二：函数表达式（匿名函数）
--不需要函数名 --常用于定义事件的回调函数 变量名 = function ([参数列表]) { 函数体; [return [表达式];] }
例：匿名函数作为回调函数
<script> let btns = document.querySelectorAll("button"); btns.forEach(function (btn) { // 匿名函数 btn.addEventListener("click", function () { // 匿名函数 let bgColor = this.dataset.bgColor; bind = setTimeout(function () { // 匿名函数 console.log(bgColor); document.body.style.backgroundColor = bgColor; }, 1000, bgColor); }); }); </script>
例：匿名函数作为表达式赋值给变量
// 定义匿名函数并作为表达式赋值给变量 var fn = function(name) { console.log(`Hello ${name}`); // 字符串模板 }; // 通过变量名调用匿名函数 fn('VUE'); // Hello VUE
函数参数:
- 参数列表可选，不指定类型，传递时可接受任意类型数据，调用时如实参未指定，默认值为undefined
- 从ES2015开始：可为参数指定默认值
函数中的this
- JavaScript中的this通常指向当前对象
- 当前对象指调用当前正在执行的函数（方法）的对象
- 在全局环境中：
- 非严格模式下，this指向window（浏览器环境）
- 严格模式下，this为undefined
- setTimeout和setInterval中延迟调用的方法都在全局环境中执行
定义函数方式三: Lambada 表达式
- Lambada 表达式（箭头函数）：比函数表达式更加简洁，不绑定this、arguments、super
- 语法形式1：(参数1, 参数2, …, 参数N) => { 函数声明; }
var f = (num1, num2) => { return num1*num2 }; console.log(f(3, 4)); // 12
- 箭头函数-语法形式2：(参数1, 参数2, …, 参数N) => 表达式（单一）
var f = (num1, num2) => num1*num2; console.log(f(3, 4)); // 12
- 箭头函数-语法形式3：单一参数 => {函数声明}
var f = num => num*num; console.log(f(3)); // 9
- 箭头函数-语法形式4：() => {函数声明} // 无参数
var f = () => 'hello world'; console.log(f()); // hello world
常用内置函数
