演示（变量与常量）的区别, 函数(匿名函数)的区别、箭头函数参数特征、 闭包原理与实现、 四种高阶函数的演示

变量与常量:

 <script>
      //变量
      let userName; //声明
      console.log(userName);
      let itemName = "手机"; //声明时并初始化(第一次赋值)
      console.log(itemName);
      userName = "电脑"; // 更新
      console.log(userName);
      //常量
      const unitprice = 3699;// 声明时必须初始化
      unitprice = 2888;//会发生错误
</script>

效果预览:

函数与匿名函数的区别:

函数都是单值返回,如果想返回多个值,将结果封装到数组或对象中  迭代器除外

<script>
        //声明,会自动提升到顶部,动词get + 名词Name 函数命名规则
          function getName(name) {
            return "Welcome to " + name;
          }
        console.log(getName("天猫商城"));    //调用
        function getName(name) {            //重写
        return "欢迎光临 " + name;
    }
    //函数声明提升
    //console.log(sum(1,2)); 效果发生报错
    // 使用了匿名函数/函数表达式
    // let sum = function (a,b){
    //     return a + b;
    // };
    // console.log(sum(1,2));
    const sum = function (a,b) {         //函数可以被重写
        return a + b;
    };
    console.log(sum(1,2));                //匿名函数不可用重写会发生报错
     sum = function (a,b) {
         return a + b;
     };
    </script>

效果预览:

箭头函数特征:

箭头函数没有原型属性prototype,不能当构造函数用
箭头函数中的this,始终与它的上下文绑定

样式代码:

<script>
      let sum = function (a, b) {
        return a + b;
      };
      //箭头函数用来简化 "匿名函数" 的声明
      sum = (a, b) => {
        return a + b;
      };
      console.log(sum(1, 2));
      //如果函数体只有一条语句,可不写return
      sum = (a, b) => a + b;
      console.log(sum(10, 20));
    //如果只有一个参数,连小括号都可以不用了
    let tips = str => console.log(str);
    tips("欢迎大家来到这里")
    //如果没有参数,小括号不能省略
    tips=() => console.log("Success");
    console.log(tips());
    </script>

效果预览:

闭包原理:

自由变量: 即不是函数参数变量也不是私有变量,存在于函数调用上下文中
闭包: 能够访问自由变量的函数,所以理论上讲,任何函数都是闭包

样式代码:

<script>
 let num = 100;
      function add(a, b) {         // a,b: 参数变量
        let t = 0;                  // t: 私有变量
        return t + a + b + num;     // num: 自由变量
      }
      function a() {
        let n = 100;
        return function () {      //这个返回的子函数就是闭包
          return n;
        };
      }
      console.log(a()());
      function f1() {
        let a = 1;         //a 相对于f1是私有变量,但是相对于返回的匿名函数就是一个自由变量
        return function () {
          return a++;
        };
      }
      let f2 = f1();
      console.log(f2());
      console.log(f2());
      console.log(f2());
</script>

效果预览:

四种高阶函数:

高阶函数: 使用函数为参数或者将函数作为返回值的函数。
回调函数：
偏函数: 简化了声明时的参数声明
柯理化: 简化了参数的调用
纯函数: 完全独立于调用上下文,返回值只能受到传入的参数影响

样式代码:

<script>
      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);
    function getDate() {                     //不是纯函数
        return Date.now();
    }
    console.log(getDate());
    function add(a, b) {                     // 是纯函数
        console.log(a + b);
    }
    add(1, 2);
</script>

效果预览:

回调和纯函数是什么:

纯函数: 纯量就是标量不是向量。纯量函数估计就是函数的值域不是向量，而是标量把完全独立于调用上下文,返回值只能受到传入的参数影响
回调: 回调函数写完之后不用,给别人用的函数,事件方法，把一个函数写到一个函数的位置,那么这是一个方法函数,圆括号里面是参数,参数里面再写一个函数这就叫回调函数