在Chrome DevTools执行JavaScript代码时遇函数创建及调用问题

代码示例 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="variables.js"></script>
</head>
<body>
    
</body>
</html>

JavaScript代码 #

const var1 = 10;
const var2 = 'Hello world';
const var3 = true;

const foo = function(){
    console.log("Whats up !!");
}();

foo;

console.log(typeof(foo));

问题原因 #

核心问题是立即执行函数（IIFE）的赋值逻辑错误：

• 你写的const foo = function(){...}();是将函数立即执行后的返回值赋值给foo，但该函数没有return语句，默认返回undefined，因此foo的值是undefined，而非一个可调用的函数。
• 当尝试调用foo时，由于它是undefined，浏览器会抛出foo is not a function的错误。

解决方案 #

方案1：让foo指向函数本身（保留可调用性） #

如果需要foo作为可调用的函数，去掉末尾的()，不再立即执行：

const var1 = 10;
const var2 = 'Hello world';
const var3 = true;

const foo = function(){
    console.log("Whats up !!");
};

foo(); // 正常调用，输出 "Whats up !!"
console.log(typeof(foo)); // 输出 "function"

方案2：立即执行同时保留函数引用 #

如果需要函数立即执行一次，同时后续还能调用foo，让函数返回自身：

const var1 = 10;
const var2 = 'Hello world';
const var3 = true;

const foo = function(){
    console.log("Whats up !!");
    return this; // 返回当前函数本身
}();

// 函数已自动执行一次（输出 "Whats up !!"），后续可再次调用
foo(); // 再次输出 "Whats up !!"
console.log(typeof(foo)); // 输出 "function"

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