英文:
Arrow functions behaviour inside promises
问题
Q1.) 为什么在承诺链中的 then 块中传递 console.log 时会得到未定义(undefined)？
输出：
4
6
7
9
11
未定义(undefined)
12
Q2.) 但是如果我在 then 块中使用箭头函数传递 console.log，则在那个 then 块中将得到空输出。
输出：
4
6
7
9
11
12
有人能解释这个行为吗？
我只是好奇理解我们心爱的 JavaScript 的这种行为。
英文:
Q1.) Why I am getting undefined if i pass console.log in then block in a promise chian?
new Promise((resolve, reject) => {
console.log(4)
resolve(5)
console.log(6)
}).then(() => console.log(7))
.catch(() => console.log(8))
.then(() => console.log(9))
.catch(() => console.log(10))
.then(() => console.log(11))
.then(console.log)
.finally(() => console.log(12))
Output:
4
6
7
9
11
undefined
12
Q2.) However if I pass console.log in then block using arrow function, i get nothing as output wrt that then block.
new Promise((resolve, reject) => {
console.log(4)
resolve(5)
console.log(6)
}).then(() => console.log(7))
.catch(() => console.log(8))
.then(() => console.log(9))
.catch(() => console.log(10))
.then(() => console.log(11))
.then(()=>console.log)
.finally(() => console.log(12))
Output:
4
6
7
9
11
12
Can anyone explain this behaviour?
I am just curious to understand this behaviour of our beloved JS.
答案1
得分: 0
A1)
.then(() => console.log(11)) 等同于 .then(() => { return console.log(11) })，而 console.log 返回 void/undefined，因此在.then(console.log)这一行中，你会记录上一个的返回值，这是 undefined。
A2)
.then(() => console.log) 此时你没有调用该函数。
英文:
A1)
.then(() => console.log(11)) is the same as .then(() => { return console.log(11) }) and console.log returns void/undefined
-> so you log in the line .then(console.log) the returnvalue from the last one and this is undefined
A2)
.then(()=>console.log) at this point you dont call the function
答案2
得分: 0
.then(console.log) 将 console.log 函数传递给 then，告诉它在调用 .then 的承诺兑现时调用该函数。当这种情况发生时，它将传递兑现值（在本例中，该值为 undefined），因此 console.log 输出 undefined。 （兑现值为 undefined，因为承诺是通过 .then(() => console.log(11)) 创建的，它通过调用 console.log 的结果来实现承诺，而这始终是 undefined。）
.then(() => console.log) 相反，将箭头函数传递给 .then。当调用该函数时，它返回 console.log（该函数）而不是调用它。没有任何地方调用它，因此您不会看到 undefined。
这与承诺无关，只是以下代码之间的区别：
function then(callback) {
callback(undefined);
}
then(console.log);
和
function then(callback) {
callback(undefined);
}
then(() => console.log);
英文:
.then(console.log) passes the console.log function into then, telling it to call that function when the promise you called .then on is fulfilled. When that happens, it will be passed the fulfillment value (in this case, that value is undefined), and so console.log outputs undefined. (The fulfillment value is undefined because the promise was created by .then(() => console.log(11)), which fulfills its promise with the result of calling console.log, which is always undefined.)
.then(() => console.log) passes an arrow function into .then instead. When that function is called, it returns console.log (the function) without calling it. Nothing ever calls it, and so you don't see undefined.
This doesn't have anything to do with promises. It's just the difference between this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function then(callback) {
callback(undefined);
}
then(console.log);
<!-- end snippet -->
and this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function then(callback) {
callback(undefined);
}
then(() => console.log);
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论