Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 变量与常量的区别、函数与匿名函数的区别 、箭头函数的参数特征 、闭包原理、四种高阶函数
Blogger Information
Blog 23
fans 0
comment 3
visits 23695
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
变量与常量的区别、函数与匿名函数的区别 、箭头函数的参数特征 、闭包原理、四种高阶函数
a.
Original
1131 people have browsed it

变量与常量区别

  1. 变量用var(弃用)、let声明;常量用const声明
  2. 变量可以声明后再初始化，常量声明时必须出始化
  3. 变量与常量都不能重复申明（var声明的除外）；变量的傎可以更新，常量的值不能被更新
  1. //声明一个变量
  2. let userName;
  3. userName = "誓言";
  5. //声明一个常量
  6. const USERNAME = "誓言";
  8. //更新一个变量
  9. userName = "八戒";
  11. //更新一个常量就会报错
  12. USERNAME = "常量初始化后就不能被更新了";

函数与匿名函数的区别

  1. 函数有函数名，匿名函数没有，需要赋值给一个变量调用
  2. 匿名函数可以简化为箭头函数，而普通函数不行
  1. //声明一个函数
  2. funtion fun(){
  3.     return console.log('我是一个函数');
  4. }
  5. //调用函数
  6. fun();
  8. //声明一个匿名函数
  9. let fun1 = funtion(){
  10.     return console.log('我是一个匿名函数');
  11. }
  12. //调用匿名函数
  13. fun1();
  15. //简化为箭头函数
  16. fun1 = () => console.log('我是一个匿名函数');

箭头函数的参数特征

  • 箭头函数参数不同写法也不同

1.没有参数时，只写一个小括号

fun1 = () => console.log('我是一个匿名函数');

2.一个参数时，不用写小括号

fun2 = a => console.log(a);

3.几个参数肯定要写小括号了，如果只有一条语句可以省略return 和 {}

  1. let fun1 = funtion(name){
  2.     return console.log('我是一个' + name );
  3. }
  4. //可简化为
  5. fun1= name => console.log('我是一个' + name );

闭包原理与实现

  • 能访问自由自由变量的的函数，所以理论上讲，任何函数都是闭包
  • 自由变量：即不是函数参数变量 ，也不是私有变量，它存在于函数调用上下文中
  1. function a(){
  2.     let n = 100;
  3.     //相对于子函数来说，n就是自由变量
  4.     return function(){
  5.     return n;
  6.     }
  7. }
  8. //返回的子函数就是闭包
  9. //此时用闭包实现了访问私有变量
  10. console.log(a()());

高阶函数

  • 什么是高阶函数：使用函数为参数或者将函数作为返回值

1. 回调函数

  • 将函数作为参数
  • 理解：回调函数就是一个被作为参数传递的函数

2. 偏函数

  • 先把函数调用中的个别参数先固定下来，剩下的参数交给子函数来处理
  • 简化声明

3. 偏函数偏激版柯里化

  • 简化调用参数

4. 纯函数

  • 完全独立与调用上下文，返回值只能受到传入的参数影响
  • 理解：不依赖上下代码的声明的一切，他返回的值只有调用时传入的参数能影响，比如函数中引用了全局变量，全局变量的的更新会影响函数，那么这个函数就不是一个纯函数

code

  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.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       function a() {
  11.         let n = 100;
  12.         return function () {
  13.           return n;
  14.         };
  15.       }
  16.       console.log(a()());
  17.       //回调函数
  18.       document.addEventListener("click", function () {
  19.         alert("参数中使用了函数");
  20.       });
  22.       //偏函数
  23.       function sum(x, y) {
  24.         return function (z, e) {
  25.           return x + y + z + e;
  26.         };
  27.       }
  28.       let fn1 = sum(2, 3);
  29.       console.log(fn1(4, 5));
  31.       //偏函数偏激版
  33.       function sum1(n) {
  34.         return function (m) {
  35.           return function (o) {
  36.             return n + m + o;
  37.           };
  38.         };
  39.       }
  41.       //纯函数
  42.       let sumVlue = sum1(1)(3)(5);
  43.       console.log(sumVlue);
  45.       let add = (p, q) => console.log(p + q);
  46.       add(3, 5);
  47.     </script>
  48.   </body>
  49. </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