Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,460 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Михаил Давыдов - 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Спасибо

×