zoukankan      html  css  js  c++  java
  • JavaScript中的事件循环机制跟函数柯里化

    一、事件循环机制的理解

    test();//按秒输出5个5
    
    function test() {
        for (var i = 0; i < 5; i++) {
            setTimeout(() => {
                console.log(i);
            }, 1000 * i);//for循环里面添加异步操作
        }
    }
    
    test();//分别按秒输出0  1  2  3  4
    
    function test() {
        for (let i = 0; i < 5; i++) {
            setTimeout(() => {
                console.log(i);
            }, 1000 * i);//for循环里面添加异步操作
        }
    }
    

    首先,先解释一下产生不同的结果的原因:
    我们知道,var跟let的核心区别主要就是作用域的问题。
    详细解释:
    因为let i 声明的是区块变量,每个i只能存活到大括号结束,并不会把后面for循环的 i 值赋给前面的setTimeout中的i;
    而var i 则是局部变量,这个 i 的生命周期不受for循环的大括号限制;

    这道面试题还涉及到了JavaScript中的事件循环机制,稍微重点讲解一下:
    我们知道,JavaScript是单线程的(一次只能执行一个任务),那单线程是如何做到异步的呢?
    在大学里,数据结构中,我们学过栈(先进后出)和队列(先进先出)这两种数据结构吧。
    js引擎中,便用到了,栈中存放执行的代码,队列中存放多个任务
    事件循环机制(Event Loop):js会检查栈中是否为空,为空的话,将队列中的任务加入到这个栈中。

    这样的话,还是不能实现异步的,毕竟js是单线程,一次只能执行一个任务,即使有栈和队列,还是不能实现异步的,那异步到底是怎么实现的呢?
    这里需要了解一下回调函数,举个例子,jQuery中Ajax异步请求我们经常用到吧,其中的success就是个回调函数。
    其实呢,如果是个异步操作的话,当放入到队列中后,它会注册一个回调事件,然后再执行这个回调函数,如此,便实现了异步。

    举个例子吧:

    var x = 6;
    console.log(x);
    var pro = new Promise(function (reslove, reject) {
        var i = 3;
        setTimeout(() => {
            i++;
            reslove(i);
        }, 3000);
    });
    pro.then(function (data) {
        console.log(data);
    });
    

    分析:前两行代码定义变量便打印出来,接下来便是个异步操作,便是通过resolve回调函数来真正实现异步的。

    二、函数柯里化

    乍一看,给人一种很是高大上的感觉。这东西呢,理解起来真的是云里雾里的。
    柯里化,是函数式编程里面的一个概念。
    说下初步的理解吧

    function add(num1, num2) {
        return num1 + num2;
    }
    // 柯里化的思想
    function curriedAdd(num2) {
        return add(5, num2);
    }
    console.log(add(2, 3));//5  写好一个函数,然后在需要的时候调用这个函数。这便是函数式编程的基本思想。
    console.log(curriedAdd(3));//8
    

    正如上面的代码,本来add方法里面需要传递2个参数,函数柯里化后,类似curriedAdd只需要传递1个参数即可。这便是所谓的函数柯里化。当然,这上面并不够标准,只是表达了柯里化的思想。

    function add(num1, num2) {
        return num1 + num2;
    }
    //柯里化方法
    function curry(fn) {
        var args = Array.prototype.slice.call(arguments, 1);
        return function () {
            var innerArgs = Array.prototype.slice.call(arguments);
            var finalArgs = args.concat(innerArgs);
            return fn.apply(null, finalArgs);
        }
    }
    var curriedAdd = curry(add, 5);//函数柯里化
    console.log(curriedAdd(3));//8
    

    那函数柯里化的好处是什么呢?既然提出了这个概念,没有好处是不可能滴!
    简单来说就是为了简便,调用函数的时候,只需传递一个参数。当然了,我理解得还不够深,没达到那种透彻的地步,仍然有点云里雾里的感觉,没充分地体会到函数柯里化的好处。

    总结

    发现自己还有很长的一段路要走!钻的还是不够深!不够精!

  • 相关阅读:
    基于nginx结合openssl实现https
    更新续约与重新登陆
    DNS服务器
    ELK日志分析系统。
    OpenSSH远程控制
    DHCP配置
    DHCP服务概述
    网络服务
    磁盘配额
    磁盘配额
  • 原文地址:https://www.cnblogs.com/ywjbokeyuan/p/14470382.html
Copyright © 2011-2022 走看看