1. 首页
  2. IT资讯

搞懂这道题,以后遇到回调深坑的面试不要慌

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fe8e94f3869ee49b0b60033300c3955e1″ img_width=”776″ img_height=”488″ alt=”搞懂这道题,以后遇到回调深坑的面试不要慌” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E接上一篇文章 u003Ca class=”pgc-link” href=”https:u002Fu002Fwww.toutiao.comu002Fi6628371312953786888u002F?group_id=6628371312953786888″ target=”_blank”u003Ejavascript奇葩面试题(四)u003Cu002Fau003E,我们来看接下来的一个问题:u003Cu002Fpu003Eu003Cpreu003Elet app = {u003Cbru003E ary: [],u003Cbru003E use:function(fn) {u003Cbru003E this.ary.push(fn);u003Cbru003E }u003Cbru003E};u003Cbru003Eapp.use((next) => {u003Cbru003E console.log(1);u003Cbru003E next();u003Cbru003E console.log(2)u003Cbru003E});u003Cbru003Eapp.use((next) => {u003Cbru003E console.log(3);u003Cbru003E next();u003Cbru003E console.log(4)u003Cbru003E});u003Cbru003Eapp.use((next) => {u003Cbru003E console.log(5);u003Cbru003E next();u003Cbru003E console.log(6)u003Cbru003E});u003Cbru003EcallBack(0);u003Cbru003Efunction callBack(index) {u003Cbru003E if (index === app.ary.length)u003Cbru003E return;u003Cbru003E let cb = app.ary[index];u003Cbru003E cb(() => {u003Cbru003E callBack(index + 1);u003Cbru003E })u003Cbru003E}u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E上面这段代码的输出结果是什么?u003Cu002Fpu003Eu003Cpu003E这道题初看起来不咋地,但是细看一下,感觉掉入了一堆回调中,这时不要慌,来细细分析一下:u003Cu002Fpu003Eu003Colu003Eu003Cliu003E代码连续三个 app.use 的执行结果是什么?u003Cu002Fliu003Eu003Cu002Folu003Eu003Cpu003E它实际上是向 app.ary中push了三个回调函数,我可以用下面一种形式形象地表达这三个回调函数的位置关系,和他们执行的内容:u003Cu002Fpu003Eu003Cpreu003E[u003Cbru003E u002F*这是第一个回调函数,它被回调时先输出1,然后在调 next 回调,然后再输出2 *u002Fu003Cbru003E [log1,next,log2], u002Fu002F 将其命名为CB1u003Cbru003E u002F*这是第二个回调函数,它被回调时先输出3,然后在调 next 回调,然后再输出4 *u002Fu003Cbru003E [log3,next,log4], u002Fu002F 将其命名为CB2u003Cbru003E u002F*这是第三个回调函数,它被回调时先输出5,然后在调 next 回调,然后再输出6 *u002Fu003Cbru003E [log5,next,log6] u002Fu002F 将其命名为CB3u003Cbru003E]u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E再看:u003Cu002Fpu003Eu003Cpreu003EcallBack(0);u003Cbru003Efunction callBack(index) {u003Cbru003E if (index === app.ary.length)u003Cbru003E return;u003Cbru003E let cb = app.ary[index];u003Cbru003E cb(() => {u003Cbru003E callBack(index + 1);u003Cbru003E})u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E显然,这个callBack(0)是整个程序调用的入口u003Cu002Fpu003Eu003Cpu003E当callBack函数执行到u003Cu002Fpu003Eu003Cpreu003E let cb = app.ary[index];u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E时,此时 index == 0 , cb == CB1,接下来执行cb这个函数,传入了一个箭头函数作为参数u003Cu002Fpu003Eu003Cpreu003Ecb(() => {u003Cbru003E callBack(index + 1);u003Cbru003E})u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E到这里,要搞清楚一点,上面的CB1,CB2,CB3中的next 也就是 这儿的 callBack函数了,只是每次在执行的时候 index 增加了1 ,那么程序执行的整体流程如下:u003Cu002Fpu003Eu003Cpreu003E执行CB1 => log1 =>执行CB2=>log3=>执行CB3=>log5=>log6=>跳回继续执行CB2=>log4 =>跳回继续执行CB1=>log2u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E所以,结果如下: 1 3 5 6 4 2u003Cu002Fpu003Eu003Cpu003E如果你还是理解得很清楚,我建议最好是把代码复制到浏览器下面一步步地Debug,看看它执行的流程,你应该会豁然开朗. 今天就到这里吧!u003Cu002Fpu003Eu003Cpu003EPS:如果这篇文章让你学到了一点知识,欢迎点赞并关注我哦,每天一点技术干货,让我陪你在大牛的路上越走越远!!!u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:搞懂这道题,以后遇到回调深坑的面试不要慌

主题测试文章,只做测试使用。发布者:℅傍ㄖ免沦陷dε鬼,转转请注明出处:http://www.cxybcw.com/11228.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code