Javascript 高阶函数使用介绍

　　高阶函数(higher-order function)—如果一个函数接收的参数为或返回的值为函数，那么我们可以将这个函数称为高阶函数。众所周知，JavaScript是一种弱类型的语言:JavaScript的函数既不对输入的参数，也不对函数的输出值作强定义和类型检查,那么函数可以成为参数，也可以成为输出值,这就体现了JavaScript对高阶函数的原生支持。

　　一、参数为函数的高阶函数:

1
2
3
4
5
6

function funcTest(f){
//简易判断一下实参是否为函数
if((typeof f)==”function”){
f();
}}
funcTest(function(){ });

　　这是一个简易的将参数作为函数的高阶函数。在调用funcTest时，输入一个函数作为参数，在funcTest内部执行这个输入的匿名函数,当然这样的代码片段没有什么实际意义。

　　一、返回值为函数的高阶函数:

1
2
3
4

function funcTest(){
return function(){};
}
var f=funcTest();

　　调用funcTest返回一个函数。

　　二、一个复杂一点的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

//Number类型相加
function addInt(a,b){
return parseInt(a)+parseInt(b);
}
//String类型相加
function addString(a,b){
return a.toString()+ b.toString();
}
function add(type){
if(type==="string"){
return addString;
}else{
return addInt;
}
}
var data1=add("string")("1","2");
//12
var data2=add("int")("1","2");
//3

　　以上示例实现了一个String类型相加与Number类型相加的分离。调用add函数如果输入参数为”string”时,输出一个字符串拼接函数;如果输入参数为”int”则输出数字相加函数。

　　三、高阶函数的实际作用:

　　上面的代码示例基本说明什么是高阶函数，下面来看看高阶函数与我们实际编程有什么关系:

　　1,回调函数

1
2
3
4
5
6
7
8

function callback(value){
alert(value);
}
function funcTest(value,f)
//f实参检测，检查f是否为函数
if(typeof callback==='function'){
f(value);}}funcTest(‘1',callback);
//1

　　示例在当调用funcTest时,funcTest内部会调用callback函数,即实现回调。

　　2,数据筛选与排序算法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

　　3,DOM元素事件定义

1
2
3
4
5
6
7
8
9
10
11

<html><title></title>
<body><input type=”button” value=”ClickMe” id=”myBtn” >
<script type=”text/javascript>
var btnClick=document.getElementById(“myBtn”);
//测试环境为FireFox
btnClick. addEventListener(“click”,function(e){
alert(“I'm a button!”);
//I'm a button},false);
</script>
</body>
</html>

　　在以上示例中，文档中定义了一个id为myBtn的按钮，js脚本为其添加了一个点击事件,其中addEventListener的第二个参数是一个函数。

　　结束语:高阶函数并不是JavaScript的专利,但绝对是JavaScript编程的利器。高阶函数实际上就是对基本算法的再度抽象,我们可以利用这一点，提高代码的抽象度，实现最大限度的代码重用，编写出更简洁、更利于重构的代码。

时间： 2024-09-12 18:05:55

Javascript 高阶函数使用介绍

Javascript 高阶函数使用介绍的相关文章

Javascript 高阶函数使用介绍_javascript技巧

javascript之典型高阶函数应用介绍二_javascript技巧

JavaScript高阶函数的学习笔记

javascript之典型高阶函数应用介绍_javascript技巧

Javascript 是你的高阶函数(高级应用)_javascript技巧

【Scheme归纳】4 高阶函数

Javascript中的高阶函数介绍_javascript技巧

Javascript：是你的高阶函数

高阶函数与JavaScript