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 (Блочное выражение, Блок)
4
Statement
•  Блочное выражение
–  if (){}, try{}catch(e){}, function a(){}
•  Директива интерпретатору
–  return, throw,...
5
Expression
•  Оператор
–  С одним аргументом typeof, !, (), ++, --, new, +,…
–  С двумя ==, ===, >, <, instanceof, +, -,...
Приведение типов
7
Приведение типов
•  Зависит от оператора
–  Оператор имеет определенный алгоритм
•  Зависит от типа аргументов
•  Внутре...
8
Сильно перегружен: сложение чисел, конкатенация строк
"2" + 3; // "23"
2 + 3; // 5
Пример: оператор + и примитивы
// Что...
9
Что если один из операндов
– Object?
10
Применяется тот же алгоритм
Вся «магия» в ToString({})
"2" + {}; // "2[object Object]"
Пример: оператор + объект
Concat...
11
Применяется тот же алгоритм
Вся «магия» в ToString({})
Пример: оператор + объект
if (IsCallable({}.toString)) {
return ...
12
[]+{}
13
The Abstract Equality Comparison Algorithm
Операторы == и ===
'' == '0' // false
0 == '' // true
0 == '0' // true
false...
14
'' === '0' // false
0 === '' // false
0 === '0' // false
false === undefined // false
false === null // false
null === ...
15
Оператор typeof
Type(val) Результат
Undefined "undefined"
Null "object"
Boolean "boolean"
Number "number"
String "strin...
16
WAT?
• [1] > 0; // ?
• [1,1] > 0; // ?
• [1,] > 0; // ?
• [1,,] > 0; // ?
• [1] > "0"; // ?
17
WAT?
• [1] > 0; // true
• [1,1] > 0; // false
• [1,] > 0; // true
• [1,,] > 0; // false
• [1] > "0"; // ?
Функции
Function Declaration,
Conditional Function Declaration,
Function Expression,
Named Function Expression,
IEFE
19
На самом деле Function в
JavaScript – это Object со
скрытым полем [[Call]]
http://es5.github.com/#x13.2
20
- Это Statement
- Инициализируется во время входа в контекст
- Объявляется в блоке функции или в глобальном блоке
a(); ...
21
- Это тоже Statement
- Инициализируется во время входа в контекст или в рантайме
- По стандарту такая запись недопустим...
22
- При использовании строгого режима тут будет SyntaxError
"use strict";
if (true) {
function a() {
return 1;
}
} else {...
23
- Это expression
- Инициализируется в рантайме
- Объявляется где угодно
a(); // error
var a = function () {
b(); // err...
24
- Это тот же Function Expression
- Можно обратиться к себе по своему имени
- Имя доступно только в своем блоке (кроме с...
25
- Это тот же Function Expression
-  Мы даем понять интерпретатору, что этот код - Function Expression
-  IEFE позволяет...
Область видимости
Определяется во время создания функции
Не меняется при передаче функции
Образует цепочку областей видимо...
27
var a = 1;
function foo() {
var c = 2;
function bar(e) {
return a + c + e;
}
return bar(3);
}
foo(); // 6
Область видим...
28
Цепочка областей видимости
GLOBAL
a 1
foo func(on
foo
c 2
bar func(on
bar
e argument
Вызов функции и this
this – основная грабля в JavaScript
Прямой вызов
Вызов через c оператором точка и []
Вызов через new
...
30
This в JavaScript
определяется во время
вызова функции!
http://es5.github.com/#x11.2.3
31
() – это оператор вызова функции
this всегда undefined но он трансформируется в global
В строгом режиме всегда undefine...
32
Это Expression
this – объект от которого был получена эта функция
var foo = {
bar: function () {
console.log(this);
}
}...
33
Это Expression
new – это еще один способ вызова функции
Каждая функция может быть конструктором
this – пустой объект со...
34
Это способ управлять значением this
this – объект, который вы передаете
var a = function (a, b) {
console.log(this, a, ...
35
Это способ подменять this без вызова функции
this – объект, который вы передаете
var a = function () {
console.log(this...
Вызов функции, arguments
Передача значения
arguments
37
Передача значения в функцию
•  Значения передаются по ссылке
•  Можно менять «поля» переданного объекта
•  Примитив мен...
38
arguments
•  Как и this появляется при вызове
•  Это не Array
•  Содержит список всех аргументов
–  arguments[0]…
•  Со...
Прототипное наследование
prototype и __proto__,
Цепочка прототипов,
Оператор получения свойства,
Оператор instanceof,
Опер...
40
Сказка о мутантах
41
Сказка о мутантах
•  В далекой-далекой галактике
•  Нет привычного нам наследования
•  Есть телепатическое наследование...
42
Структура мутанта
Мутант	

"Телепатические"	

гены	

Собственные	

гены	

Движение генов
43
Все зеленые
Color	
  
Дед	

 Отец	

 Сын
44
Дед: хочу стать синим!
Color	
  
Дед	

 Отец	

 Сын
45
Все посинели
Color	
  
Дед	

 Отец	

 Сын
46
Отец: верну-ка я цвет
Color	
   Color	
  
Дед	

 Отец	

 Сын
47
Дед синий, отец и сын зеленые
Color	
   Color	
  
Дед	

 Отец	

 Сын
48
Сын: хочу быть черным
Color	
  
Color	
   Color	
  
Дед	

 Отец	

 Сын
49
Мутанты и JavaScript
Size,	
  
Age	
  
Color	
  
Объект	

Свойства 	

прототипа	

Собственные	

свойства	

Делегировани...
50
Собственные свойства и прототип
•  Собственные свойства
•  Свойства прототипа
•  Любой объект имеет ссылку на прототип
...
51
prototype и __proto__
•  prototype – свойство функции
–  Оно есть у функции с рождения
–  По умолчанию это пустой объек...
52
Цепочка прототипов
это способ наследования в JavaScript
53
Работа оператора new
•  new(Constructor, arguments):*!
•  Получает на вход 2 операнда
–  Функция должна иметь свойство ...
54
function myNew(Constructor, args) {
if (typeof Constructor !== "function") {
throw new TypeError();
}
if (typeof Constr...
55
Цепочка прототипов
// Конструктор Grandfather
var Grandfather = function () {};
Grandfather.prototype.color = 'green';
...
56
Строим цепочку прототипов явно
// Конструктор Father
var Father = function () {};
Father.prototype = new Grandfather();...
57
Оператор new используется
для построения цепочек
прототипов
58
Оператор . и []
•  Выполняет поиск свойства
•  Использует цепочку прототипов
•  Ищет в собственных свойствах
•  Затем р...
59
var Foo = function () {
// Собственное свойство
this.b = 146;
};
Foo.prototype.bar = function () {
console.log(this);
}...
60
var foo = new Foo();
foo.__ptoto__ === Foo.prototype;
Оператор . и []
61
Оператор . и []
foo
b 146
__proto__ object
Foo.prototype
bar function
a 123
__proto__ object
Object.prototype
__proto__...
62
var foo = new Foo();
foo.__ptoto__ === Foo.prototype;
foo.bar(); // foo
foo.a; // 123
foo['b']; // 146
foo.c; // undefi...
63
Оператор instanceof
•  Использует цепочку прототипов
•  Рекурсивно ищет __proto__ === prototype
64
var Foo = function () {
this.b = 146;
};
var foo = new Foo();
foo instanceof Foo; // true
foo instanceof Object; // tru...
65
Цепочка прототипов
foo
b 146
__proto__ object
Foo.prototype
bar function
a 123
__proto__ object
Object.prototype
__prot...
66
var Foo = function () {
this.b = 146;
};
var foo = new Foo();
Foo.prototype.__proto__ = Array.prototype;
foo instanceof...
67
Цепочка прототипов
foo
b 146
__proto__ object
Foo.prototype
bar function
a 123
__proto__ object
Array.prototype
__proto...
Strict Mode
На самоподготовку
- выделите отличия от обычного режима
- всегда ли стоит применять Strict Mode?
- в каком мес...
Annotated ECMAScript 5.1
http://es5.github.com/
Mozilla Developer Network
https://developer.mozilla.org/en-US/
Основы и заблуждения насчет JavaScript
http://habrahabr.ru/post/120193/
Михаил Давыдов
Разработчик JavaScript
azproduction@yandex-team.ru
azproduction
Спасибо
Михаил Давыдов: JavaScript. Базовые знания
Upcoming SlideShare
Loading in …5
×

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

4,695 views

Published on

  • Be the first to comment

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

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

×