[零基础学HTML5] 第十一课 函数式编程
围棋新人吧
全部回复
仅看楼主
level 13
JohnYe3333 楼主
今天来补课,来学点函数式编程,为后面的框架学习作准备。
2016年04月23日 00点04分 1
level 13
JohnYe3333 楼主
函数式编程对于C语言写过递归函数的人来说,可能要好懂一点。
比如说阶乘函数:
function factorial(n)
{
if (n == 1)
{ return 1; }
else
{ return factorial(n - 1) * n; }
}
把函数本身作为一个值乘以n就返回了。
2016年04月23日 00点04分 2
level 13
JohnYe3333 楼主
这种把函数本身视为一个值的编程风格就是函数式编程。
2016年04月23日 00点04分 3
level 13
JohnYe3333 楼主
作为一个练习,我们可以把上式改写下,使函数式编程的味道更浓一点。
定义:
function equal(a, b){ return a==b; }
function mul(a, b){ return a*b; }
function dec(x){ return x - 1; }
那么,上述阶乘函数也可以改写成这样:
function factorial(n)
{
if (equal(n, 1))
{ return 1; }
else
{ return mul(n, factorial(dec(n))); }
}
2016年04月23日 01点04分 4
level 13
JohnYe3333 楼主
或许你还觉得这只是一个普通的嵌套函数,那么看看这个式子:
equal(mul(dec(5), 4), 16); 满满的函数风扑面而来啊。
2016年04月23日 01点04分 5
level 13
JohnYe3333 楼主
还有味道更浓的,比如:
function adder(num)
{
return function (x) { return num + x; } ;
}
alert(adder(7)(8));
adder(7)这个表达式本身可以理解成一个函数,它与下列表达式等价:
var add7 = adder(7);
alert(add7(8));
2016年04月23日 01点04分 6
level 13
JohnYe3333 楼主
下面再看一段函数式编程在UI上的应用。
(这也是我们在学习框架之前,需要补一点函数式编程知识的原因。)
2016年04月23日 01点04分 7
level 13
JohnYe3333 楼主
<div id="buttonClassTest">
<script type="text/javascript">
function Button(value) {
this.value = value;
this.button = document.createElement("button");
this.button.appendChild(document.createTextNode("test"));
this.button.onclick = (function(v) {
return function() { alert(v); };
}) (this.value);
}
var bt = new Button(5);
document.getElementById("buttonClassTest").appendChild(bt.button);
</script>
</div>
2016年04月23日 01点04分 8
level 13
JohnYe3333 楼主
注意onclick函数的写法。
如果不好理解的话,我们就把它分解下:
this.button.onclick = fnx(this.value );
fnx = function(v) { return ...; }
... = function(){ alert(v)};
2016年04月23日 01点04分 9
level 13
JohnYe3333 楼主
总链接:
[技术水]零基础学HTML5,目标:做个网页版的围棋App
( https://tieba.baidu.com/p/4446488002 )
2016年04月23日 01点04分 10
1