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

深入理解 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 会假设该变量是一个函数对象，并尝试执行它。

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

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

TypeError: undefined is not a function

简单来说：

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

二、常见的触发场景

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

1. 调用未定义的函数

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

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

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

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

// 某个库尚未加载完成

myLibrary.init(); // ❌ TypeError: myLibrary.init is not a function

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

✅ 解决方案：

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

或使用现代模块化方式：

import myLibrary from './mylib.js';

myLibrary.init();

4. 被覆盖的函数名

let alert = "Hello";

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

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

✅ 解决方案：

避免重名：

let message = "Hello";

window.alert("Hi"); // ✅

5. this 指向错误

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

三、排查思路与调试技巧

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

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

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

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

✅ 2. 打印变量类型

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

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

✅ 3. 检查函数定义顺序

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

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

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

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

✅ 应确认模块导出方式：

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

然后正确导入：

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

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