Intro of JavaScript and FunctionalProgramming for front-end developers.

1. JS对象及函数式编程乱步
Alipay WD @晴川 on 2011-07-29
11年7月29日星期五 1

2. ⼀一起聊聊熟悉的编程语言和JS框架
11年7月29日星期五 2

3. 面向对象编程 vs. 面向过程编程
11年7月29日星期五 3

4. 动态解释型语言 vs. 静态编译型语言
11年7月29日星期五 4

5. JS的特点：入门易精通难
11年7月29日星期五 5

6. JS的特点：入门易精通难
属于Java的部分
⼀一切皆是对象(!特殊值 集合 数组)
封装与继承(!类)
属于Script的部分
独占式执行的脚本语言CSSL
与DOM关系密切(!Node.js)
11年7月29日星期五 6

7. 编码规范和约定
为什么使用var定义变量
为什么使用{}代替new Object()
为什么使用[]代替new Array()
有哪些OOP原则值得借鉴
说"eval是恶魔"？
11年7月29日星期五 7

8. 继续各种求解释
function average(x,y) {
return (x+y)/2;
}
var z = average(1,3);
var z = (function(x,y) {
return (x+y)/2;
})(1,3);
11年7月29日星期五 8

9. 继续各种求解释
eval('(' + json + ')')
11年7月29日星期五 9

10. 继续各种求解释
function foo(){
if(window===parent){
function bar(){alert(1);}
}
else{
function bar(){alert(2);}
}
bar();
}
foo();
11年7月29日星期五 10

11. 继续各种求解释
for ( var i = 0; i < its.length; i++ ) {
//(function(){
its[i].onclick = function(){alert(i);}
//})();
}
11年7月29日星期五 11

12. "函数是⼀一等公民"
11年7月29日星期五 12

13. "函数是⼀一等公民"
匿名函数与命名函数
声明与表达式语句
”(”和”)”构成⼀一个分组操作符，而分组操作符只
能包含表达式——匿名函数表达式
命名函数表达式——产生可靠的栈调用信息的唯
⼀一途径
自执行匿名函数：(function(){})();
11年7月29日星期五 13

14. 函数的定义方式
函数声明：
function Identifier ( FormalParameterList
opt ) { FunctionBody }
函数表达式：
function Identifier opt
( FormalParameterList opt ) { FunctionBody }
ECMAScript 根据上下文来区分函数声明和函数表达式，
假设 "function test(){}" 是⼀一个表达式的⼀一部分，
它就是⼀一个函数表达式，否则它就是⼀一个函数声明。
11年7月29日星期五 14

15. 函数的调用方式
1)全局函数 1)Global对象
2)对象方法 2)调用对象
3)构造函数 3)构造返回对象
4)apply/call调用 4)调用时传入的第⼀一个
参数
区别在于函数内this指
针的绑定——
11年7月29日星期五 15

16. "原型链" + "作用域链"
11年7月29日星期五 16

17. "原型链" + "作用域链"
树遍历与链回溯
原型继承与实例构造
上下文与作用域
形参与实参
全局变量与局部变量
内部函数与外部函数
11年7月29日星期五 17

18. "解析时"与"运行时"
11年7月29日星期五 18

19. "解析时"与"运行时"
活动对象
函数声明会在任何表达式被解析和求值之前先
行被解析和求值。
11年7月29日星期五 19

20. "超空间"与生存期
11年7月29日星期五 20

21. "超空间"与生存期
渲染引擎与脚本引擎
11年7月29日星期五 21

22. 闭包
11年7月29日星期五 22

23. 用累加器做示例
function a() {
var i = 0; 内部函数
function b() {
外部函数
alert(++i);
} 局部变量
return b;
} 内部函数在外部
var c = a(); 函数返回后被执
c(); 行
11年7月29日星期五 23

24. 闭包
是⼀一个表达式（⼀一般是函数），它具有自由变
量以及绑定这些变量的环境（该环境“封闭
了”这个表达式）。
闭包封闭的外部变量就是自由变量，而由于该
自由变量存在，外部函数即便返回，其占用的
内存也得不到释放。
11年7月29日星期五 24

25. 函数式编程
11年7月29日星期五 25

26. 想想那些好用的方法
.sort()
.each()
.map()
.grep()
11年7月29日星期五 26

27. λ演算
（lambda calculus）
是⼀一套用于研究函数定义、函数应用和递归的
形式系统。Lambda演算可以被称为最小的通用
程序设计语言。
虽然 λ 演算并非设计来于计算机上运行，但可
视为第⼀一个函数式编程语言。
11年7月29日星期五 27

28. 函数式编程
最古老的例子莫过于1958年被创造出来的LISP
了，通过 LISP，可以用精简的人力，实现通用
的程序设计。
较现代的例子包括Scheme、Haskell、Clean、
Erlang和Miranda等。
Scheme，是⼀一种多范型的编程语言，它是LISP
的两种主要的方言之⼀一。
11年7月29日星期五 28

29. 柯里化 [CURRYING]
高阶函数
函数计算比代码运行重要
函数计算可做到随时调用
11年7月29日星期五 29

30. function add(a, b) {
if (arguments.length < 1) {
return add;
} else if (arguments.length < 2) {
return function(c) {return a + c;}
} else {
return a + b;
}
}
11年7月29日星期五 30

31. function curry(func,args,space) {
var n = func.length - args.length;
var sa = Array.prototype.slice.apply(args);
function accumulator(moreArgs,sa,n) {
var saPrev = sa.slice(0); // to reset
var nPrev = n; // to reset
for(var i=0;i<moreArgs.length;i++,n--) {
sa[sa.length] = moreArgs[i];
}
if ((n-moreArgs.length)<=0) {
var res = func.apply(space,sa);
sa = saPrev;
n = nPrev;
return res;
} else {
return function (){
return
accumulator(arguments,sa.slice(0),n);
}
}
}
return accumulator([],sa,n);
}
11年7月29日星期五 31

32. function add (a,b,c){
if (arguments.length <
this.add.length) {
return
curry(this.add,arguments,this);
}
return a+b+c;
}
alert(add()(1,2,4)); // 7
alert(add(1)(2)(5)); // 8
alert(add(1)()(2)()(6)); // 9
alert(add(1,2,7,8)); // 10
11年7月29日星期五 32

33. function container() {
var secret = 100;
this.add = function (a,b,c){
if (arguments.length <
this.add.length) {
return
curry(this.add,arguments,this);
}
return a+b+c + secret;
}
this.adjustSecret = function (n)
{ secret = n; }
this.giveSecret = function()
{ return secret; }
}
11年7月29日星期五 33

34. con = new container();
alert("secret is : "+con.giveSecret());
// check that value is indeed 100
curriedthingy = con.add(1,2);
// let's create a curried function
alert(curriedthingy(4));
// this alerts 107, as expected.
con.adjustSecret(1000);
// now, in the original con object,
alert(curriedthingy(4));
// and presto, it does. alerts 1007.
11年7月29日星期五 34

35. 更多函数式编程示例
函数式编程语言的"Hello World" 程序是阶乘函
数。
http://zh.wikipedia.org/zh-cn/Hello_World
11年7月29日星期五 35