函数调用失败原因分析与解决方法

写代码时，明明函数定义好了，调用却报错——undefined is not a function、TypeError: xxx is not a function、或者直接黑屏白屏没反应？别急着怀疑环境或框架，先看看这几个地方有没有踩坑。

1. 函数名拼错了，或者大小写不对

这是最常被忽略的一条。JavaScript 区分大小写，Python 也一样。比如你定义的是 getData()，结果调用写成 getdata() 或 Getdata()，浏览器或解释器立马翻脸。

function renderList() {
  console.log('渲染列表');
}
renderlist(); // ❌ 报错：renderlist is not defined

2. 函数还没定义就调用了

尤其在 HTML 中把 <script> 放在 <body> 底部，但又在 <head> 里写了内联脚本调用函数，这时候函数压根还没加载进来。

<head>
  <script>initApp();</script>
</head>
<body>
  <script>
    function initApp() { console.log('启动成功'); }
  </script>
</body>

解决办法：把调用逻辑挪到函数定义之后，或用 DOMContentLoaded、$(document).ready() 等时机控制。

3. 作用域问题：函数在当前作用域不可见

比如在某个 if 块、for 循环或另一个函数内部声明了函数，外部却试图调用它：

if (true) {
  function sayHi() { return 'Hello'; }
}
sayHi(); // ✅ 在非严格模式下可能运行（函数提升），但在严格模式或某些环境中会报错

更典型的是用 let 或 const 声明的函数表达式：

if (true) {
  const sayHi = () => 'Hello';
}
sayHi(); // ❌ ReferenceError: sayHi is not defined

4. this 指向丢失，导致方法调用失败

类方法或对象方法被单独提取后调用，this 就不是原对象了：

const user = {
  name: '张三',
  greet() { return `你好，${this.name}`; }
};

const fn = user.greet;
fn(); // ❌ '你好，undefined' —— 因为 this 指向 window 或 undefined

修复方式：用 bind、箭头函数，或调用时用 user.greet() 直接绑定上下文。

5. 异步时机没卡准，函数还没准备好

比如从服务器加载 JS 文件，或者动态 import() 一个模块，还没加载完就急着调用里面的函数：

import('./utils.js').then(module => {
  module.helper(); // ✅ 正确：等模块加载完成再调用
});

helper(); // ❌ 报错：helper is not defined

6. 参数传错了，类型或数量不匹配

有些函数对参数很敏感。比如 JSON.parse() 传了个 null 或空字符串，立刻报错；Array.prototype.map() 传的不是函数，也会崩：

[1, 2, 3].map(null); // ❌ TypeError: null is not a function

调试时多打一行 console.log(typeof yourArg)，比硬猜快得多。

7. 模块没导出/没导入，名字对不上

ES6 模块中，export default 和 export const 的导入写法不同：

// utils.js
export default function doWork() {}
export const version = '1.0';

// main.js
import doWork from './utils.js'; // ✅ 默认导出
import { version } from './utils.js'; // ✅ 命名导出
import { doWork } from './utils.js'; // ❌ 报错：doWork is not exported from './utils.js'