作业内容:1. 实例演示变量与常量的区别; 2. 函数与匿名函数的区别 3. 箭头函数的参数特征 4. 闭包原理与实现并演示它 5. 四种高阶函数,全部实例演示,并理解回调和纯函数是什么,写出你的答案
变量:声明变量的关键字是let
,声明变量后第一次给变量赋值叫做变量初始化。可以在声明变量的时候一起初始化变量。之后再给变量赋值叫做变量更新。
例如定义一个用户名为土豆的变量
let userName = "土豆";
console.log(userName);
常量:在 js 中没有传统意义的常量这个概念,我们把不变的变量立即成常量。通过关键字const
关键字声明的变量称之为常量。声明常量后不能更新和删除,所以在声明常量的同时也要给常量赋值。
例如声明一个用户的身份证号码
const ID_NUMBER = "350123199999999999";
console.log(ID_NUMBER);
函数用来封装可复用的功能,定义一个函数有多种方式:1、函数声明,2、函数表达式(匿名函数),3、箭头函数,4、构造函数等等
函数声明由声明关键字function
、函数名、传递给函数的参数和函数体注册。匿名函数顾名思义是没有函数名的函数。函数和匿名函数最大的区别定义了匿名函数的函数表达式不会提升,所以不能再定义之前调用。
demo 代码
// 函数声明提升
console.log(sum(3, 4));
function sum(a, b) {
return a + b;
}
// 将函数改写为匿名函数
const SUM = function (a, b) {
return a + b;
};
console.log(SUM(5, 4));
// 如果在为声明匿名函数是调用匿名函数,将会出现错误
console.log(demo(6 + 8));
let demo = function (n, m) {
return n + m;
};
效果演示
箭头函数是简化匿名函数的语法糖,用来简化匿名函数的声明。
在没有参数或者多个参数事必须要写“()”,只有一个参数时可以省略“()”
有多条语句时函数体的“{ }”不能够省略,只有一个函数体是可以省略“{ }”
如果函数体只有一条语句,可不写 return。
箭头函数中的 this,始终与它的上下文绑定
demo 代码
// 匿名函数
let sum = function (a, b) {
return a + b;
};
console.log(sum(5, 7));
// 通过箭头函数改写匿名函数
sum = (a, b) => {
return a + b;
};
console.log(sum(9, 7));
let number = (sum = (a, b) => a + b);
console.log(number(66, 5));
效果演示
一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)。也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来。
demo 代码
let num = 10;
function sum(a, b) {
let i = 5;
return i + a + b + num;
}
console.log(sum(2, 3));
function f1() {
let a = 3;
// 这个返回的子函数就是闭包
// a 相对于f1是私有变量,但是相对于返回的匿名函数就是一个自由变量
return function () {
return a++;
};
}
// 通过闭包可以访问函数中的私有变量
let f2 = f1();
console.log(f2());
效果演示
高阶函数: 使用函数为参数或者将函数做为返回值的函数
回调函数
document.addEventListener("click", function () {
alert("Hello World~~");
});
let sum = function (a, b) {
return function (c, d) {
return a + b + c + d;
};
};
let f1 = sum(1, 2);
console.log(f1(3, 4));
sum = function (a) {
return function (b) {
return function (c) {
return function (d) {
return a + b + c + d;
};
};
};
};
// 简化了调用参数
let res = sum(10)(20)(30)(40);
console.log(res);