Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > js变量与常量的区别；函数与匿名函数的区别；闭包原理与实现
Blogger Information
Blog 37
fans 2
comment 0
visits 26671
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js变量与常量的区别；函数与匿名函数的区别；闭包原理与实现
世纪天城
Original
675 people have browsed it
  1. 实例演示变量与常量的区别;

变量：

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

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

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

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

常量

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>js变量与常量</title>
  8. </head>
  9. <body>
  10.     <script>
  11.         // 变量：
  12.         // 变量用let关键字声明
  13.         // 第一次声明为赋值 
  14.         let username = 'abc';
  15.         // 第二次为更新
  16.         username = '123';
  17.         // 也可以声明一个空变量在赋值
  18.         let a;
  19.         // 赋值
  20.         a='a';
  22.         // js的输出语句
  23.         console.log(username);
  24.         console.table(username);
  25.         console.dir(username);
  28.          //常量:
  29.       // 声明时必须初始化
  30.       const app = '122';
  31.       const APP ='app';
  32.     // 注：常量一般用大写字母来定义，并一旦定义其常量的值不能被更新
  33.     </script>
  34. </body>
  35. </html>
  1. 函数与匿名函数的区别

函数

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>函数与匿名函数的区别</title>
  8. </head>
  9. <body>
  10.     <script>
  11.         // 函数的组成由function关键字 函数名（）{}组成。
  12.         function a(){
  13.             let a =1;
  14.             let b =2;
  15.             return a+b;
  16.         }
  17.        console.log(a());
  18.         // 匿名函数：则没有函数名并可以简化为箭头函数
  19.         let b = function (){
  20.             let c = '你好js';
  21.             return c;
  22.         }
  23.         console.log(b());
  24.         // 可以简化为箭头函数
  25.         let p = ()=> c = '你好php';
  26.         console.log(p());
  27.     </script>
  28. </body>
  29. </html>
  1. 箭头函数的参数特征

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

  1. 闭包原理与实现并演示它
    js共有三种作用域: 全局, 函数,块
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>作用域与闭包</title>
  8. </head>
  9. <body>
  10.     <script>
  11.         // js三种作用域: 全局, 函数,块
  12.         // 1. 全局作用域,公共变量
  13.         let ab = '123';
  15.         // 2. 函数作用域
  16.         function a(){
  17.             // 私有变量 函数外无法访问
  18.             let b = '321';
  19.         }
  20.         // 3. 块作用域
  21.         {
  22.             let c = 1;
  23.             const B = "Hello";
  24.         }
  26.         // 闭包
  27.         // 自由变量: 即不是函数参数变量也不是私有变量,存在于函数调用上下文中
  28.         // 闭包: 能够访问自由变量的函数,所以理论上讲,任何函数都是闭包
  29.         let num = 100;
  30.         function add(a, b) {
  31.             // t: 私有变量
  32.             let t = 0;
  33.             // num: 自由变量
  34.             return t + a + b + num;
  35.         }
  36.         console.log(add(1,2));
  37.         // 闭包函数
  38.         function a() {
  39.             // n 相对于a是私有变量,但是相对于返回的匿名函数就是一个自由变量
  40.             let n = 100;
  41.             // 这个返回的子函数就是闭包
  42.             return function () {
  43.             return n;
  44.             };
  45.         }
  46.         console.log(a()());
  47.     </script>
  48. </body>
  49. </html>

  1. 四种高阶函数，全部实例演示
    高阶函数: 使用函数为参数或者将函数做为返回值的函数
    ```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.  // 高阶函数: 使用函数为参数或者将函数做为返回值的函数
    3.  // 1. 回调函数
    4.  document.addEventListener("click", function () {
    5.      alert("Hello World~~");
    6.  });
    7.  // 2. 偏函数: 简化了声明时的参数声明
    8.      let sum = function (a, b) {
    9.          return function (c, d) {
    10.          return a + b + c + d;
    11.          };
    12.      };
    14.  let f1 = sum(1, 5);
    15.  console.log(f1(5, 4));
  1.     // 柯里化
  2.     sum = function (a) {
  3.         return function (b) {
  4.         return function (c) {
  5.             return function (d) {
  6.             return a + b + c + d;
  7.             };
  8.         };
  9.         };
  10.     };
  12.     //   简化了调用参数
  13.     let res = sum(10)(20)(30)(40);
  14.     console.log(res);
  16.     // 4. 纯函数
  17.     // 完全独立于调用上下文,返回值只能受到传入的参数影响
  18.     function getDate() {
  19.         // 调用当前时间轴
  20.         return Date.now();
  21.     }
  22.     console.log(getDate());
  24.     // 是纯函数
  25.     function add(a, b) {
  26.         console.log(a + b);
  27.     }
  28.     add(1, 20);
  29. </script>

</html>
```

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