第四讲_JavaScript函数

1. 函数的概述

• JavaScript 函数是被设计为执行特定任务的代码块。
• JavaScript 函数通过 function 关键词进行定义。
• JavaScript 函数会在某代码调用它时被执行。

2. 无参函数

function 关键字后面为方法名，方法名后面的()是参数列表，当参数列表为空时，称为无参函数。

// 定义一个函数名为test的函数，且不带参数
function test() {
	// 函数体
}

// 调用函数
test();

3. 带参函数

当参数列表不为空时，称为带参函数。

调用一个带参函数时，可以传参也可以不传参。当不传参时，形参被赋值为 undefined。

// 定义一个函数名为test的函数，带两个参数
function test(param1, param2) {
	console.log(typeof param1);
  	console.log(typeof param2);
}

// 调用函数，但不传参
test();

定义函数时，不仅可以带参，还可以给参数指定默认值。

调用一个带参函数时，且参数有默认值。调用时，如果不传参，形参使用默认值；否则覆盖默认值。

// 定义一个函数名为test的函数，带两个参数，且有默认值
function test(name = '张三', age = 18) {
  console.log(typeof name);
  console.log(typeof age);
}

定义函数时，可以指定可变参数，可变参数必须放在参数列表的最后。可变参数是一个数组类型，装着所有多余的参数。

可变参数格式：...参数名

// 定义一个函数名为test的函数，带两个参数，且有默认值，最后还有一个可变参数
function test(name = '张三', age = 18, ...hobby) {
  console.log(typeof name);
  console.log(typeof age);
  console.log(typeof hobby)
}

// 调用函数时，传入5个参数，多余的3个参数会放到可变参数中
test('李四', 19, '篮球', '羽毛球', '足球')

4. 匿名函数

没有名称的函数称为匿名函数。

function () {
    console.log('我是匿名函数')
}

4.1 匿名表达式

把一个匿名函数赋值给一个变量，则称为函数表达式。

let test = function () {
    console.log('我是匿名函数')
}

// 调用函数
test();

4.2 立即执行函数

不需要调用立即执行的函数，称为立即执行函数。

4.2.1 立即执行函数写法一

// 立即执行函数方式一
(function() {
    console.log('匿名函数')
})();

4.2.2 立即执行函数写法二

// 立即执行函数方式二
(function() {
    console.log('匿名函数')
}());

5. 闭包

闭包指的是有权访问另一个函数作用域中的变量的函数。被理解为定义在一个函数内部的函数，这样内部函数就可以访问到外部函数的局部变量。

// 外部的函数
function outer() {
    let n = 0;
	
	// 内部的函数
    function inner() {
    	// 可以访问外部函数的参数和变量
        console.log(n++);
    }
    return inner；
}

闭包的作用：用来创建私有的变量，避免全局变量的污染。

闭包的副作用：可能导致大量的变量不被垃圾回收机制回收，造成内存消耗大，甚至可能引起内存泄漏。

6. 箭头函数

箭头函数表达式的语法比传统的函数表达式更简洁：

• 箭头函数不会创建自己的 this，它只会从自己的作用域链的上一层沿用 this。
• 箭头函数不能用作构造函数。
• 箭头函数不能在其主体中使用 yield。

// () 为箭头函数的参数列表
// {} 为箭头函数的方法体
() => {}

 let students = ['张三', '李四', '王五'];

 // 给每个学生的名字加个学校名前缀
 let newStudents = students.map((student) => {
   return `清华：${student}`
 })

 console.log(newStudents);

7. 函数this指定

默认函数的this 指向其调用者，可以通过以下三个方法，修改其this的指向。

• call(argThis, param1, param2, …)：函数会被调用，修改其this指向argThis
• apply(argThis, params)：函数会被调用，函数参数通过数组接收，修改其this指向argThis
• bind(argThis)：函数不会调用，修改其this指向argThis

  let student1 = {
    name: "张三",
    age: 18
  };

  let student2 = {
    name: "李四",
    age: 19
  };

  let student3 = {
    name: "王五",
    age: 20
  };

  function getStudent() {
    console.log(this)
  }

  // 函数this默认指向调用者
  getStudent();

  // 修改函数this指向student1
  getStudent.call(student1);

  // 修改函数this指向student2
  getStudent.apply(student2);

  // 修改函数this指向student3
  let newGetStudent = getStudent.bind(student3);
  newGetStudent();