一、事件循环机制的理解

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

那函数柯里化的好处是什么呢?既然提出了这个概念,没有好处是不可能滴!

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

总结

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

JavaScript中的事件循环机制跟函数柯里化的更多相关文章

  1. 精读JavaScript模式(六),Memoization模式与函数柯里化的应用

    假期就这么结束了!十天假就有三天在路上,真的难受!想想假期除了看了两场电影貌似也没做什么深刻印象的事情.流浪地球,特效还是很赞,不过对于感情的描写还是逃不掉拖沓和尴尬的通病,对于国产科幻还是抱有支持的 ...

  2. JavaScript函数柯里化的一些思考

    1. 高阶函数的坑 在学习柯里化之前,我们首先来看下面一段代码: var f1 = function(x){ return f(x); }; f1(x); 很多同学都能看出来,这些写是非常傻的,因为函 ...

  3. 深入理解javascript中的事件循环event-loop

    前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...

  4. JavaScript中的函数柯里化与反柯里化

    一.柯里化定义 在计算机科学中,柯里化是把 接受多个参数的函数 变换成 接受一个单一参数(最初函数的第一个参数)的函数 并且返回 接受余下参数且返回结果的新函数的技术 高阶函数 高阶函数是实现柯里化的 ...

  5. 简单粗暴详细讲解javascript实现函数柯里化与反柯里化

    函数柯里化(黑人问号脸)???Currying(黑人问号脸)???妥妥的中式翻译既视感:下面来一起看看究竟什么是函数柯里化: 维基百科的解释是:把接收多个参数的函数变换成接收一个单一参数(最初函数的第 ...

  6. 【转载】JS中bind方法与函数柯里化

    原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...

  7. 深入理解javascript函数进阶系列第二篇——函数柯里化

    前面的话 函数柯里化currying的概念最早由俄国数学家Moses Schönfinkel发明,而后由著名的数理逻辑学家Haskell Curry将其丰富和发展,currying由此得名.本文将详细 ...

  8. 简单粗暴详细讲解javascript实现函数柯里化

    函数柯里化(黑人问号脸)???Currying(黑人问号脸)???妥妥的中式翻译既视感:下面来一起看看究竟什么是函数柯里化: 维基百科的解释是:把接收多个参数的函数变换成接收一个单一参数(最初函数的第 ...

  9. Javascript函数柯里化(curry)

    函数柯里化currying,是函数式编程非常重要的一个标志.它的实现需要满足以下条件,首先就是函数可以作为参数进行传递,然后就是函数可以作为返回值return出去.我们依靠这个特性编写很多优雅酷炫的代 ...

随机推荐

  1. hdu2141 Can you find it? (二分)

    Problem Description Give you three sequences of numbers A, B, C, then we give you a number X. Now yo ...

  2. hdu5317 RGCDQ

    Problem Description Mr. Hdu is interested in Greatest Common Divisor (GCD). He wants to find more an ...

  3. python代理池的构建1——代理IP类的构建,以及配置文件、日志文件、requests请求头

    一.整体结构 二.代理IP类的构建(domain.py文件) ''' 实现_ init_ 方法, 负责初始化,包含如下字段: ip: 代理的IP地址 port:代理IP的端口号 protocol: 代 ...

  4. Codeforces Round #658 (Div. 2) C1. Prefix Flip (Easy Version) (构造)

    题意:给你两个长度为\(n\)的01串\(s\)和\(t\),可以选择\(s\)的前几位,取反然后反转,保证\(s\)总能通过不超过\(3n\)的操作得到\(t\),输出变换总数,和每次变换的位置. ...

  5. SpringCloud @RefreshScope标注的Bean在生命周期中怎么样的?

    @RefreshScope 前言 该文章是由上一篇引申而来的,上一篇文章描述了Nacos是怎么触发配置刷新的,接着来写有关@RefreshScope的一些东西,都是由DEBUG而来 上一篇 文章概览 ...

  6. spring-cloud-sleuth/zipkin

    Spring Cloud Sleuth 一般的,一个分布式服务跟踪系统,主要有三部分:数据收集.数据存储和数据展示.根据系统大小不同,每一部分的结构又有一定变化.譬如,对于大规模分布式系统,数据存储可 ...

  7. C++ part2

    为什么析构函数必须是虚函数?为什么C++默认的析构函数不是虚函数? references: nowcoder 将可能会被继承的父类的析构函数设置为虚函数,可以保证当我们new一个子类,然后使用基类指针 ...

  8. Bootstrap 中的 aria-label 和 aria-labelledby

    正常情况下,form表单的input组件都有对应的label.当input组件获取到焦点时,屏幕阅读器会读出相应的label里的文本. <form> <div class=" ...

  9. rm -rf .git/gc.log

    rm -rf .git/gc.log ➜ test git:(abc) gp Auto packing the repository in background for optimum perform ...

  10. SQL Tutorials & MySQL & SQL Server

    SQL Tutorials SQL MySQL https://www.mysql.com/ $ mysql --version # mysql Ver 8.0.21 for osx10.15 on ...