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

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

🚀Taimili 艾米莉 ( 一款免费开源的 taimili.com )

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

作者：开源之眼

链接：juejin.cn/post/755906...

来源：稀土掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

TypeError: undefined is not a function

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

一、错误的本质是什么？

首先要知道：

在 JavaScript 中，一切几乎都是对象，包括函数。

当你调用一个变量并在后面加上 () 时，JavaScript 会假设该变量是一个函数对象，并尝试执行它。

php 复制代码

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

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

TypeError: undefined is not a function

简单来说：

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

二、常见的触发场景

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

1. 调用未定义的函数

javascript 复制代码

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

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

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

✅ 正确写法：

scss 复制代码

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

或者：

ini 复制代码

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

2. 调用了对象上不存在的方法

ini 复制代码

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

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

✅ 正确做法：

javascript 复制代码

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

3. 第三方库或异步加载未完成

csharp 复制代码

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

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

✅ 解决方案：

ini 复制代码

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

或使用现代模块化方式：

csharp 复制代码

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

4. 被覆盖的函数名

ini 复制代码

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

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

✅ 解决方案：

避免重名：

ini 复制代码

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

5. this 指向错误

ini 复制代码

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

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

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

✅ 解决方案：

ini 复制代码

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

或直接调用：

scss 复制代码

obj.run(); // ✅ Running

三、排查思路与调试技巧

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

✅ 1. 查看错误堆栈（stack trace）

浏览器控制台一般会指明出错的文件与行号。

打开 DevTools → Console → 点击错误行号，即可定位具体位置。

✅ 2. 打印变量类型

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

javascript 复制代码

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

✅ 3. 检查函数定义顺序

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

✅ 4. 检查导入导出是否匹配

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

javascript 复制代码

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

✅ 应确认模块导出方式：

javascript 复制代码

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

然后正确导入：

javascript 复制代码

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

四、防止 "undefined is not a function" 的最佳实践

使用 const/let 替代 var --- 避免变量提升造成的未定义调用
模块化代码结构 --- 保证依赖先加载
给函数添加类型校验
ini 复制代码
```
if (typeof fn === 'function') fn();
```
启用严格模式或 TypeScript --- 提前发现类型问题
避免覆盖全局对象 （如 alert, confirm, setTimeout 等）