深入理解 JavaScript 报错：TypeError: undefined is not a function

在日常的 JavaScript 开发中，几乎每个人都见过这条令人熟悉又头疼的错误信息：

艾米莉是一款优雅便捷的 GitHub Star 管理和加星工具 ，基于 PHP & javascript 构建，能对github 得 star fork follow watch 管理和提升，最适合github 的深度用户

作者：开源之眼
链接：juejin.cn/post/755906…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

TypeError: undefined is not a function

这行报错简短却致命，尤其当代码行数成千上万时，找到问题根源往往需要一点侦探技巧。本文将从原理、常见原因、排查方法和最佳实践四个方面深入讲解这一错误。

首先要知道：
在 JavaScript 中，一切几乎都是对象，包括函数。
当你调用一个变量并在后面加上 () 时，JavaScript 会假设该变量是一个函数对象，并尝试执行它。

let fn;
fn(); // ❌ TypeError: fn is not a function

在上面的例子中，fn 的值是 undefined，但我们却尝试执行它，于是引发了经典错误：

TypeError: undefined is not a function

简单来说：

“你正在试图执行一个并不是函数的东西。”

让我们来看一些在实际项目中常见的触发情境。

sayHello(); // ❌ TypeError: sayHello is not a function

var sayHello = function() {
  console.log("Hello");
};

原因：var 声明的变量会提升，但赋值不会。执行到函数调用时，sayHello 还是 undefined。

✅ 正确写法：

function sayHello() {
  console.log("Hello");
}
sayHello(); // ✅ Hello

或者：

const sayHello = () => console.log("Hello");
sayHello(); // ✅ Hello

const user = {};
user.login(); // ❌ TypeError: user.login is not a function

原因：user 对象没有 login 方法，访问结果是 undefined。

✅ 正确做法：

const user = {
  login() {
    console.log("User logged in");
  }
};
user.login(); // ✅ User logged in

// 某个库尚未加载完成
myLibrary.init(); // ❌ TypeError: myLibrary.init is not a function

原因：脚本加载顺序错误或资源未加载完。

✅ 解决方案：

<script src="mylib.js" onload="initApp()"></script>

或使用现代模块化方式：

import myLibrary from './mylib.js';
myLibrary.init();

let alert = "Hello";
alert("Hi"); // ❌ TypeError: alert is not a function

原因：内置函数被变量覆盖。

✅ 解决方案：

避免重名：

let message = "Hello";
window.alert("Hi"); // ✅

const obj = {
  run() {
    console.log("Running");
  }
};

const run = obj.run;
run(); // ❌ TypeError: undefined is not a function (在严格模式下)

原因：this 丢失导致方法不再属于原对象。

✅ 解决方案：

const boundRun = obj.run.bind(obj);
boundRun(); // ✅ Running

或直接调用：

obj.run(); // ✅ Running

当遇到这个错误时，不要慌。按照以下步骤排查：

浏览器控制台一般会指明出错的文件与行号。
打开 DevTools → Console → 点击错误行号，即可定位具体位置。

使用 typeof 或 console.log 检查被调用的变量：

console.log(typeof myFunc); // 应该输出 'function'

尤其是在使用 var 或异步加载模块时，注意执行顺序。

在模块化开发中，这类错误经常来自错误的导入：

// ❌ 错误示例
import { utils } from './utils.js';
utils(); // TypeError: utils is not a function

✅ 应确认模块导出方式：

// utils.js
export default function utils() {}

然后正确导入：

import utils from './utils.js';
utils(); // ✅