TypeError: "x" ist keine Funktion

Nachricht

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

Fehlertyp

Was ist schiefgegangen?

Es wurde versucht, einen Wert als Funktion aufzurufen, aber der Wert ist tatschlich keine Funktion. Einige Codeabschnitte erwarten, dass Sie eine Funktion bereitstellen, was jedoch nicht geschehen ist.

Vielleicht gibt es einen Tippfehler im Funktionsnamen? Vielleicht hat das Objekt, auf dem Sie die Methode aufrufen, diese Funktion nicht? Zum Beispiel haben JavaScript-Objects keine map-Funktion, aber das JavaScript-Array-Objekt schon.

Es gibt viele eingebaute Funktionen, die eine (Callback-)Funktion bentigen. Sie mssen eine Funktion bereitstellen, um diese Methoden ordnungsgem funktionieren zu lassen:

• Beim Arbeiten mit Array oder TypedArray Objekten:

  • Array.prototype.every(), Array.prototype.some(), Array.prototype.forEach(), Array.prototype.map(), Array.prototype.filter(), Array.prototype.reduce(), Array.prototype.reduceRight(), Array.prototype.find()

• Beim Arbeiten mit Map und Set Objekten:

  • Map.prototype.forEach() und Set.prototype.forEach()

Beispiele

Ein Tippfehler im Funktionsnamen

In diesem Fall, der viel zu oft passiert, gibt es einen Tippfehler im Methodennamen:

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

Der korrekte Funktionsname ist getElementById:

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

Funktion auf dem falschen Objekt aufgerufen

Fr bestimmte Methoden mssen Sie eine (Callback-)Funktion bereitstellen, und sie funktioniert nur mit bestimmten Objekten. In diesem Beispiel wird Array.prototype.map() verwendet, das nur mit Array Objekten funktioniert.

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

obj.map((num) => num * 2);

// TypeError: obj.map is not a function

Verwenden Sie stattdessen ein Array:

const numbers = [1, 4, 9];

numbers.map((num) => num * 2); // [2, 8, 18]

Funktion teilt sich einen Namen mit einer bereits vorhandenen Eigenschaft

Manchmal kann es bei der Erstellung einer Klasse vorkommen, dass eine Eigenschaft und eine Funktion denselben Namen haben. Beim Aufrufen der Funktion denkt der Compiler, dass die Funktion nicht mehr existiert.

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"); // TypeError: myNewDog.name is not a function

Verwenden Sie stattdessen einen anderen Eigenschaftsnamen:

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

Verwendung von Klammern fr Multiplikation

In der Mathematik kann man 2 (3 + 5) als 2*(3 + 5) oder einfach 2(3 + 5) schreiben.

Die Verwendung der letzteren Schreibweise fhrt zu einem Fehler:

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

Sie knnen den Code korrigieren, indem Sie einen * Operator hinzufgen:

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

Das exportierte Modul richtig importieren

Stellen Sie sicher, dass Sie das Modul korrekt importieren.

Ein Beispiel aus einer Helferbibliothek (helpers.js)

function helpers() {}

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;

Die korrekte Importverwendung (App.js):

import helpers from "./helpers";

Siehe auch

• Funktionen