在前端开发中，我们经常会遇到 TypeError: xxx is not a function 的错误，通常出现在我们调用一个函数的时候。这个错误意味着我们调用的函数并不存在，或者不是一个函数。本文将介绍产生这个错误的原因和解决方法，帮助开发者避免这个问题以及尽可能地快速解决它。
原因
通常情况下，TypeError: xxx is not a function 出现在以下四种情况中：
- xxx不是一个函数
当我们调用一个变量时，如果这个变量并不是一个函数，就会出现这个错误。例如：
var num = 10; num(); // TypeError: num is not a function
- 没有正确调用函数
当使用函数时，需要注意调用的方式是否正确。正确的方式是使用 () 操作符调用函数。例如：
function add(a, b) {
return a + b;
}
add; // [Function: add]
add(1, 2); // 3
add(); // NaN在上面的例子中，第一个 add 返回函数本身，第二个 add 是一个正确的调用，而第三个 add 是错误的调用，因为没有传递参数。
- 函数未被定义
当我们调用函数时，如果这个函数没有被定义或声明，就会出现这个错误。例如：
unknown(); // TypeError: unknown is not a function
在上面的例子中，我们并没有定义或声明 unknown 函数。
- 变量被赋值成了非函数类型
当我们尝试调用一个变量时，如果这个变量并不是一个函数，就会出现这个错误。例如：
var func = 10; func(); // TypeError: func is not a function
在上面的例子中，我们将一个数字 10 赋值给变量 func，导致 func 并不是一个函数类型，所以在调用时会报 TypeError: func is not a function 的错误。
解决方法
如果你遇到了 TypeError: xxx is not a function 的错误，在排除以上四种情况之后，可以尝试以下几种解决方法。
检查调用方式
根据我们在原因部分提到的，函数调用时需要使用 () 操作符。如果没有正确调用函数，就会出现 TypeError: xxx is not a function 的错误。例如：
function add(a, b) {
return a + b;
}
add; // [Function: add]
add(1, 2); // 3如果你使用的是 add 而不是 add()，就会出现错误。
检查是否声明或定义了函数
如果你使用了未声明或未定义的函数，在调用时就会出现 TypeError: xxx is not a function 的错误。例如：
unknown(); // TypeError: unknown is not a function
在上面的例子中，unknown 并没有被声明或定义为函数，所以会出现错误。
检查是否变量类型正确
在调用一个变量时，需要确保这个变量是一个函数类型。如果这个变量被赋值成非函数类型，那么在调用时就会出现 TypeError: xxx is not a function 的错误。例如：
var func = 10; func(); // TypeError: func is not a function
在上面的例子中，我们将一个数字 10 赋值给变量 func，导致 func 并不是一个函数类型，所以在调用时会报 TypeError: func is not a function 的错误。
重命名函数
如果你的函数名与某个内置的 JavaScript 函数名相同，那么在调用它时就会报 TypeError: xxx is not a function 的错误。你可以将函数名重命名，以避免与内置函数冲突。例如：
function alert(message) {
console.log(message);
}
alert('Hello, World!'); // TypeError: alert is not a function在上面的例子中，我们定义了一个 alert 函数，但是 alert 是一个内置函数，所以在调用时会出现 TypeError: alert is not a function 的错误。我们可以将函数名改成另一个符合语义的名称。
结论
TypeError: xxx is not a function 的错误在前端开发中非常常见。根据错误提示和代码上下文，我们可以确定错误的原因，然后使用相应的解决方法。在编写 JavaScript 代码时，需要避免将变量赋值成非函数类型、声明或定义函数等常见错误，以保证代码的正确性和可维护性。
例子代码：
-- -------------------- ---- ------- -------- ------ -- - ------ - - -- - ---- -- ---------- ---- ------ --- -- - ------ -- --- ---------- -- ---------- ------- -- --- - -------- --- ---- - --- ------- -- ---------- ---- -- --- - -------- -------- -------------- - --------------------- - ------------- --------- -- ---------- ----- -- --- - --------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6702048ef59b73a932a4e916