Ошибки JavaScript

Шесть самых распространенных ошибок, которые делают разработчики в JavaScript

JavaScript - это язык, который так часто лежит в основе как клиентской, так и серверной разработки, что делает свободное владение его диалектами абсолютно для современных программистов. Частично причина такого распространения в Интернете заключается в его очевидной простоте: начать работу с JavaScript может показаться быстрым и легким, а начать с «как сделать» - отличный способ. Однако, как только вы начнете смотреть глубже, в JavaScript есть много тонкостей, которые легко упустить из виду. Все делают ошибки, но как только вы прочитаете этот список и отшлифуете свой код, вы больше не будете делать эти ошибки.

Предполагать объем блока на уровне блока

Эту ошибку легко сделать, особенно для начинающих разработчиков, потому что это верно для других языков программирования, но JavaScript отличается. Предположение, что JavaScript создает новую область видимости для каждого блока кода, является распространенной ошибкой, и создаваемая путаница приводит к множеству ошибок. В JavaScript происходит что-то, что называется подъемом переменных, когда переменная сохраняет свое последнее значение даже после выхода из цикла.

Однако поддержка областей видимости на уровне блоков постепенно внедряется в JavaScript. Ключевое слово let представило эту функцию в JavaScript 1.7, и вскоре оно может стать официально поддерживаемым ключевым словом JavaScript.

function foo(){
if(true){
var fruit1 = 'apple'; //exist in function scope
const fruit2 = 'banana'; //exist in block scope
let fruit3 = 'strawberry'; //exist in block scope

}
console.log(fruit1);
console.log(fruit2);
console.log(fruit3);
}

foo();
//result:
//apple
//error: fruit2 is not defined
//error: fruit3 is not defined

Позволять утечкам памяти проникнуть внутрь

Кодирование для предотвращения утечек памяти требует упреждающего подхода, без которого утечки памяти в конечном итоге проникают в ваш код. Это делает их исключительно частой проблемой в JavaScript, не в последнюю очередь потому, что они могут возникать разными способами. Когда ненужная глобальная переменная создается путем присвоения переменной значения в первый раз. Эта глобальная переменная находится в фоновом режиме, и даже если такая переменная не будет использовать много памяти, скорость вашего браузера все равно будет зависеть.

По возможности старайтесь избегать глобальных переменных, используя локальные переменные или используйте директиву «use strict», которая вообще не позволит вам вызывать необъявленную переменную.

"use strict";
x = 3.14;

// This will cause an error because x is not declared

Запутаться в равенстве

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

В правилах приведения типов легко ошибиться, поэтому мы рекомендуем использовать === и! ==, а не == или! =, Чтобы избежать несчастных случаев с приведением типов!

let x = 'hello' && 123; // x === 123

Неэффективное манипулирование DOM

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

Хорошее решение этой проблемы - выработать привычку использовать фрагменты документа, когда вам нужно добавить несколько элементов DOM. Если вы измените эти элементы, когда они отсоединены, а затем присоедините их, вы получите более эффективный код.

var fragment = document.createDocumentFragment();

Неспособность использовать прототипное наследование

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

Включение прототипного наследования позволит объекту унаследовать свое свойство name от прототипа, что сэкономит время и ускорит процесс.

class GuitarAmp {
constructor({
cabinet = 'spruce',
distortion = '1',
volume = '0'
} = {}) {
Object.assign(this, {
cabinet,
distortion,
volume
});
}
}

class BassAmp extends GuitarAmp {
constructor(options = {}) {
super(options);
this.lowCut = options.lowCut;
}
}

Создание неправильных ссылок на методы экземпляра

Эта распространенная ошибка возникает из-за того, что метод может быть определен в глобальной области видимости, что означает окно в другом браузере. В этом случае ключевое слово this равно этому окну, а не экземпляру объекта.

Чтобы получить правильные ссылки на методы экземпляра, нужно потрудиться, поэтому внимательно следите за тем, как вы их кодируете, иначе вы начнете получать совершенно неверные результаты!

var x="string object";
var y=x;

Вот шесть самых распространенных ошибок, которые делают разработчики в JavaScript. Не расстраивайтесь, если вы делали некоторые из них, потому что их легко сделать. Понимание нюансов JavaScript поможет вам в будущем писать лучший код.

Ссылка на оригинал

382