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)); //2const 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)); //3const 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