new JavaScript

Введение в язык JavaScript для чайников

Transcript

1. new JavaScript;
2. Самый популярный
3. №1 на GitHub
4. время, затраченное на поиск официальной версии логотипа загадочный субъективный параметр
5. Самый доступный
6. В каждом браузере
7. ...и не только
8. Самый простой
9. {}
10. f()
11. В JavaScript нет • паттерн-матчинга • лист компрехеншнов • континьюэйшнов • корутин • монад • языковой поддержки модулей • огромной стандартной библиотеки • классов с названиями типа SQLIntegrityConstraintViolationException • и вообще классов
12. f() {}
13. f() <: {}
14. Function — это объект Object — это функция
15. {}
16. two = 2; yes = true; obj = {}; str = "hello"; arr = []; nop = function () {}; rex = /dog/; now = new Date;
18. two = 2; yes = true; obj = {}; str = "hello"; arr = []; nop = function () {}; rex = /dog/; now = new Date;
19. new
20. > typeof Date "function" > Date() "Wed Oct 17 2012 18:13:52 GMT+0700 (NOVT)" > new Date() Wed Oct 17 2012 18:13:54 GMT+0700 (NOVT)
21. > typeof Date() "string" > typeof (new Date()) "object"
22. object.constructor
23. two.constructor == Number; yes.constructor == Boolean; obj.constructor == Object; str.constructor == String; arr.constructor == Array; nop.constructor == Function; rex.constructor == RegExp; now.constructor == Date;
24. function Person(first, last) { this.firstName = first; this.lastName = last; } var bob = new Person('Bob'); bob.firstName; // 'Bob'
25. > bob.constructor === Person true > bob instanceof Person true
26. > empty = {} ▸ Object > empty.constructor function Object() { ... } > empty.toString() "[object Object]"
27. > empty = {} ▾ Object ▾ __proto__: Object ... ▸ constructor: function... ▸ isPrototypeOf: function... ▸ toString: function... ▸ valueOf: function... ...
28. null
29. > zen = Object.create(null) ▾ Object No Properties > zen instanceof Object false > typeof zen "object"
30. person = Object.create(null); person.fullName = function () { return this.firstName + ' ' + this.lastName; }; man = Object.create(person); man.sex = 'male';
31. bob = Object.create(man); bob.firstName = 'bob'; bob.lastName = 'smith'; bob.sex; // 'male' bob.fullName(); // 'bob smith'
32. > bob ▾ Object firstName: "bob" lastName: "smith" ▾ __proto__: Object sex: "male" ▾ __proto__: Object ▸ fullName: function...
33. null sex "male" fullName function () { ... } firstName "bob" lastName "smith" person man bob
34. function Person(first, last) { this.firstName = first; this.lastName = last; } var bob = new Person('Bob'); bob.firstName; // 'Bob'
35. function Person(first, last) { this.firstName = first; this.lastName = last; this.fullName = function () { return this.firstName + ' ' + this.lastName; } }
36. firstName "bob" lastName "smith" fullName function () ... bob firstName "alice" lastName "jones" fullName function () ... alice
37. Constructor.prototype
38. function Person(first, last) { this.firstName = first; this.lastName = last; } Person.prototype.fullName = function () { return this.firstName + ' ' + this.lastName; }
39. firstName "bob" lastName "smith" bob firstName "alice" lastName "jones" alice fullName function () ... Person.prototype
40. f()
41. Объекты первого класса
42. function foo() { return 'FOO'; }
43. var bar = foo; bar(); // 'FOO'
44. function baz(f) { return f(); } baz(foo); // 'FOO'
45. function quux() { return foo; } quux()(); // 'FOO'
46. var code = 'return "FOO"' var foo = new Function(code); foo(); // 'FOO'
47. Область видимости переменных
48. var
49. function fred(x) { var a = 10; return a * x; } var a = 3; fred(5); // 50 console.log(a); // 3
50. function fred(x) { /*no var*/ a = 10; return a * x; } var a = 3; fred(5); // 50 console.log(a); // 10
51. this
52. Person.prototype.fullName = function () { return this.firstName + ' ' + this.lastName; } bob = new Person('bob'); bob.fullName(); // 'bob undefined'
53. xavier = { firstName: 'xavier', lastName: 'sanchez' }; xavier.fullName(); // error!
54. xavier.fullName = Person.prototype.fullName; xavier.fullName(); // 'xavier sanchez'
55. Person.prototype .fullName .call(xavier); // 'xavier sanchez'
56. that
57. function Logger(s) { s.on('data', function (d) { this.log(d); }); } Logger.prototype.log = function (data) { console.log(new Date, data); }
58. function Logger(s) { s.on('data', function (d) { this.log(d); }); }
59. function Logger(s) { var that = this; s.on('data', function (d) { that.log(d); }); }
60. function Logger(s) { s.on('data', Logger.prototype .log.bind(this)); }
61. @stevebest https://github.com/stevebest jifasnif