Js对象及函数式编程乱步

1,000 views

Published on

Intro of JavaScript and FunctionalProgramming for front-end developers.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,000
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Js对象及函数式编程乱步

  1. 1. JS对象及函数式编程乱步 Alipay WD @晴川 on 2011-07-2911年7月29日星期五 1
  2. 2. ⼀一起聊聊熟悉的编程语言和JS框架11年7月29日星期五 2
  3. 3. 面向对象编程 vs. 面向过程编程11年7月29日星期五 3
  4. 4. 动态解释型语言 vs. 静态编译型语言11年7月29日星期五 4
  5. 5. JS的特点:入门易精通难11年7月29日星期五 5
  6. 6. JS的特点:入门易精通难 属于Java的部分 ⼀一切皆是对象(!特殊值 集合 数组) 封装与继承(!类) 属于Script的部分 独占式执行的脚本语言CSSL  与DOM关系密切(!Node.js)11年7月29日星期五 6
  7. 7. 编码规范和约定 为什么使用var定义变量 为什么使用{}代替new Object() 为什么使用[]代替new Array() 有哪些OOP原则值得借鉴 说"eval是恶魔"?11年7月29日星期五 7
  8. 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. 9. 继续各种求解释 eval(( + json + ))11年7月29日星期五 9
  10. 10. 继续各种求解释 function foo(){ if(window===parent){ function bar(){alert(1);} } else{ function bar(){alert(2);} } bar(); } foo();11年7月29日星期五 10
  11. 11. 继续各种求解释 for ( var i = 0; i < its.length; i++ ) { //(function(){ its[i].onclick = function(){alert(i);} //})(); }11年7月29日星期五 11
  12. 12. "函数是⼀一等公民"11年7月29日星期五 12
  13. 13. "函数是⼀一等公民" 匿名函数与命名函数 声明与表达式语句 ”(”和”)”构成⼀一个分组操作符,而分组操作符只 能包含表达式——匿名函数表达式 命名函数表达式——产生可靠的栈调用信息的唯 ⼀一途径 自执行匿名函数:(function(){})();11年7月29日星期五 13
  14. 14. 函数的定义方式 函数声明: function Identifier ( FormalParameterList opt ) { FunctionBody } 函数表达式: function Identifier opt ( FormalParameterList opt ) { FunctionBody } ECMAScript 根据上下文来区分函数声明和函数表达式, 假设 "function test(){}" 是⼀一个表达式的⼀一部分, 它就是⼀一个函数表达式,否则它就是⼀一个函数声明。11年7月29日星期五 14
  15. 15. 函数的调用方式 1)全局函数 1)Global对象 2)对象方法 2)调用对象 3)构造函数 3)构造返回对象 4)apply/call调用 4)调用时传入的第⼀一个 参数 区别在于函数内this指 针的绑定——11年7月29日星期五 15
  16. 16. "原型链" + "作用域链"11年7月29日星期五 16
  17. 17. "原型链" + "作用域链" 树遍历与链回溯 原型继承与实例构造 上下文与作用域 形参与实参 全局变量与局部变量 内部函数与外部函数11年7月29日星期五 17
  18. 18. "解析时"与"运行时"11年7月29日星期五 18
  19. 19. "解析时"与"运行时" 活动对象 函数声明会在任何表达式被解析和求值之前先 行被解析和求值。11年7月29日星期五 19
  20. 20. "超空间"与生存期11年7月29日星期五 20
  21. 21. "超空间"与生存期 渲染引擎与脚本引擎11年7月29日星期五 21
  22. 22. 闭包11年7月29日星期五 22
  23. 23. 用累加器做示例 function a() {     var i = 0; 内部函数     function b() { 外部函数         alert(++i);     } 局部变量     return b; } 内部函数在外部 var c = a(); 函数返回后被执 c(); 行11年7月29日星期五 23
  24. 24. 闭包 是⼀一个表达式(⼀一般是函数),它具有自由变 量以及绑定这些变量的环境(该环境“封闭 了”这个表达式)。 闭包封闭的外部变量就是自由变量,而由于该 自由变量存在,外部函数即便返回,其占用的 内存也得不到释放。11年7月29日星期五 24
  25. 25. 函数式编程11年7月29日星期五 25
  26. 26. 想想那些好用的方法 .sort() .each() .map() .grep()11年7月29日星期五 26
  27. 27. λ演算 (lambda calculus) 是⼀一套用于研究函数定义、函数应用和递归的 形式系统。Lambda演算可以被称为最小的通用 程序设计语言。 虽然 λ 演算并非设计来于计算机上运行,但可 视为第⼀一个函数式编程语言。11年7月29日星期五 27
  28. 28. 函数式编程 最古老的例子莫过于1958年被创造出来的LISP 了,通过 LISP,可以用精简的人力,实现通用 的程序设计。 较现代的例子包括Scheme、Haskell、Clean、 Erlang和Miranda等。 Scheme,是⼀一种多范型的编程语言,它是LISP 的两种主要的方言之⼀一。11年7月29日星期五 28
  29. 29. 柯里化 [CURRYING] 高阶函数 函数计算比代码运行重要 函数计算可做到随时调用11年7月29日星期五 29
  30. 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. 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. 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));      // 1011年7月29日星期五 32
  33. 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. 34. con = new container(); alert("secret is : "+con.giveSecret()); // check that value is indeed 100 curriedthingy = con.add(1,2);           // lets 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. 35. 更多函数式编程示例 函数式编程语言的"Hello World" 程序是阶乘函 数。 http://zh.wikipedia.org/zh-cn/Hello_World11年7月29日星期五 35

×