Blogger Information
Blog 18
fans 1
comment 0
visits 16224
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
关于JS函数的基本知识
空瓶子
Original
672 people have browsed it

作业内容:1. 实例演示变量与常量的区别; 2. 函数与匿名函数的区别 3. 箭头函数的参数特征 4. 闭包原理与实现并演示它 5. 四种高阶函数,全部实例演示,并理解回调和纯函数是什么,写出你的答案

1. 实例演示变量与常量的区别

变量:声明变量的关键字是let,声明变量后第一次给变量赋值叫做变量初始化。可以在声明变量的时候一起初始化变量。之后再给变量赋值叫做变量更新。
例如定义一个用户名为土豆的变量

  1. let userName = "土豆";
  2. console.log(userName);

常量:在 js 中没有传统意义的常量这个概念,我们把不变的变量立即成常量。通过关键字const关键字声明的变量称之为常量。声明常量后不能更新和删除,所以在声明常量的同时也要给常量赋值。
例如声明一个用户的身份证号码

  1. const ID_NUMBER = "350123199999999999";
  2. console.log(ID_NUMBER);

2. 函数与匿名函数的区别

函数用来封装可复用的功能,定义一个函数有多种方式:1、函数声明,2、函数表达式(匿名函数),3、箭头函数,4、构造函数等等

函数声明由声明关键字function、函数名、传递给函数的参数和函数体注册。匿名函数顾名思义是没有函数名的函数。函数和匿名函数最大的区别定义了匿名函数的函数表达式不会提升,所以不能再定义之前调用。
demo 代码

  1. // 函数声明提升
  2. console.log(sum(3, 4));
  3. function sum(a, b) {
  4. return a + b;
  5. }
  6. // 将函数改写为匿名函数
  7. const SUM = function (a, b) {
  8. return a + b;
  9. };
  10. console.log(SUM(5, 4));
  11. // 如果在为声明匿名函数是调用匿名函数,将会出现错误
  12. console.log(demo(6 + 8));
  13. let demo = function (n, m) {
  14. return n + m;
  15. };

效果演示

3. 箭头函数的参数特征

箭头函数是简化匿名函数的语法糖,用来简化匿名函数的声明。
在没有参数或者多个参数事必须要写“()”,只有一个参数时可以省略“()”
有多条语句时函数体的“{ }”不能够省略,只有一个函数体是可以省略“{ }”
如果函数体只有一条语句,可不写 return。
箭头函数中的 this,始终与它的上下文绑定
demo 代码

  1. // 匿名函数
  2. let sum = function (a, b) {
  3. return a + b;
  4. };
  5. console.log(sum(5, 7));
  6. // 通过箭头函数改写匿名函数
  7. sum = (a, b) => {
  8. return a + b;
  9. };
  10. console.log(sum(9, 7));
  11. let number = (sum = (a, b) => a + b);
  12. console.log(number(66, 5));

效果演示

4. 闭包原理与实现并演示它

一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)。也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来。
demo 代码

  1. let num = 10;
  2. function sum(a, b) {
  3. let i = 5;
  4. return i + a + b + num;
  5. }
  6. console.log(sum(2, 3));
  7. function f1() {
  8. let a = 3;
  9. // 这个返回的子函数就是闭包
  10. // a 相对于f1是私有变量,但是相对于返回的匿名函数就是一个自由变量
  11. return function () {
  12. return a++;
  13. };
  14. }
  15. // 通过闭包可以访问函数中的私有变量
  16. let f2 = f1();
  17. console.log(f2());

效果演示

5. 四种高阶函数

高阶函数: 使用函数为参数或者将函数做为返回值的函数

  1. 回调函数

    1. document.addEventListener("click", function () {
    2. alert("Hello World~~");
    3. });

  1. 偏函数
    简化了声明时的参数声明。其原理是先声明构成函数执行条件的的必要参数,在将函数作为返回值
  1. let sum = function (a, b) {
  2. return function (c, d) {
  3. return a + b + c + d;
  4. };
  5. };
  6. let f1 = sum(1, 2);
  7. console.log(f1(3, 4));

  1. 柯里化
    柯里化是偏函数的变态升级版
  1. sum = function (a) {
  2. return function (b) {
  3. return function (c) {
  4. return function (d) {
  5. return a + b + c + d;
  6. };
  7. };
  8. };
  9. };
  10. // 简化了调用参数
  11. let res = sum(10)(20)(30)(40);
  12. console.log(res);

  1. 纯函数
    完全独立于调用上下文,返回值只能受到传入的参数影响
    时间戳就是个电信的纯函数

    1. function getDate() {
    2. return Date.now();
    3. }
    4. console.log(getDate());
    5. // 是纯函数
    6. function add(a, b) {
    7. console.log(a + b);
    8. }

    5. 回调和纯函数

    回调函数是被作为一个实参传入到另外一个外部函数中,并且外部函数被调用。这个函数就被称为回调函数。
    纯函数就顾名思义,函数中没有其他函数为函数体的函数,他的返回值只受传入的参数影响。

Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post