关于callback functions运行逻辑的疑问：为何代码输出50？

核心前提：JavaScript里函数是「一等公民」 #

在JavaScript中，函数和字符串、数字这类普通数据一样，可以被当作参数传递给另一个函数，也能被赋值给变量、作为返回值返回。这是你能把函数传入myFunc并在内部调用的根本原因。

代码逐行拆解 #

先看你的原代码：

const myFunc = (callbackFunc) => {
    let value = 50;
    callbackFunc(value)
};

myFunc(value => {
    console.log(value)
})

1. 定义myFunc函数
   myFunc是一个箭头函数，它的参数callbackFunc就是用来接收另一个函数的“占位符”。等调用myFunc时，会把实际要执行的函数填到这个位置。

2. 调用myFunc并传入回调函数
   执行myFunc(value => { console.log(value) })时，你把一个匿名箭头函数传给了myFunc的callbackFunc参数。此时myFunc内部的callbackFunc就指向这个匿名函数。

3. myFunc内部执行逻辑

• 在myFunc里创建变量value并赋值为50。
• 执行callbackFunc(value)，本质就是调用你传入的那个匿名箭头函数，同时把50作为参数传给它。
• 匿名箭头函数接收到参数50后，执行console.log(value)，所以控制台输出50。

换成函数声明形式也一样 #

改成函数声明写法，逻辑完全一致：

// 用函数声明定义myFunc
function myFunc(callbackFunc) {
  let value = 50;
  callbackFunc(value);
}

// 单独定义一个回调函数
function printValue(value) {
  console.log(value);
}

// 把printValue传给myFunc
myFunc(printValue);

这里printValue就是传给myFunc的callbackFunc，调用myFunc(printValue)时，callbackFunc就等于printValue，所以callbackFunc(50)就是调用printValue(50)，最终同样输出50。

内容的提问来源于stack exchange，提问作者Jibola