Постигаем функциональный JavaScript

Лёгкое (я надеюсь), но подробное (я верю), введение в функции JavaScript. Пара сниппетов, пара живых и хороших примеров, вам понравится.

Ссылки на примеры:
Отложенные функции: http://codepen.io/shamansir/pen/HskmE, http://codepen.io/shamansir/pen/kBzJe
Частичные приложения: http://codepen.io/shamansir/pen/xCrgz
Очереди функций: http://codepen.io/shamansir/pen/AaHqy
Композиции функций: http://codepen.io/shamansir/pen/Funwt

Lyfe.js: http://bitbucket.org/balpha/lyfe
Статья о lyfe.js: http://balpha.de/2011/06/introducing-lyfe-yield-in-javascript

Transcript

1. shaman.sir, Animatron, 2012 Постигаем функциональный JavaScript (супер-дупер лекция, которая сделает тебя победителем) (особенно, если ты будешь умничкой)
2. ? (ты пребываешь в тихом безмыслии и не знаешь, что спросить) (что ж, тогда я расскажу тебе, как пройдёт лекция) Обо мне. Структура функции. Лямбды. Именованные функции. Вызов по месту. this. call и apply. Распостранённые ошибки и трюки. Отложенные функции. Частичные применения. Композиции функций. Объекты, с точки зрения функций.
3. Кто же этот парниша? (в смысле я) Я — shaman.sir, он же Котенко Антон, опытный веб-разработчик на JavaScript. Моя домашняя страничка находится по адресу http://shamansir.github.com, а мой блог — по адресу http://shamansir.github.com/blog; мой e-mail таков: shaman.sir@gmail.com.
4. Что есть функция? Итак,..
5. аргументы тело результат Что есть функция?
6. Как она выглядит в JavaScript? function(x, y, z) { return ω; }
7. На самом деле, этот пример сам является лямбдой (λ), функцией без имени, вызванной на месте... function(x, y, z) { return ω; }
8. function(x, y, z) { return ω; } На самом деле, этот пример сам является лямбдой (λ), функцией без имени, вызванной на месте...
9. Вот несколько именованных (напротив) вариантов... var foo = function(x, y, z) { return ω; } function foo(x, y, z) { return ω; } bar.foo = function(x, y, z) { return ω; } bar.prototype.foo = function(x, y, z) { return ω; }
10. var foo = function(x, y, z) { return ω; } function foo(x, y, z) { return ω; } bar.foo = function(x, y, z) { return ω; } bar.prototype.foo = function(x, y, z) { return ω; } Вот несколько именованных (напротив) вариантов...
11. ...И как их можно вызвать. foo(x, y, z); foo(x, y, z); bar.foo(x, y, z); new bar().foo(x, y, z);
12. var a = foo(x, y, z); var a = foo(x, y, z); var a = bar.foo(x, y, z); var a = new bar().foo(x, y, z); ...И как их можно вызвать.
13. С помощью лямбды, ты можешь передавать одну функцию в любую другую.
14. С помощью лямбды, ты можешь передавать одну функцию в любую другую. function(x, y, z) { return ω; } function filter(xs, f) { ... f(xs[i]) ... } filter([...], function(x, y, z) { return ω; });
15. Ты можешь вызвать лямбду на месте, (function(x, y, z) { return ω; })(25, 6, 11) передав ей реальные значения
16. Ты можешь вызвать лямбду на месте, (function(x, y, z) { return x+y+z; })(25, 6, 11) ➟ 42 передав ей реальные значения
17. Ты можешь вернуть фунцию из лямбды и вызвать её потом
18. (function(z, a, b) { var x = a + b; return function(y) { return x + y + z; }; })(11, 20, 5)(6); ➟ 42 Ты можешь вернуть фунцию из лямбды и вызвать её потом
19. Любая функция может быть вызвана с определённым состоянием this var foo = function(z) { return this.x+this.y+z; }; foo.call({x: 25, y: 6}, 11); ➟ 42 foo.apply({x: 25, y: 6}, [11]); ➟ 42 Array.prototype.push.call({length: 6}, 'a'); ➟ { length: 7, 6: 'a' }
20. Любая функция может быть вызвана с определённым состоянием this var foo = function(z) { return this.x+this.y+z; }; foo.call({x: 25, y: 6}, 11); ➟ 42 foo.apply({x: 25, y: 6}, [11]); ➟ 42 Array.prototype.push.call({length: 6}, 'a'); ➟ { length: 7, 6: 'a' }
21. И даже лямбда! (function(z) { return this.x+this.y+z; }).call({x: 25, y: 6}, 11); ➟ 42
22. Из этого можно сделать вывод, что значение this всегда зависит от места, в котором ты делаешь вызов
23. Новая область видимости создаётся только для функций, не для блоков Так что никаких вложенных областей для if-ов, for-ов и всякого такого.
24. Частая ошибка for (var i = 0; i < 42; i++) { other_func(..., function() { console.log(i); }); }); По своей лямбда-природе, внутренняя функция может быть вызвана в любой момент после выполнения цикла — она может быть не вызвана вообще или быть вызвана несколько раз, но только other_func знает, когда поскольку твоя переменная i является всего лишь указателем на значение, независимо от момента, когда лямбда будет вызвана, оно уже будет содержать 42
25. Частая ошибка for (var i = 0; i < 42; i++) { other_func(..., (function(actual_i) { return function() { console.log(actual_i); }); })(i)); }); Таким образом ты создаёшь оборачивающую лямбду, которая вызывается сразу и сохраняет текущее значение i в некую переменную, скажем actual_i решение
26. Теперь переходим к интересной части
27. Отложенные функции
28. Нужно достичь 'foofoobarxbee' parse( twice(str('foo')), str('bar'), any_char(), str('bee') );
29. pipe( process('foo.sh'), process('bar.sh'), stream_to('file.text') ); (синхронный, один вызов за другим, на данный момент, но асинхронная версия грядёт в этой самой презентации) Нужно достичь
30. Способ function twice(f) { var chunk = f(); return (search(str, pos, chunk) && search(str, pos+chunk.length, chunk); } twice = def(twice);
31. Инструмент function def(f) { return function() { return (function(f, args) { return function() { return f.apply(null, args); }; })(f, arguments); } }
32. Что происходит?
33. Пример с парсером http://codepen.io/shamansir/pen/HskmE
34. Другой пример http://codepen.io/shamansir/pen/kBzJe
35. Частичные применения
36. Нужно достичь foo(a, b, c) == foo(a)(b, c) (ты прав, если сейчас думаешь о встроенной Function.bind — здесь мы её по-своему имплементируем)
37. Способ var foo_c = bind(foo), foo_c_ctx = ctx_bind(foo); foo_c(1, 4, 5)(2, 3, 7) foo_c_ctx(1, 4)(2, 3, 8)({ foo: 'bar' });
38. Инструмент function bind(f) { return function() { return (function(args_p1) { return function() { return (function(args_p2) { return f.apply(null, as_arr(args_p1).concat(as_arr(args_p2))); })(arguments); }; })(arguments); }; }
39. Инструмент function ctx_bind(f) { return function() { return (function(args_p1) { return function() { return (function(args_p2) { return function(ctx) { return f.apply(ctx || null, as_arr(args_p1).concat(as_arr(args_p2))); } })(arguments); }; })(arguments); }; }
40. Что происходит?
41. Пример http://codepen.io/shamansir/pen/xCrgz
42. Цепочки функций
43. Нужно достичь queue(load_file)( ['file1', 'file2', 'file3'] ); (этот вариант выглядит асинхронным и он действительно вполне может быть асинхронным, каждый вызов может быть таковым, и все они вызываются в указанном строгом порядке)
44. Способ function load_file(name, next) { setTimeout(function() { .... next(/* file */); }, 1000); }
45. Инструмент function queue(f) { return function(values) { function __next() { if (!values.length) return; f(values.shift(), __next); } __next(); } } (мы опускаем обработку ошибок, чтобы предоставить тебе более чистый взгляд на происходящее, но ты можешь свободно получить on_error или on_complete вместе с f и передать их внутрь через __next)
46. Что происходит?
47. Пример http://codepen.io/shamansir/pen/AaHqy
48. Композиции функций
49. Нужно достичь compose(open_file, read_file, show_file, close_file)('test.file'); (эта передаёт в каждую функцию коллбэк в виде комбинированных последующих вызовов, что позволяет каждой из них решить, вызывать его по завершению асинхронного или синхронного процесса)
50. Нужно достичь compose(open_file, read_file, show_file, close_file)('test.file'); (а ещё она передаёт каждый предшествующий результат в следующую функцию, вот почему она такая МОЩНАЯ)
51. Способ function open_file(name, callback) { ... // callback may be called asynchronously } function read_file(handle, callback) { ... // callback may be called asynchronously } function show_file(contents, callback) { ... // callback may be called asynchronously } function close_file(handle, callback) { ... // callback may be called asynchronously }
52. Инструмент function compose() { var fs = arguments, fl = fs.length, fi = fl, stack = []; if (!fi) throw new Error('Please pass some functions'); while (fi--) { stack[fi] = (function(f, cb) { return function(res) { f(res, cb); } })(fs[fi], stack[fi+1] || null); } return function(initial) { stack[0](initial); } }
53. Что происходит?
54. Пример http://codepen.io/shamansir/pen/Funwt
55. Если вам нужны генераторы в JS, (да, те самые, которые с yield) обращайтесь к И если вы посмотрите в исходный код, то сможете уложить даже их в пару строк. Lyfe.js
56. о библиотеке Lyfe.js Если вам нужны генераторы в JS, (да, те самые, которые с yield) обращайтесь к И если вы посмотрите в исходный код, то сможете уложить даже их в пару строк.
57. Большинство функциональных приёмов занимают несколько строк Возможно, в этих случаях вам не нужны специальные библиотеки.
59. Теперь, когда ты постиг функции, ты можешь начинать постигать объекты. Просто считай их состояниями или экземплярами и никогда (пожалуйста, никогда) не назначай методов объектам, которые ты в будущем собираешься обходить циклами.
60. Объект с данными — это хэш. { val1: 3, val2: '17', val3: function... } Такие объекты ты сможешь спокойно обойти в цикле. (и такие объекты легко друг с другом смешивать)
61. Объект, созданный по некоему прототипу — это специальный экземпляр function A() { this.a = smth; } A.prototype.method = function() {} var foo = new A(); Нет смысла использовать его в циклах.
62. И не забывай об утках.
63. Конец. Все рисунки нарисованы shaman.sir при помощи iOS-приложения Paper. А кто слушал — молодец.
64. Вопросы.