JavaScript基础第四天

JavaScript 基础第四天

今天我们学习js的函数，包括普通函数、匿名函数、箭头函数以及函数作用域。

1. 函数的初体验

1.1. 什么是函数

函数是 JavaScript 中的基本组件之一。一个函数是 JavaScript 过程一组执行任务或计算值的语句。要使用一个函数，你必须将其定义在你希望调用它的作用域内。

1.2. 函数基本结构

声明一个完整函数包括关键字、函数名、形式参数、函数体、返回值5 个部分。

示例：

function sayHi(name) {
	let result = "你好啊，" + name;
	return result;
}
let name = "小明";
alert(sayHi(name));

2. 匿名函数

没有名字的函数。

2.1. 函数表达式

// 声明
let fn = function () {
	console.log("匿名函数");
};
// 调用
fn();

2.2. 立即执行函数

无需调用，立即执行。

(function () {
	xxx;
})();
(function () {
	xxxx;
})();

// 1.第一种写法
(function (x, y) {
	console.log(x + y);
	let num = 10;
	let arr = [];
})(1, 2);

// 2.第二种写法
(function (x, y) {
	let arr = [];
	console.log(x + y);
})(1, 4);

3. 箭头函数

箭头函数是一种声明函数的简洁语法，它与普通函数并无本质的区别，差异性更多体现在语法格式上，属于 ES6 中的函数写法。

3.1. 语法 1

const fn = function () {
	console.log("普通函数");
};

const fn = () => {
	console.log("箭头函数");
};

3.2. 语法 2

只有一个参数可以省略小括号。

const fn = (x) => {
	return x + x;
};
console.log(fn(1)); //2

const fn = (x) => {
	return x + x;
};
console.log(fn(1)); //2

3.3. 语法 3

函数只有一行，可以写到一行，无需写 return 直接返回值。

const fn = (x, y) => {
	return x + y;
};
console.log(fn(1, 2)); //3

const fn = (x, y) => {
	x + y;
};
console.log(fn(1, 2)); //3

3.4. 语法 4

加括号的函数体返回对象字面量表达式 .

const fn1 = (uname) => ({ uname: uname });
console.log(fn1("小明"));

4. 函数作用域

4.1. 局部变量

在作用域内声明的变量，我们称为局部变量。

function fn() {
	let a = 1;
	console.log(a);
}
fn(); //1

在作用域外部，无法访问到作用域内声明的变量。

4.2. 全局变量

处于全局作用域内的变量，称为全局变量。

• 题目 1

  下面的代码打印什么？

const fn = () => {
	let a = 1;
	const fn1 = () => {
		let a = 2;
		console.log(a);
	};
	console.log(a);
	a = 3;
	fn1();
};
fn();
// 1.执行fn a=1打印
// 2.执行了fn1 a=2打印
//1 2

• 题目 2

  下面的代码打印什么？

const fn1 = () => {
	let a = 4;
	const fn2 = () => {
		let a = 5;
		const fn3 = () => {
			console.log(a);
		};
		console.log(a);
		a = 24;
		fn3();
	};
	console.log(a);
	a = 30;
	fn2();
};
fn1();
// 4 5 24