js变量与常量的区别；函数与匿名函数的区别；闭包原理与实现

实例演示变量与常量的区别;

变量：

变量命名规范：以字母、数字、下划线 _ 、和符号$ ，但不能以数字作开头并严格区分大小写；不得使用关键字或保留字。

例如：
驼峰式: userName，大驼峰UserName, 匈牙利: oBtn, _sex, _salary

变量的特点：变量可重新声明；并可对变量重新赋值来更新变量的值；

注：变量只声明，不赋值，则返回值为undefined。

常量

常量声明时必须初始化，并不可重新赋值，更不可重新声明。

注：常量一旦声明则无法改变常量的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js变量与常量</title>
</head>
<body>
    <script>
        // 变量：
        // 变量用let关键字声明
        // 第一次声明为赋值 
        let username = 'abc';
        // 第二次为更新
        username = '123';
        // 也可以声明一个空变量在赋值
        let a;
        // 赋值
        a='a';
        // js的输出语句
        console.log(username);
        console.table(username);
        console.dir(username);
         //常量:
      // 声明时必须初始化
      const app = '122';
      const APP ='app';
    // 注：常量一般用大写字母来定义，并一旦定义其常量的值不能被更新
    </script>
</body>
</html>

函数与匿名函数的区别

函数

函数的组成由function关键字函数名（）{}组成。
匿名函数：则没有函数名并可以简化为箭头函数，而普通函数则不行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>函数与匿名函数的区别</title>
</head>
<body>
    <script>
        // 函数的组成由function关键字 函数名（）{}组成。
        function a(){
            let a =1;
            let b =2;
            return a+b;
        }
       console.log(a());
        // 匿名函数：则没有函数名并可以简化为箭头函数
        let b = function (){
            let c = '你好js';
            return c;
        }
        console.log(b());
        // 可以简化为箭头函数
        let p = ()=> c = '你好php';
        console.log(p());
    </script>
</body>
</html>

箭头函数的参数特征

箭头函数是用来简化匿名函数的语法糖,将普通函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体
基础语法；如果只有一条语句，可以省略函数的”{}”；如果只有一个参数,连小括号都可以不用了。
注：箭头函数没有原型属性prototype,不能当构造函数用；且箭头函数中的this,始终与它的上下文绑定。

闭包原理与实现并演示它
js共有三种作用域: 全局, 函数,块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>作用域与闭包</title>
</head>
<body>
    <script>
        // js三种作用域: 全局, 函数,块
        // 1. 全局作用域,公共变量
        let ab = '123';
        // 2. 函数作用域
        function a(){
            // 私有变量 函数外无法访问
            let b = '321';
        }
        // 3. 块作用域
        {
            let c = 1;
            const B = "Hello";
        }
        // 闭包
        // 自由变量: 即不是函数参数变量也不是私有变量,存在于函数调用上下文中
        // 闭包: 能够访问自由变量的函数,所以理论上讲,任何函数都是闭包
        let num = 100;
        function add(a, b) {
            // t: 私有变量
            let t = 0;
            // num: 自由变量
            return t + a + b + num;
        }
        console.log(add(1,2));
        // 闭包函数
        function a() {
            // n 相对于a是私有变量,但是相对于返回的匿名函数就是一个自由变量
            let n = 100;
            // 这个返回的子函数就是闭包
            return function () {
            return n;
            };
        }
        console.log(a()());
    </script>
</body>
</html>

四种高阶函数，全部实例演示
高阶函数: 使用函数为参数或者将函数做为返回值的函数
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>高阶函数</title>
</head>
<body>
<script>

 // 高阶函数: 使用函数为参数或者将函数做为返回值的函数
 // 1. 回调函数
 document.addEventListener("click", function () {
     alert("Hello World~~");
 });
 // 2. 偏函数: 简化了声明时的参数声明
     let sum = function (a, b) {
         return function (c, d) {
         return a + b + c + d;
         };
     };
 let f1 = sum(1, 5);
 console.log(f1(5, 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);
    // 4. 纯函数
    // 完全独立于调用上下文,返回值只能受到传入的参数影响
    function getDate() {
        // 调用当前时间轴
        return Date.now();
    }
    console.log(getDate());
    // 是纯函数
    function add(a, b) {
        console.log(a + b);
    }
    add(1, 20);
</script>

</html>
```

相关文章