При отладке своего кода (обычно на JavaScript) программист может столкнуться с системным сообщением об ошибке « TypeError: Cannot read property ‘xxx’ of undefined ». Вместо значения ХХХ указана какая-либо объявленная переменная или свойство объекта, значение которых по различным причинам не задано разработчиком. Ниже разберём, каков перевод данного сообщения, и каково может быть решение возникшей проблемы.
Содержание
- Почему возникает ошибка Cannot read property ‘xxx’ of undefined
- Присвойте начальное значение переменной
- Улучшите связность вашего кода
- Проверьте наличие свойства
- Деструктурируйте доступ к свойствам нужного объекта
- Заключение
- 1 Answer 1
- Overview
Почему возникает ошибка Cannot read property ‘xxx’ of undefined
В переводе данное сообщение выглядит как «Ошибка типа: Не удаётся прочитать неопределённое свойство ХХХ». Поскольку в некоторых языках программирования (в частности, «JavaScript») есть возможность получения доступа к неинициализированным значениям, то это может вызывать появление рассматриваемой мной ошибки.
Что до причин ошибки undefined, то она обычно возникает при отладке какого-либо программного кода, и может быть вызвана следующими факторами:
- Использующиеся в программном коде переменная не была инициализирована (переменной не присвоено значение);
- Была осуществлена попытка доступа к отсутствующему свойству объекта;
- Была попытка получить доступ к отсутствующему элементу массива.
Давайте разберёмся, как исправить ошибку ««TypeError: Cannot read property ‘xxx’ of undefined» при написании вашего кода.
Присвойте начальное значение переменной
Наиболее очевидным способом избавиться от ошибки ««TypeError: Cannot read property ‘xxx’ of undefined» является присвоение переменной начального значения. Чем меньше такая переменная пребывает в неинициализированном состоянии – тем будет лучше. В идеале лучше сразу же присвоить значение «Variable» = «начальное значение» (‘initial’), хотя далеко не всегда специфика вашего кода может предполагать указанный вариант.
Улучшите связность вашего кода
Термин «связность» в нашем контексте характеризует уровень взаимосвязанности элементов разрабатываемого вами модуля (пространства имён, метода, класса, блока кода). Как известно, существуют два типа связности, а именно сильная и слабая связность. Использование сильной связности предполагает фокусировку элементов модуля лишь на одной задаче. Потому для извлечения выгоды из сильной связности, необходимо держать используемые переменные поближе к блоку кода, в работе которого они используются.
К примеру, вместо блока кода:
будет оптимальнее переместить переменные поближе к месту их применения:
Улучшение связности позволит избежать появление ошибки «Cannot read property ‘xxx’ of undefined» при отладке вашего кода.
Проверьте наличие свойства
В языке Javascript имеются ряд инструментов, позволяющих определить, имеет ли необходимый нам объект какое-либо свойство:
В частности, это:
- typeof obj.prop !== ‘undefined’ — данный инструмент позволяет проверить тип значения свойства;
- obj.prop !== undefined — этот инструмент позволяет сравнить объект непосредственно с undefined;
- ‘prop’ in obj позволяет проверить объект на наличие его собственного или полученного свойства;
- И obj.hasOwnProperty(‘prop’) позволяет проверить объект на наличие его собственного свойства.
В этом и схожих случаях рекомендуется использовать оператор in, который обладает простым и удобным синтаксисом. Наличие оператора in демонстрирует желание проверить, имеет ли объект нужное свойство без обращения к фактическому значению данного свойства.
Деструктурируйте доступ к свойствам нужного объекта
Деструктурирование нужного объекта позволяет непосредственно извлекать значения свойства объекта в переменные или, если такое свойство не существует, устанавливать значение по дефаулту. Такой вариант позволяет исключить прямой контакт с undefined.
Извлечение свойств теперь выглядит примерно так:
Деструктурирование хорошо, когда можно указать значение по умолчанию, и это значение будет возвращено при попытке доступа к отсутствующему свойству. В конечном счёте, благодаря деструктурированию вы сможете избежать появления undefined и всех сопутствующих проблем.
Заключение
В нашей статье мы разобрали, почему появляется ошибка «TypeError: Cannot read property ‘xxx’ of undefined», каковы её перевод и решение. Во избежание возникновения данной ошибки присвойте начальное значение соответствующей переменной. Это позволит избежать появления рассмотренной выше дисфункции при отладке вашего кода.
I’m using jsPanel with jQuery and I continue to run into a problem. Whenever I try to click a link to open a panel I get a console error «Uncaught TypeError: Cannot read property ‘tagName’ of undefined»
Below is my code.
1 Answer 1
To what element do want to append the jsPanel to? It seems to me that you try to append the jsPanel to an element that does not exist.
In your example code you try to append a jsPanel to an element with an id of option-ajax. Does this element exist in your page? You probably get the TypeError because the script wants to read the tagName of the element you want to append the jsPanel to. And if the element is not present than there is no tagName to read.
A jsPanel will always be appended to the first element specified by the jQuery selector expression.
Overview
I have a CustomAction for a button on the ribbon that calls a command in a javascript file. The command fails in the inplview.debug.js file on the following lines (1745 — 1748) in the GetFocusInfo method:
The problem is on the 2nd iteration, focusBack is null. I assume something about the event I’m passing is wonky. If I call the method directly from the javascipt console, it executes correctly.
I eventually gave up and used window.SP.UI.ModalDialog.showModalDialog();
But I’m still curious as to what’s going on here. Maybe it’s more appropriate as a general javascript question on stackoverflow.
Источник: