TypeError: "x" 不是函数

JavaScript 异常“不是函数”发生在尝试从函数中调用一个值，但该值实际上不是函数时。

消息

TypeError: "x" is not a function. (V8-based & Firefox & Safari)

错误类型

TypeError

哪里出错了？

它尝试从函数中调用一个值，但该值实际上不是函数。某些代码期望您提供一个函数，但实际上没有发生。

可能是函数名有错别字？也可能是您正在调用的方法的对象不包含此函数？例如，JavaScript Objects 没有 map 函数，但 JavaScript Array 对象有。

许多内置函数需要一个（回调）函数。您必须提供一个函数才能使这些方法正常工作

在使用 Array 或 TypedArray 对象时
- Array.prototype.every()、Array.prototype.some()、Array.prototype.forEach()、Array.prototype.map()、Array.prototype.filter()、Array.prototype.reduce()、Array.prototype.reduceRight()、Array.prototype.find()
在使用 Map 和 Set 对象时
- Map.prototype.forEach() 和 Set.prototype.forEach()

示例

函数名有错别字

在这种情况下，这种情况发生的频率过高，方法名有错别字

const x = document.getElementByID("foo");
// TypeError: document.getElementByID is not a function

正确的函数名是 getElementById

const x = document.getElementById("foo");

在错误的对象上调用函数

对于某些方法，您必须提供一个（回调）函数，它只对特定对象起作用。在此示例中，使用了 Array.prototype.map()，它仅适用于 Array 对象。

const obj = { a: 13, b: 37, c: 42 };

obj.map(function (num) {
  return num * 2;
});

// TypeError: obj.map is not a function

改用数组

const numbers = [1, 4, 9];

numbers.map(function (num) {
  return num * 2;
}); // [2, 8, 18]

函数与预先存在的属性同名

有时在创建类时，您可能会有一个属性和一个同名的函数。在调用该函数时，编译器认为该函数不复存在。

function Dog() {
  this.age = 11;
  this.color = "black";
  this.name = "Ralph";
  return this;
}

Dog.prototype.name = function (name) {
  this.name = name;
  return this;
};

const myNewDog = new Dog();
myNewDog.name("Cassidy"); //Uncaught TypeError: myNewDog.name is not a function

改用不同的属性名

function Dog() {
  this.age = 11;
  this.color = "black";
  this.dogName = "Ralph"; //Using this.dogName instead of .name
  return this;
}

Dog.prototype.name = function (name) {
  this.dogName = name;
  return this;
};

const myNewDog = new Dog();
myNewDog.name("Cassidy"); //Dog { age: 11, color: 'black', dogName: 'Cassidy' }

使用括号进行乘法

在数学中，您可以将 2 × (3 + 5) 写成 2*(3 + 5) 或 2(3 + 5)。

使用后者将引发错误

const sixteen = 2(3 + 5);
console.log(`2 x (3 + 5) is ${sixteen}`);
// Uncaught TypeError: 2 is not a function

您可以通过添加 * 运算符来更正代码

const sixteen = 2 * (3 + 5);
console.log(`2 x (3 + 5) is ${sixteen}`);
// 2 x (3 + 5) is 16

正确导入导出的模块

确保您正在正确导入模块。

一个示例辅助程序库 (helpers.js)

const helpers = function () {};

helpers.groupBy = function (objectArray, property) {
  return objectArray.reduce((acc, obj) => {
    const key = obj[property];
    acc[key] ??= [];
    acc[key].push(obj);
    return acc;
  }, {});
};

export default helpers;

正确的导入用法 (App.js)

import helpers from "./helpers";

另请参阅

函数