现代 JavaScript 从头再来（五）：函数基础

函数

就是为了复用代码，将代码分模块

js 中函数不是一个特殊的类型，而是一个值

函数声明

在执行代码块之前，内部算法会先处理函数声明，函数声明只在它所在的代码块中可见

let age = 18;
if (age > 18) {
	getAge(); // 18
	function getAge() {
		console.log(age);
	}
}
getAge(); // 报错

局部变量和全局变量

局部变量：在函数内部声明的变量，只在函数内部可见

全局变量：在任何函数之外部声明的变量，在任意函数中可见

let age = 3; // 外部变量，如果没有外层函数也是全局变量

function showAge() {
  let age = 18; // 声明一个局部变量，此处会遮蔽外部的 age
  console.log(age); // 18
}

showAge();

console.log(age); // 3，局部变量在函数外部不可见

参数

可以通过参数将任意数据传递给函数

// 函数 add 被声明，并带有两个参数 a，b
function add(a, b) {
  return a + b;
}
add(1, 2); // 函数 add 被调用，两个参数分别为 1，2

• 参数（parameter）是函数声明中括号内列出的变量

• 参数（argument）是调用函数时传递给函数的值

默认值

// 函数参数未设置默认值
function add(a, b) {
  return a + b;
}
let result = add(1); // 只传递了一个参数
console.log(result); // NaN，参数 b 未提供，变为 undefined，相当于 1 + undefined

使用 = 为函数声明中的参数指定默认值

function add(a, b = 0) {
  return a + b;
}
console.log(add(1)); // 1，使用默认值 b = 0
console.log(add(1, 2)); // 3，使用参数值 b = 2

返回值

函数都有返回值，使用 return 将值返回给调用代码：

function add(a, b) {
  return a + b;
}
console.log(add(1, 2)); // add(1, 2) 调用函数，接收返回值 3

空值的 return 或没有 return 的函数返回值为 undefined

function foo() {}
console.log(foo() === undefined); // true

function fun() {
  return;
}
console.log(fun() === undefined); // true

函数表达式

// 函数表达式允许省略函数名
let sayHi = function () {
	console.log('hello');
}

箭头函数

// 使用箭头函数
let func = (a, b) => {
  return a + b;
};
// 只有一个参数可以省略括号 ()
func = a => {
  return a;
};
// 没有参数
func = () => {};
// 只有一行表达式可以省略花括号 {}
func = (a, b) => a + b;

// 函数表达式版本
let func1 = function(a, b) {
	reutrn a + b;
}