使用箭头函数然后链接导致不同的输出

时间:2017-07-11 04:24:30

标签: javascript ecmascript-6 promise es6-promise arrow-functions

我正在使用promises,这是我的代码:

function call1() {
   return new Promise(function(resolve, reject) {
     resolve('resolved from call 1');
   });
}

function call2(result) {
    return new Promise(function(resolve, reject) {
    resolve(result + ' - resolved from call 2');
  });
}

function callP() {
  call1()
    .then(result => call2(result))
    .then(function(result) {
      console.log(result);
    });
}
callP();

这给了我输出:

  

从通话1解决 - 从通话2解决

但是当我改变时:

.then(result => call2(result)) 

为:

.then(function(result) {
  call2(result);
})

结果为undefined

根据我的理解:

function(result) {
    call2(result);
} 

result => call2(result)

意思是同样的事情。我在这里做错了吗?

3 个答案:

答案 0 :(得分:3)

他们不一样。这arrow function

result => call2(result)

隐式返回call2(result)的返回值,因为箭头函数允许使用以下语法:

( … ) => expression

其中expression是箭头函数的返回值。例如:

() => 1 + 1

与:

相同
() => { return 1 + 1 }

function() {
  return 1 + 1;
}

常规函数不返回任何内容:

function(result) {
  call2(result);
}

该回调并未显式返回任何 (默认为undefined)。因为您没有返回任何内容,所以第二个链接then接收undefined作为result参数的值,因此记录undefined。要达到相同的效果,请明确返回值:

return call2(result);

这会将第一个then的结果传递给第二个then并正确记录。另请注意,箭头函数和常规函数以不同方式绑定this。箭头函数中的this是封闭范围的this - 它们不会自己绑定它,而常规函数表达式取决于它们的调用方式 - 通常是{{1严格模式下的{}或window。除了语法上的差异,我建议在主题上阅读Felix Kling's phenomenal answer

答案 1 :(得分:3)

.then(result => call2(result)) 

隐式返回call2的结果,并且相当于:

.then(result => { return call2(result); })

您正在寻找的是:

.then(function(result) {
    return call2(result);
})

答案 2 :(得分:2)

这里的主要问题是您忘记了h = figure; axis tight filename = 'myfile.gif'; for n = 1:length(t) pcolor(lon_rho, lat_rho, T(:,:,1,n)) ; drawnow % Capture the plot as an image frame = getframe(h); im = frame2im(frame); [imind,cm] = rgb2ind(im,256); % Write to the GIF File if n == 1 imwrite(imind,cm,filename,'gif', 'Loopcount',inf); else imwrite(imind,cm,filename,'gif','WriteMode','append'); end end 第一个函数中的值。因此,如果在第一个函数中返回return,就像我在下面所做的那样:

call2(result)

您将获得与使用第二个代码中提到的箭头功能相同的结果:

function(result) {
    return call2(result);
} 

关于第一个函数是否与第二个函数相同(假设您已经在第一个函数中添加了返回值),虽然它们可能实现相同的功能,但它们并不完全相同。主要区别在于result => call2(result) 的背景。我非常喜欢箭头函数的解释以及它如何影响MDN this的值,您可以查看here