类型错误："x" 不是函数

¥Message

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

¥Error type

¥What went wrong?

它尝试从函数调用值，但该值实际上不是函数。有些代码希望你提供一个函数，但这并没有发生。

¥It attempted to call a value from a function, but the value is not actually a function. Some code expects you to provide a function, but that didn't happen.

也许函数名称有拼写错误？也许你调用该方法的对象没有此功能？例如，JavaScript Objects 没有 map 函数，但 JavaScript Array 对象有。

¥Maybe there is a typo in the function name? Maybe the object you are calling the method on does not have this function? For example, JavaScript Objects have no map function, but the JavaScript Array object does.

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

¥There are many built-in functions in need of a (callback) function. You will have to provide a function in order to have these methods working properly:

• 使用 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() and Set.prototype.forEach()

¥Examples

¥A typo in the function name

在这种情况下，这种情况经常发生，方法名称中有一个拼写错误：

¥In this case, which happens way too often, there is a typo in the method name:

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

正确的函数名称是 getElementById：

¥The correct function name is getElementById:

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

¥Function called on the wrong object

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

¥For certain methods, you have to provide a (callback) function and it will work on specific objects only. In this example, Array.prototype.map() is used, which will work with Array objects only.

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

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

// TypeError: obj.map is not a function

使用数组代替：

¥Use an array instead:

const numbers = [1, 4, 9];

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

¥Function shares a name with a pre-existing property

有时，在创建类时，你可能会拥有同名的属性和函数。调用该函数后，编译器认为该函数不再存在。

¥Sometimes when making a class, you may have a property and a function with the same name. Upon calling the function, the compiler thinks that the function ceases to exist.

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

请改用不同的属性名称：

¥Use a different property name instead:

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' }

¥Using parenthese for multiplication

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

¥In math, you can write 2 × (3 + 5) as 2*(3 + 5) or just 2(3 + 5).

使用后者会抛出错误：

¥Using the latter will throw an error:

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

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

¥You can correct the code by adding a * operator:

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

¥Import the exported module correctly

确保你正确导入模块。

¥Ensure you are importing the module correctly.

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

¥An example helpers library (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）：

¥The correct import usage (App.js):

import helpers from "./helpers";

¥See also

• 函数