javascript回调函数笔记

news/2024/7/3 3:42:15

来源于:https://github.com/useaname/blog-study

 

在Javascript中,函数是第一类对象。意味函数可以像对象一样按照第一类被管理使用。
回调函数是从一个叫函数式编程的编程范式中衍生出来的概念。简单来说,函数式编程就是使用函数作为变量。函数式编程过去 - 甚至是现在,依旧没有被广泛使用 - 它过去常被看做是那些受过特许训练的,大师级别的程序员的秘传技巧。

# 什么是回调或者高阶函数
一个回调函数,也被称为高阶函数,是一个被作为参数传递给另一个函数(在这里我们把另一个函数叫做“otherFunction”)的函数,回调函数在otherFunction中被调用。一个回调函数本质上是一种编程模式(为一个常见问题创建的解决方案),因此,使用回调函数也叫做回调模式。

jQuery中的回调函数:
```javascript
$("#btn").click(function(){
alert("btn is clicked");
});
```
正如你在前面的例子中看到的,我们将一个函数作为参数传递给了click方法。click方法会调用(或者执行)我们传递给它的函数。这是Javascript中回调函数的典型用法,它在jQuery中广泛被使用。
```javascript
var friends = ["mike", "stacy", "Andy", "Rick"];
friends.foreach(function(o,i){
console.log(index + 1 + ": " + o);
});
```
回调函数既闭包:
将一个回调函数作为变量传递给另一个函数时,这个回调函数在包含它的函数内的某一点执行。就好像这个回掉函数是在包含它的函数中定义一样。意味着回调函数本质上是一个闭包。
闭包能够进入包含它的作用域,因此回调函数能获取包含它的函数中的变量,以及全局作用域中的变量。
# 实现回调函数的基本原理
### 使用命名或匿名函数作为回调
在前面的例子中,使用了在参数位置定义的匿名函数作为回调函数。这是在回调函数中普遍使用的魔术。另一种常见的是顶一个命名函数并将函数名作为变量传递给函数。比如:
```javascript
//全局变量
var allUserData = [];
//普通函数
function logStuff(userData){
if( typeof userData === "string"){
console.log(userData);
}else if( typeof userData === "object"){
for(var item in userData){
console.log(item + ": " + userData[itme]);
}
}
}
```
//一个函数接收两个参数,后一个参数为回调函数
```javascript
function getInput(options, callback){
allUserData.push(options);
callback(options);
}

//调用getInput时,将logStuff传递给他
//因此logStuff将会在getInput内被回调(执行)
getInput({name:"Rich",speciality:"Javascript"},logStuff);
//name:Rick
//speciality:Javascript
```

# 允许多重回调函数

```javascript
将不止一个的回调函数作为参数传递给一个函数,就像我们能够传递不止一个变量一样。这里有一个关于jQuery中AJAX的例子:
function successCallback(){
//在发送之前做点什么
}

function successCallback(){
//在信息被成功接收之后做点什么
}

function completeCallback(){
//在完成之后做点什么
}

function errorCallback(){
//当错误发生时做点什么
}

$.ajax({
url:"http://fiddle.jshell.net/favicon.png",
success:successCallback,
complete:completeCallback,
error:errorCallback

});
```

# 创建自己的回调函数
使用回调函数是如此的简单而强大,你应该查看你的代码看看有没有能使用回调函数的地方。回调函数将在以下几个方面帮助你:

* 避免重复代码(DRY-不要重复你自己) - 在你拥有更多多功能函数的地方实现更好的抽象(依然能保持所有功能) - 让代码具有更好的可维护性
* 使代码更容易阅读
* 编写更多特定功能的函数

下面的函数将完成:读取用户信息,用数据创建一首通用的诗,并且欢迎用户。这个本来是个非常复杂的函数因为它包含很多if/else语句,且将在调用那些用户数据需要的功能方面有诸多不兼容性。

getUserInput函数是多功能的:它能执行具有多种功能的回调函数。

```javascript
//首先,创建通用诗的生成函数;它将作为下面的getUserInput函数的回调函数
function genericPoemMaker(name, gender){
console.log(name + " is finer than fine wine.");
console.log("Altruistic and noble for the modern time.");
console.log("Always admirably adorned with the latest style.");
console.log("A " + gender + " of unfortunate tragedies who still manages a perpetual smile");
}
//callback,参数的最后一项,将会是我们在上面定义的genericPoemMaker函数
function getUserInput(firstName, lastName, gender, callback) {
var fullName = firstName + " " + lastName;
// Make sure the callback is a function
if(typeof callback === "function"){
// Execute the callback function and pass the parameters to it
callback(fullName, gender);
}
}

//调用getUserInput函数并将genericPoemMaker函数作为回调函数:
getUserInput("Michael", "Fassbender", "Man",genericPoemMaker);
```
因为getUserInput函数仅仅只负责提取数据,我们可以把任意回调函数传递给它。例如,我们可以传递一个greetUser函数:

```javascript
function greetUser(customerName, sex) {
var salutation = sex && sex === "Man" ? "Mr." : "Ms.";
console.log("Hello, " + salutation + " " + customerName);
}

// 将greetUser作为一个回调函数
getUserInput("Bill", "Gates", "Man", greetUser);

// 这里是输出
Hello, Mr. Bill Gate
```
调用了完全相同的getUserInput函数,但是这次完成了一个完全不同的任务。


http://lihuaxi.xjx100.cn/news/240545.html

相关文章

网页制作_网页

网页制作by Divya Mistry通过Divya Mistry 网页 (MePage) Web上的单页目标 (A Single-page Destination on the Web) After going through some front-end development tutorials on Free Code Camp, I decided to try my hands at this simple Zipline challenge of creating…

写了一个linux的计时脚本,能够输出时分秒

#!/bin/bashstart$(date %s)# 用需要计时的程序将下面这句替换掉 sleep 100;end$(date %s) take$(( end - start )) echo Time taken to execute commands is ${take} seconds.let min${take}/60 let left1${take}-$(( ${min} * 60 ))echo That is ${min} minutes and ${left1}…

gulp

详情请参见github: https://github.com/Sunnshino/gulpjs-plugs 1 /*2 目录结构:3 test(主目录)4 src(输入路径)5 index.html(主页面)6 js(文件夹)7 less(文件夹)8 images(文件夹)9 …

图的连通性和连通分量_英语,人口,连通性和露营地

图的连通性和连通分量by Evaristo Caraballo通过Evaristo Caraballo 英语,人口,连通性和露营地 (English, Population, Connectivity and Campsites) 在世界范围内推动使用Free Code Camp的因素 (Factors driving the use of Free Code Camp worldwide)…

aligned_storage简单学习

#include <iostream> #include <type_traits> #include <string>/* template< std::size_t Len, std::size_t Align default-alignment >struct::type aligned_storage; 相当于一个内建的POD类型他的大小是Size他的对齐方式是Align */ template<c…

gitlab安装各种坑

架构&#xff1a;源码安装, 数据库用mysql,网站用nginx 坑一.nginx报错 122016/07/19 09:26:11 [crit] 3881#0: *10 connect() to unix:/home/git/gitlab/tmp/sockets/gitlab-workhorse.socket failed (13: Permission denied) while connecting to upstream, client: 192.168.…

1.6 INSERT语句

1.6 INSERT语句正在更新内容&#xff0c;请稍后

把握机缘_机缘巧合,蒙太奇训练以及我的朋友如何使自己失业

把握机缘by Wiley Jones通过威利琼斯 机缘巧合&#xff0c;蒙太奇训练以及我的朋友如何使自己失业 (Serendipity, training montages, and how my friend automated himself out of a job) “No one person’s Hollywood success story has anything in common with anybody e…