JS进阶笔记3

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

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
  

常用内置函数