Your SlideShare is downloading. ×
Михаил Давыдов: JavaScript. Базовые знания
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

4,132

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,132
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×