#2 "Распространённые ошибки в JavaScript" Денис Речкунов

pragmadash Денис Речкунов Node.js-разработчик Распространённые ошибки в JavaScript

А что если знать все о JavaScript?

Много возможностей

Большая ответственность!

Мы должны защитить себя сами

Что не так? Constructor.prototype.method = function () { setTimeout(function () { this.anotherMethod(); }, 5000); }; Constructor.prototype.anotherMethod = function () { }; 01. 02. 03. 04. 05. 06. 10

this === хозяин метода setTimeout Constructor.prototype.method = function () { setTimeout(function () { this.anotherMethod(); }, 5000); }; Constructor.prototype.anotherMethod = function () { }; Uncaught TypeError: undeﬁned is not a function 01. 02. 03. 04. 05. 06. 11

this.Решение 1 Constructor.prototype.method = function () { var self = this; setTimeout(function () { self.anotherMethod(); }, 5000); }; Constructor.prototype.anotherMethod = function () { }; 01. 02. 03. 04. 05. 06. 07. 12

this.Решение 2 Constructor.prototype.method = function () { setTimeout(function () { this.anotherMethod(); }.bind(this), 5000); }; Constructor.prototype.anotherMethod = function () { }; 01. 02. 03. 04. 05. 06. 13

Что не так? var index = 123, arr = ['tro', 'lo', 'lo']; for (var index = 0; index < arr.length; index++) { arr[index] += 'o'; } console.log(index); Output: 123 01. 02. 03. 04. 05. 14

Scope не задается блоком var index = 123, arr = ['tro', 'lo', 'lo']; for (var index = 0; index < arr.length; index++) { arr[index] += 'o'; } console.log(index); Output: 3 01. 02. 03. 04. 05. 15

Что не так? var obj = {some: 'first', another: 'second'}; for(var key in obj) { setTimeout(function () { console.log(obj[key]); }, 1000); } Output: ﬁrst second 01. 02. 03. 04. 05. 06. 16

Переменная цикла мутабильна var obj = {some: 'first', another: 'second'}; for(var key in obj) { setTimeout(function () { console.log(obj[key]); }, 1000); } Output: second second 01. 02. 03. 04. 05. 06. 18

Переменная цикла.Решение 1 var obj = {some: 'first', another: 'second'}; for(var key in obj) { (function (currentKey){ setTimeout(function () { console.log(obj[currentKey]); }, 1000); })(key); } 01. 02. 03. 04. 05. 06. 07. 08. 19

Переменная цикла.Решение 2 var obj = {some: 'first', another: 'second'}; Object.keys(obj) .forEach(function (key) { setTimeout(function () { console.log(obj[key]); }, 1000); }); 01. 02. 03. 04. 05. 06. 07. 20

Что не так? var some = 'cool and not '; function foo() { console.log(some); var some = 'awful!'; console.log(some); } foo(); Output: cool and not awful! 01. 02. 03. 04. 05. 06. 07. 21

Hoisting var some = 'cool and not '; function foo() { console.log(some);// some === undefined varsome = 'awful!'; console.log(some); } foo(); Output: undeﬁned awful! 01. 02. 03. 04. 05. 06. 07. 22

Что плохого? for (var index = 0; index < 1000000; index++) { console.log(index); } 01. 02. 03. 23

Длинный цикл for (var index = 0; index < 1000000; index++) { console.log(index); } Страница не обрабатывает события Сервер не принимает новые подключения 01. 02. 03. 24

Длинный цикл.Решение var index = 0; function next() { if (index >= 1000000) { return; } console.log(index++); setTimeout(next, 0); } next(); 01. 02. 03. 04. 05. 06. 07. 25

Что нет так? var arr = []; arr[5] = 'some'; console.log(arr.length); Output: 1 01. 02. 03. 26

length === max(index) + 1 var arr = []; arr[5] = 'some'; console.log(arr.length); Output: 6 Использовать push/unshift/pop/shift 01. 02. 03. 27

Что нет так? var arr = []; arr[5] = 'some'; delete arr[5]; console.log(arr.length); Output: 0 01. 02. 03. 04. 28

undeﬁned x 6 var arr = []; arr[5] = 'some'; delete arr[5]; console.log(arr.length); Output: 6 Не использовать delete 01. 02. 03. 04. 29

И последний пример

Что не так? function foo () { return { name: 'Batman' }; } console.log(foo()); 01. 02. 03. 04. 05. 06. 07. 31

Конечно не Batman,он великолепен! function foo () { return { name: 'Batman' }; } console.log(foo()); Парсер подставит ';' 01. 02. 03. 04. 05. 06. 07. 32

И вообще советы • Использовать Strict Mode • Проверять код JShint • Использовать IDE – WebStorm, например • Boolean(x), Number(x), String(x) – для приведения типов • Mozilla Developer Network 33

#2 "Распространённые ошибки в JavaScript" Денис Речкунов

More Related Content

What's hot

Similar to #2 "Распространённые ошибки в JavaScript" Денис Речкунов

More from JSib

#2 "Распространённые ошибки в JavaScript" Денис Речкунов