JavaScriptБазовые знанияМихаил ДавыдовРазработчик JavaScript
Базовый синтаксисExpression (Выражение, Оператор),Statement (Блочное выражение, Блок)
Statement    •  Блочное выражение     –  if (){}, try{}catch(e){}, function a(){}    •  Директива интерпретатору     –  re...
Expression    •  Оператор     –  С одним аргументом typeof, !, (), ++, --, new, +,…     –  С двумя ==, ===, >, <, instance...
Приведение типов
Приведение типов    •  Зависит от оператора     –  Оператор имеет определенный алгоритм    •  Зависит от типа аргументов и...
Пример: оператор + и примитивы    Сильно перегружен: сложение чисел, конкатенация строк     "2" + 3; // "23"     2 + 3;   ...
Что если один из операндов    – Object?9
Пример: оператор + объект     Применяется тот же алгоритм     Вся «магия» в ToString({})      "2" + {}; // "2[object Objec...
Пример: оператор + объект     Применяется тот же алгоритм     Вся «магия» в ToString({})      if (IsCallable({}.toString))...
На самоподготовку [] + {};12
Операторы == и ===     The Abstract Equality Comparison Algorithm     http://es5.github.com/#x11.9.3      == 0            ...
Операторы == и ===     The Strict Equality Comparison Algorithm     http://es5.github.com/#x11.9.6      === 0             ...
Оператор typeof     Алгоритм     - Ссылка не достижима (IsUnresolvableReference) – возвращаем "undefined"     - Иначе смот...
WAT?     • [1]     >   0;   //   ?     • [1,1]   >   0;   //   ?     • [1,]    >   0;   //   ?     • [1,,]   >   0;   //  ...
WAT?     • [1]     >   0;   //   true     • [1,1]   >   0;   //   false     • [1,]    >   0;   //   true     • [1,,]   >  ...
ФункцииFunction Declaration,  Conditional Function Declaration,Function Expression,  Named Function Expression,  IEFE
На самом деле Function в     JavaScript – это Object со     скрытым полем [[Call]]19               http://es5.github.com/#...
Function Declaration/Definition     - Это Statement     - Инициализируется во время входа в контекст     - Объявляется в б...
Conditional Function Declaration     - Это тоже Statement     - Инициализируется во время входа в контекст или в рантайме ...
CFD+Strict Mode     - При использовании строгого режима тут будет SyntaxError       "use strict";       if (true) {       ...
Function Expression     - Это expression     - Инициализируется в рантайме     - Объявляется где угодно      a(); // error...
Named Function Expression     - Это тот же Function Expression     - Можно обратиться к себе по своему имени     - Имя дос...
IEFE     - Это тот же Function Expression     -  Мы даем понять интерпретатору, что этот код - Function Expression     -  ...
Область видимостиОпределяется во время создания функцииНе меняется при передаче функцииОбразует цепочку областей видимости...
Область видимости     var a = 1;     function foo() {         var c = 2;         function bar(e) {             return a + ...
Цепочка областей видимости      GLOBAL      a      1      foo    func(on                       foo                       c...
Вызов функции и this this – основная грабля в JavaScript   Прямой вызов   Вызов через c оператором точка и []   Вызов чере...
This в JavaScript     определяется во время     вызова функции!30            http://es5.github.com/#x11.2.3
Прямой вызов – через оператор ()     () – это оператор вызова функции     this всегда undefined но он трансформируется в g...
Вызов функции и оператор . и []     Это Expression     this – объект от которого был получена эта функция      var foo = {...
Оператор new     Это Expression     new – это еще один способ вызова функции     Каждая функция может быть конструктором  ...
Call, apply     Это способ управлять значением this     this – объект, который вы передаете      var a = function (a, b) {...
Bind     Это способ подменять this без вызова функции     this – объект, который вы передаете      var a = function () {  ...
Вызов функции: arguments Передача значения arguments
Передача значения в функцию     •  Значения передаются по ссылке     •  Можно менять «поля» переданного объекта     •  При...
arguments     •  Как и this появляется при вызове     •  Это не Array     •  Содержит список всех аргументов      –  argum...
Прототипное наследование  prototype и __proto__,  Цепочка прототипов,  Оператор instanceof
prototype и __proto__     •  prototype – свойство функции      –  Оно есть у функции с рождения      –  По умолчанию это п...
Цепочка прототипов     var Foo = function () {         // Собственное свойство         this.b = 146;     };     Foo.protot...
Цепочка прототипов     var foo = new Foo();     foo.bar();   //   foo     foo.a;       //   123     foo[b];    //   146   ...
Цепочка прототипов       foo       b         146       __proto__ object                 Foo.prototype                 bar ...
Оператор . и []     •  Выполняет поиск свойства     •  Использует цепочку прототипов     •  Ищет в собственных свойствах  ...
Оператор instanceof     var Foo = function () {         this.b = 146;     };     var foo = new Foo();     foo instanceof F...
Оператор instanceof     •  Использует цепочку прототипов     •  Рекурсивно ищет __proto__ === prototype46
Цепочка прототипов       foo       b         146       __proto__ object                 Foo.prototype                 bar ...
Оператор newНа самоподготовку- Напишите функцию эмулирующую операторnew              http://es5.github.com/#x11.2.2
Strict ModeНа самоподготовку- выделите отличия от обычного режима- всегда ли стоит применять Strict Mode?- в каком месте к...
Annotated ECMAScript 5.1   http://es5.github.com/
Mozilla Developer Networkhttps://developer.mozilla.org/en-US/
Основы и заблуждения насчет JavaScript      http://habrahabr.ru/post/120193/
Михаил Давыдов     Разработчик JavaScript     azproduction@yandex-team.ru     azproductionСпасибо
Михаил Давыдов - JavaScript. Базовые знания
Upcoming SlideShare
Loading in …5
×

Михаил Давыдов - JavaScript. Базовые знания

2,408 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,408
On SlideShare
0
From Embeds
0
Number of Embeds
1,874
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Михаил Давыдов - JavaScript. Базовые знания

  1. 1. JavaScriptБазовые знанияМихаил ДавыдовРазработчик JavaScript
  2. 2. Базовый синтаксисExpression (Выражение, Оператор),Statement (Блочное выражение, Блок)
  3. 3. Statement •  Блочное выражение –  if (){}, try{}catch(e){}, function a(){} •  Директива интерпретатору –  return, throw, break, continue, var, … •  Может включать другие блочные выражения •  Может включать выражения •  Не возвращает значение •  Не может быть аргументом Expression •  Можно сделать из Expression – Expression;4 http://es5.github.com/#x12
  4. 4. Expression •  Оператор –  С одним аргументом typeof, !, (), ++, --, new, +,… –  С двумя ==, ===, >, <, instanceof, +, -,… –  С тремя a?b:c,… –  Вызов функции –  Оператор запятая •  Может включать другие операторы •  Не может включать Statement •  Возвращает значение •  Может быть в составе Statement5 http://es5.github.com/#x11
  5. 5. Приведение типов
  6. 6. Приведение типов •  Зависит от оператора –  Оператор имеет определенный алгоритм •  Зависит от типа аргументов и мест •  Внутренние функции JavaScript –  ToNumber, ToString, ToBoolean, ToObject7
  7. 7. Пример: оператор + и примитивы Сильно перегружен: сложение чисел, конкатенация строк "2" + 3; // "23" 2 + 3; // 5 // Что происходит в внутренностях JavaScript if (Type("2") === "String" || Type(3) === "String") { return Concat(ToString("2"), ToString(3)); } else { return ToNumber(2) + ToNumber(3); }8 http://es5.github.com/#x11.6.1
  8. 8. Что если один из операндов – Object?9
  9. 9. Пример: оператор + объект Применяется тот же алгоритм Вся «магия» в ToString({}) "2" + {}; // "2[object Object]" Concat(ToString("2"), ToString({})); ToString({}) -> ToPrimitive({}, "String") ToPrimitive({}, "String") -> ({}).[[DefaultValue]]("String")10 http://es5.github.com/#x8.12.8
  10. 10. Пример: оператор + объект Применяется тот же алгоритм Вся «магия» в ToString({}) if (IsCallable({}.toString)) { return ({}).toString(); } else if (IsCallable({}.valueOf)) { return ({}). valueOf(); } else { throw new TypeError(); }11 http://es5.github.com/#x8.12.8
  11. 11. На самоподготовку [] + {};12
  12. 12. Операторы == и === The Abstract Equality Comparison Algorithm http://es5.github.com/#x11.9.3 == 0 // false 0 == // true 0 == 0 // true false == undefined // false false == null // false null == undefined // true13
  13. 13. Операторы == и === The Strict Equality Comparison Algorithm http://es5.github.com/#x11.9.6 === 0 // false 0 === // false 0 === 0 // false false === undefined // false false === null // false null === undefined // false +0 === -0 // true14
  14. 14. Оператор typeof Алгоритм - Ссылка не достижима (IsUnresolvableReference) – возвращаем "undefined" - Иначе смотрим по таблице Type(val) Результат Undefined "undefined" Null "object" Boolean "boolean" Number "number" String "string" Object "object" Object и имеет [[Call]] "function”15 http://es5.github.com/#x11.4.3
  15. 15. WAT? • [1] > 0; // ? • [1,1] > 0; // ? • [1,] > 0; // ? • [1,,] > 0; // ? • [1] > "0"; // ?16
  16. 16. WAT? • [1] > 0; // true • [1,1] > 0; // false • [1,] > 0; // true • [1,,] > 0; // false • [1] > "0"; // ?17
  17. 17. ФункцииFunction Declaration, Conditional Function Declaration,Function Expression, Named Function Expression, IEFE
  18. 18. На самом деле Function в JavaScript – это Object со скрытым полем [[Call]]19 http://es5.github.com/#x13.2
  19. 19. Function Declaration/Definition - Это Statement - Инициализируется во время входа в контекст - Объявляется в блоке функции или в глобальном блоке a(); // OK function a() { b(); // OK function b() { } } a();20 http://es5.github.com/#x13
  20. 20. Conditional Function Declaration - Это тоже Statement - Инициализируется во время входа в контекст или в рантайме - По стандарту такая запись недопустима if (true) { function a() { return 1; } } else { function a() { return 2; } } a(); // Firefox – 1, Others - 221
  21. 21. CFD+Strict Mode - При использовании строгого режима тут будет SyntaxError "use strict"; if (true) { function a() { return 1; } } else { function a() { return 2; } } // SyntaxError // Use Function Expression!22
  22. 22. Function Expression - Это expression - Инициализируется в рантайме - Объявляется где угодно a(); // error var a = function () { b(); // error var b = function () {}; b(); // ok }; a(); // ok23 http://es5.github.com/#x11.2.5
  23. 23. Named Function Expression - Это тот же Function Expression - Можно обратиться к себе по своему имени - Имя доступно только в своем блоке (кроме старых IE) (function timer() { setTimeout(timer, 1000); console.log(+new Date); }()); typeof timer; // undefined, Old IE - function24
  24. 24. IEFE - Это тот же Function Expression -  Мы даем понять интерпретатору, что этот код - Function Expression -  IEFE позволяет эмулировать блочную область видимости function (){}(); // SyntaxError !function (){}(); // OK +function (){}(); // OK *function (){}(); // OK (function (){}()); // OK [function (){}()]; // OK var a = function (){}(); var a = (function (){}()); // The best25
  25. 25. Область видимостиОпределяется во время создания функцииНе меняется при передаче функцииОбразует цепочку областей видимостиЛексическаяОбразует «замыкание»
  26. 26. Область видимости var a = 1; function foo() { var c = 2; function bar(e) { return a + c + e; } return bar(3); } foo(); // 6 http://es5.github.com/#x10.327 http://es5.github.com/#x10.2
  27. 27. Цепочка областей видимости GLOBAL a 1 foo func(on foo c 2 bar func(on bar e argument28
  28. 28. Вызов функции и this this – основная грабля в JavaScript Прямой вызов Вызов через c оператором точка и [] Вызов через new Вызов через call, apply, bind
  29. 29. This в JavaScript определяется во время вызова функции!30 http://es5.github.com/#x11.2.3
  30. 30. Прямой вызов – через оператор () () – это оператор вызова функции this всегда undefined но он трансформируется в global В строгом режиме всегда undefined (трансформации нет) function a() { console.log(this); } a(); // window (undefined -> window) function b() { "use strict"; console.log(this); } b(); // undefined31
  31. 31. Вызов функции и оператор . и [] Это Expression this – объект от которого был получена эта функция var foo = { bar: function () { console.log(this); } }; foo.bar(); // foo var baz = {}; baz.bar = foo.bar; baz.bar(); // baz var fooBar = foo.bar; fooBar(); // ???32 http://es5.github.com/#x11.2.1
  32. 32. Оператор new Это Expression new – это еще один способ вызова функции Каждая функция может быть конструктором this – пустой объект со ссылкой на prototype вызываемой функции var A = function () { console.log(this); console.log( this.__proto__ === A.prototype ); }; new A(); // Object, true33 http://es5.github.com/#x11.2.2
  33. 33. Call, apply Это способ управлять значением this this – объект, который вы передаете var a = function (a, b) { console.log(this, a, b); }; a.call([]); // [], undefined, … a.call([], 1, 2); // [], 1, 2 a.apply([], [1, 2]); // [], 1, 2 http://es5.github.com/#x15.3.4.4 34 http://es5.github.com/#x15.3.4.3
  34. 34. Bind Это способ подменять this без вызова функции this – объект, который вы передаете var a = function () { console.log(this); }; var b = a.bind({}); b(); // {} http://es5.github.com/#x15.3.4.535 MDN Function#bind http://clck.ru/2EeTx
  35. 35. Вызов функции: arguments Передача значения arguments
  36. 36. Передача значения в функцию •  Значения передаются по ссылке •  Можно менять «поля» переданного объекта •  Примитив менять нельзя •  Можно переписать ссылку без потери объекта37
  37. 37. arguments •  Как и this появляется при вызове •  Это не Array •  Содержит список всех аргументов –  arguments[0]… •  Содержит ссылку на вызывающий конекст –  arguments.caller –  Deprecated! •  Содержит ссылку на себя –  arguments.calle38 http://es5.github.com/#x10.6
  38. 38. Прототипное наследование prototype и __proto__, Цепочка прототипов, Оператор instanceof
  39. 39. prototype и __proto__ •  prototype – свойство функции –  Оно есть у функции с рождения –  По умолчанию это пустой объект •  __proto__ – ссылка на prototype у объекта –  Во многих движках JavaScript оно скрыто –  Определяется во время работы оператора new http://es5.github.com/#x15.3.5.240 http://es5.github.com/#x8.6.2
  40. 40. Цепочка прототипов var Foo = function () { // Собственное свойство this.b = 146; }; Foo.prototype.bar = function () { console.log(this); }; Foo.prototype.a = 123;41
  41. 41. Цепочка прототипов var foo = new Foo(); foo.bar(); // foo foo.a; // 123 foo[b]; // 146 foo.c; // undefined Foo.prototype.c = 8; foo.c; // 8 <- Magic???42
  42. 42. Цепочка прототипов foo b 146 __proto__ object Foo.prototype bar function a 123 __proto__ object Object.prototype __proto__ null43 http://es5.github.com/#x4.2.1
  43. 43. Оператор . и [] •  Выполняет поиск свойства •  Использует цепочку прототипов •  Ищет в собственных свойствах •  Затем рекурсивно по ссылке __proto__ •  Если __proto__ null – возвратит undefined44 http://es5.github.com/#x11.2.1
  44. 44. Оператор instanceof var Foo = function () { this.b = 146; }; var foo = new Foo(); foo instanceof Foo; // true foo instanceof Object; // true Магия?? foo instanceof Array; // false45 http://es5.github.com/#x11.8.6
  45. 45. Оператор instanceof •  Использует цепочку прототипов •  Рекурсивно ищет __proto__ === prototype46
  46. 46. Цепочка прототипов foo b 146 __proto__ object Foo.prototype bar function a 123 __proto__ object Object.prototype __proto__ null47
  47. 47. Оператор newНа самоподготовку- Напишите функцию эмулирующую операторnew http://es5.github.com/#x11.2.2
  48. 48. Strict ModeНа самоподготовку- выделите отличия от обычного режима- всегда ли стоит применять Strict Mode?- в каком месте кода стоит объявлять SM? http://es5.github.com/#x10.1.1
  49. 49. Annotated ECMAScript 5.1 http://es5.github.com/
  50. 50. Mozilla Developer Networkhttps://developer.mozilla.org/en-US/
  51. 51. Основы и заблуждения насчет JavaScript http://habrahabr.ru/post/120193/
  52. 52. Михаил Давыдов Разработчик JavaScript azproduction@yandex-team.ru azproductionСпасибо

×