Javascript ошибка is not a function

Время на прочтение
5 мин

Количество просмотров 402K

JavaScript может быть кошмаром при отладке: некоторые ошибки, которые он выдает, могут быть очень трудны для понимания с первого взгляда, и выдаваемые номера строк также не всегда полезны. Разве не было бы полезно иметь список, глядя на который, можно понять смысл ошибок и как исправить их? Вот он!

Ниже представлен список странных ошибок в JavaScript. Разные браузеры могут выдавать разные сообщения об одинаковых ошибках, поэтому приведено несколько примеров там, где возможно.

Как читать ошибки?

Перед самим списком, давайте быстро взглянем на структуру сообщения об ошибке. Понимание структуры помогает понимать ошибки, и вы получите меньше проблем, если наткнетесь на ошибки, не представленные в этом списке.

Типичная ошибка из Chrome выглядит так:

Uncaught TypeError: undefined is not a function

Структура ошибки следующая:

  1. Uncaught TypeError: эта часть сообщения обычно не особо полезна. Uncaught значит, что ошибка не была перехвачена в catch, а TypeError — это название ошибки.
  2. undefined is not a function: это та самая часть про ошибку. В случае с сообщениями об ошибках, читать их нужно прямо буквально. Например, в этом случае, она значит то, что код попытался использовать значение undefined как функцию.

Другие webkit-браузеры, такие как Safari, выдают ошибки примерно в таком же формате, как и Chrome. Ошибки из Firefox похожи, но не всегда включают в себя первую часть, и последние версии Internet Explorer также выдают более простые ошибки, но в этом случае проще — не всегда значит лучше.

Теперь к самим ошибкам.

Uncaught TypeError: undefined is not a function

Связанные ошибки: number is not a function, object is not a function, string is not a function, Unhandled Error: ‘foo’ is not a function, Function Expected

Возникает при попытке вызова значения как функции, когда значение функцией не является. Например:

var foo = undefined;
foo();

Эта ошибка обычно возникает, если вы пытаетесь вызвать функцию для объекта, но опечатались в названии.

var x = document.getElementByID('foo');

Несуществующие свойства объекта по-умолчанию имеют значение undefined, что приводит к этой ошибке.

Другие вариации, такие как “number is not a function” возникают при попытке вызвать число, как будто оно является функцией.

Как исправить ошибку: убедитесь в корректности имени функции. Для этой ошибки, номер строки обычно указывает в правильное место.

Uncaught ReferenceError: Invalid left-hand side in assignment

Связанные ошибки: Uncaught exception: ReferenceError: Cannot assign to ‘functionCall()’, Uncaught exception: ReferenceError: Cannot assign to ‘this’

Вызвано попыткой присвоить значение тому, чему невозможно присвоить значение.

Наиболее частый пример этой ошибки — это условие в if:

if(doSomething() = 'somevalue')

В этом примере программист случайно использовал один знак равенства вместо двух. Выражение “left-hand side in assignment” относится к левой части знака равенства, а, как можно видеть в данном примере, левая часть содержит что-то, чему нельзя присвоить значение, что и приводит к ошибке.

Как исправить ошибку: убедитесь, что вы не пытаетесь присвоить значение результату функции или ключевому слову this.

Uncaught TypeError: Converting circular structure to JSON

Связанные ошибки: Uncaught exception: TypeError: JSON.stringify: Not an acyclic Object, TypeError: cyclic object value, Circular reference in value argument not supported

Всегда вызвано циклической ссылкой в объекте, которая потом передается в JSON.stringify.

var a = { };
var b = { a: a };
a.b = b;
JSON.stringify(a);

Так как a и b в примере выше имеют ссылки друг на друга, результирующий объект не может быть приведен к JSON.

Как исправить ошибку: удалите циклические ссылки, как в примере выше, из всех объектов, которые вы хотите сконвертировать в JSON.

Unexpected token ;

Связанные ошибки: Expected ), missing ) after argument list

Интерпретатор JavaScript что-то ожидал, но не обнаружил там этого. Обычно вызвано пропущенными фигурными, круглыми или квадратными скобками.

Токен в данной ошибке может быть разным — может быть написано “Unexpected token ]”, “Expected {” или что-то еще.

Как исправить ошибку: иногда номер строки не указывает на правильное местоположение, что затрудняет исправление ошибки.

Ошибка с [ ] { } ( ) обычно вызвано несовпадающей парой. Проверьте, все ли ваши скобки имеют закрывающую пару. В этом случае, номер строки обычно указывает на что-то другое, а не на проблемный символ.

Unexpected / связано с регулярными выражениями. Номер строки для данного случая обычно правильный.

Unexpected; обычно вызвано символом; внутри литерала объекта или массива, или списка аргументов вызова функции. Номер строки обычно также будет верным для данного случая.

Uncaught SyntaxError: Unexpected token ILLEGAL

Связанные ошибки: Unterminated String Literal, Invalid Line Terminator

В строковом литерале пропущена закрывающая кавычка.

Как исправить ошибку: убедитесь, что все строки имеют правильные закрывающие кавычки.

Uncaught TypeError: Cannot read property ‘foo’ of null, Uncaught TypeError: Cannot read property ‘foo’ of undefined

Связанные ошибки: TypeError: someVal is null, Unable to get property ‘foo’ of undefined or null reference

Попытка прочитать null или undefined так, как будто это объект. Например:

var someVal = null;
console.log(someVal.foo);

Как исправить ошибку: обычно вызвано опечатками. Проверьте, все ли переменные, использованные рядом со строкой, указывающей на ошибку, правильно названы.

Uncaught TypeError: Cannot set property ‘foo’ of null, Uncaught TypeError: Cannot set property ‘foo’ of undefined

Связанные ошибки: TypeError: someVal is undefined, Unable to set property ‘foo’ of undefined or null reference

Попытка записать null или undefined так, как будто это объект. Например:

var someVal = null;
someVal.foo = 1;

Как исправить ошибку: это тоже обычно вызвано ошибками. Проверьте имена переменных рядом со строкой, указывающей на ошибку.

Uncaught RangeError: Maximum call stack size exceeded

Связанные ошибки: Uncaught exception: RangeError: Maximum recursion depth exceeded, too much recursion, Stack overflow

Обычно вызвано неправильно программной логикой, что приводит к бесконечному вызову рекурсивной функции.

Как исправить ошибку: проверьте рекурсивные функции на ошибки, которые могут вынудить их делать рекурсивные вызовы вечно.

Uncaught URIError: URI malformed

Связанные ошибки: URIError: malformed URI sequence

Вызвано некорректным вызовом decodeURIComponent.

Как исправить ошибку: убедитесь, что вызовы decodeURIComponent на строке ошибки получают корректные входные данные.

XMLHttpRequest cannot load some/url. No ‘Access-Control-Allow-Origin’ header is present on the requested resource

Связанные ошибки: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at some/url

Эта проблема всегда связана с использованием XMLHttpRequest.

Как исправить ошибку: убедитесь в корректности запрашиваемого URL и в том, что он удовлетворяет same-origin policy. Хороший способ найти проблемный код — посмотреть на URL в сообщении ошибки и найти его в своём коде.

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

Связанные ошибки: InvalidStateError, DOMException code 11

Означает то, что код вызвал функцию, которую нельзя было вызывать в текущем состоянии. Обычно связано c XMLHttpRequest при попытке вызвать на нём функции до его готовности.

var xhr = new XMLHttpRequest();
xhr.setRequestHeader('Some-Header', 'val');

В данном случае вы получите ошибку потому, что функция setRequestHeader может быть вызвана только после вызова xhr.open.

Как исправить ошибку: посмотрите на код в строке, указывающей на ошибку, и убедитесь, что он вызывается в правильный момент или добавляет нужные вызовы до этого (как с xhr.open).

Заключение

JavaScript содержит в себе одни из самых бесполезных ошибок, которые я когда-либо видел, за исключением печально известной Expected T_PAAMAYIM_NEKUDOTAYIM в PHP. Большая ознакомленность с ошибками привносит больше ясности. Современные браузеры тоже помогают, так как больше не выдают абсолютно бесполезные ошибки, как это было раньше.

Какие самые непонятные ошибки вы встречали? Делитесь своими наблюдениями в комментариях.

P.S. Этот перевод можно улучшить, отправив PR здесь.

Источник

It looks like «$smth is not a function» is a very common problem with JavaScript, yet after looking through quite a few threads I still cannot understand what is causing it in my case.

I have a custom object, defined as: 

function Scorm_API_12() {
var Initialized = false;

function LMSInitialize(param) {
    errorCode = "0";
    if (param == "") {
        if (!Initialized) {
            Initialized = true;
            errorCode = "0";
            return "true";
        } else {
            errorCode = "101";
        }
    } else {
        errorCode = "201";
    }
    return "false";
}

// some more functions, omitted.
}

var API = new Scorm_API_12();

Then in a different script I am trying to use this API in the following way:

var API = null;

function ScormProcessInitialize(){
    var result;

    API = getAPI();

    if (API == null){
        alert("ERROR - Could not establish a connection with the API.");
        return;
    }

    // and here the dreaded error pops up
    result = API.LMSInitialize("");

    // more code, omitted
    initialized = true;
}

The getAPI() stuff, looks like this:

var findAPITries = 0;

function findAPI(win)
{
   // Check to see if the window (win) contains the API
   // if the window (win) does not contain the API and
   // the window (win) has a parent window and the parent window
   // is not the same as the window (win)
   while ( (win.API == null) &&
           (win.parent != null) &&
           (win.parent != win) )
   {
      // increment the number of findAPITries
      findAPITries++;

      // Note: 7 is an arbitrary number, but should be more than sufficient
      if (findAPITries > 7)
      {
         alert("Error finding API -- too deeply nested.");
         return null;
      }

      // set the variable that represents the window being
      // being searched to be the parent of the current window
      // then search for the API again
      win = win.parent;
   }
   return win.API;
}

function getAPI()
{
   // start by looking for the API in the current window
   var theAPI = findAPI(window);

   // if the API is null (could not be found in the current window)
   // and the current window has an opener window
   if ( (theAPI == null) &&
        (window.opener != null) &&
        (typeof(window.opener) != "undefined") )
   {
      // try to find the API in the current window�s opener
      theAPI = findAPI(window.opener);
   }
   // if the API has not been found
   if (theAPI == null)
   {
      // Alert the user that the API Adapter could not be found
      alert("Unable to find an API adapter");
   }
   return theAPI;
}

Now, the API is probably found, because I do not get the «Unable to find…» message, the code proceeds to try to initialize it. But firebug tells me API.LMSInitialize is not a function, and if I try to debug it with alert(Object.getOwnPropertyNames(API));, it gives me a blank alert.

What am I missing?

Источник

TypeError: «x» is not a function

The JavaScript exception «is not a function» occurs when there was an attempt to call a value from a function, but the value is not actually a function.

Message

TypeError: Object doesn't support property or method {x} (Edge)
TypeError: "x" is not a function

Error type

TypeError

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.

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:

  • When working with Array or TypedArray objects:
    • Array.prototype.every(), Array.prototype.some(), Array.prototype.forEach(), Array.prototype.map(), Array.prototype.filter(), Array.prototype.reduce(), Array.prototype.reduceRight(), Array.prototype.find()
  • When working with Map and Set objects:
    • 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:

let x = document.getElementByID('foo');

The correct function name is getElementById:

let x = document.getElementById('foo');

Function called on the wrong object

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. 

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

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

Use an array instead:

let numbers = [1, 4, 9];

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

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. 

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

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

var myNewDog = new Dog();
myNewDog.name("Cassidy");

Use a different property name instead:

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

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

var myNewDog = new Dog();
myNewDog.name("Cassidy");

Using brackets for multiplication

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);
alert('2 x (3 + 5) is ' + String(sixteen));

You can correct the code by adding a * operator:

const sixteen = 2 * (3 + 5);
alert('2 x (3 + 5) is ' + String(sixteen));

Import the exported module correctly

Ensure you are importing the module correctly.

An example helpers library (helpers.js)

let helpers = function () { };

helpers.groupBy = function (objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  },
{});
}

export default helpers;

The correct import usage (App.js):

import helpers from './helpers'

See also

  • Functions
Источник

Ошибки TypeError появляются, когда разработчики пытаются выполнить операцию с неправильным типом данных. Давайте разберём несколько примеров: почему появилась ошибка и как её исправить.

TypeError: Cannot read properties of null/undefined

Что означает: вы пытаетесь обратиться к свойству объекта, который имеет значение null или undefined.

Пример: объявим переменную, но не присвоили ей значение. Если вызовем метод toUpperCase() или любой другой на такой переменной, появится ошибка TypeError:

let name;
name.toUpperCase(); // TypeError: Cannot read property 'toUpperCase' of undefined

Что делать: проверить значение переменной, которую вы используете.

TypeError: Cannot convert undefined/null to object

Что означает: вы используете null или undefined в качестве объекта.

Пример: попробуем использовать функцию Object.keys(), чтобы получить массив ключей объекта obj. Но так как переменная obj имеет значение undefined и не является массивом, возникнет ошибка TypeError:

let obj = undefined;
let result = Object.keys(obj); // TypeError: Cannot convert undefined to object

Что делать: убедитесь, что вы не используете переменную со значением null или undefined. Проверьте, что вы присваиваете правильное значение объекту, или используйте условные операторы, чтобы избежать использования null или undefined в неподходящих местах.

TypeError: x is not a function

Что означает: вы неправильно использовали функцию или передали неверные аргументы.

Пример: попытаемся вызвать переменную numbers как функцию. Но так как это обычный массив, мы получим TypeError:

const numbers = [1, 2, 3];
numbers(); // TypeError: numbers is not a function

Что делать: убедитесь, что переменная является функцией или методом объекта. Проверьте, правильно ли объявлена функция или правильно ли вы вызываете метод объекта.

TypeError: x is not iterable

Что означает: вы пытаетесь выполнить итерацию (например, с помощью цикла for...of) по значению, которое не является итерируемым (например, массивом или строкой).

👉 Итерация — это повторное выполнение одного и того же блока кода несколько раз. Самый распространённый способ выполнения итераций в JavaScript — использовать циклы for и while.

Пример: выполним итерацию по значению x. Но так как это число, итерация не может быть выполнена — появится ошибка TypeError:

const x = 123;
for (let item of x) { // TypeError: x is not iterable
  console.log(item);
}

Что делать: проверьте тип данных. Возможно, их стоит преобразовать в другой формат.

Как обработать ошибку TypeError. Конструкция try...catch

Ошибки в коде опасны: если их не обработать, интерпретатор не сможет дальше читать код. В результате весь JavaScript, что находится ниже, просто не выполнится.

Чтобы ничего не сломалось, разработчики используют конструкцию try...catch. Она помогает поймать и обработать ошибки и защищает программу от аварийного завершения.

Как использовать конструкцию:

try {
  //Место, где может появиться ошибка
  let name;
  name.toUpperCase(); // TypeError: Cannot read property 'toUpperCase' of undefined
} catch (error) {
  // Дополнительные действия для обработки ошибки
  console.log("Произошла ошибка:", error.message);
}

Внутри блока try находится код, который может вызвать ошибку. Если что-то пойдёт не так и мы столкнёмся с TypeError, выполнение программы перейдёт в блок catch. Здесь мы можем выполнить любые действия, например, вывести ошибку в консоль или показать пользователю модальное окно с просьбой перезагрузить страницу.

🔥 Конструкция try...catch полезна, когда нужно предусмотреть появление ошибок и добавить альтернативные пути выполнения кода.

Однако конструкция не является универсальным решением для исправления TypeError. Её следует использовать лишь тогда, когда вы знаете, как обработать конкретную ошибку. А чтобы снизить риски появления проблем, следуйте следующим рекомендациям.

Как избежать ошибок типа TypeError

  1. Перед выполнением операций внимательно проверяйте типы данных переменных.
  2. Используйте условный оператор if для проверки, определена ли переменная, прежде чем вызывать методы или выполнять операции с ней.
  3. При работе с функциями проверяйте, что передаваемые аргументы имеют правильный тип данных.
  4. Используйте инструменты разработчика — особенно полезна консоль — чтобы отслеживать и исправлять ошибки типа TypeError.

Следуя этим советам, можно значительно сократить риски появления ошибок TypeError и повысить надёжность и корректность вашего JavaScript-кода.

Материалы по теме

  • TypeScript. Зачем он нужен и почему так популярен
  • Туториал. Список задач с drag & drop
  • 12 полезных книг по JavaScript

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Источник

Многие разработчики не используют точку с запятой при написании кода, видимо, потому, что так удобно. Возможно, такой код легче читается. С другой стороны, не меньшее количество программистов придерживается синтаксиса с замыкающей точкой с запятой. Такая позиция тоже понятна и имеет право на существование.
В конце концов, каждый веб-разработчик выбирает свой уникальный путь.
Что касается точки с запятой — в настоящее время, как Вы уже поняли, в JavaScript этот знак не является обязательным.

Тем не менее, синтаксис без точек с запятой требует от программиста дополнительного внимания, особенно в Node,js, где функция require() применяется для подключения внешних модулей и файлов.

В некоторых случаях можно столкнуться с такой ошибкой:

TypeError: require(...) is not a function

Странная ошибка, не так ли?

Давайте разберем, почему она появляется.

Например, я подгружаю в свой код какую-то библиотеку и следом пишу немедленно вызываемую асинхронную функцию:

    const fs = require('fs')

(async () => {
  //...
})()

Итак, JavaScript не находит точку с запятой после require(), а следующая строка начинается с открывающей скобки. В результате, JavaScript считает, что мы пытаемся запустить функцию и принимает require('fs') за имя функции. Возможно для кого-то это будет открытием, но такой синтаксис может сработать если require('fs') действительно возвращает функцию. Но чаще всего результатом является не функция, поэтому мы получаем ошибку:

TypeError: require(...) is not a function

Как же избежать такой ошибки?

Итак, в некоторых местах все-таки придется добавить точку с запятой.

Например, такой подход будет работать:

const fs = require('fs')

;(async () => {
  //...
})()

и такой тоже:

const fs = require('fs');

(async () => {
  //...
})()

Возможно, это небольшая цена, которую приходится платить за код без точек с запятой.

Спасибо за внимание.

Источник

Понравилась статья? Поделить с друзьями:
  • Javascript отлов ошибок
  • Javascript error как исправить ошибку
  • Jane is an painter исправьте ошибки
  • Javascript application выдает ошибку diagbox
  • Javascript обработка ошибок формы