您的位置：首页 > Web前端 > JavaScript

JavaScript-回调函数

2017-07-19 12:49 162 查看
回调函数的定义

语法
回调函数

匿名回调函数

回调函数的特点
不会立刻执行

是个闭包

执行前类型判断

this的使用

允许传递多个回调函数

回调函数嵌套

回调函数的优点和使用场景
优点

使用场景

实战

回调函数的定义

In computer programming, a callback is a piece of executable code that is passed as an argument to other code, which is expected to call back (execute) the argument at some convenient time

回调函数是一段可执行的代码段，它作为一个参数传递给其他的代码，其作用是在需要的时候方便调用这段（回调函数）代码。

在JavaScript中函数也是对象的一种，同样对象可以作为参数传递给函数，因此函数也可以作为参数传递给另外一个函数，这个作为参数的函数就是回调函数。

语法

回调函数

function add(num1, num2, callback){
var sum = num1 + num2;
callback(sum);
}

function print(num){
console.log(num);
}

add(1, 2, print);       //=>3


举例：

<!DOCTYPE html>
<html>
<body>
<title>回调函数</title>
<script language="javascript" type="text/javascript">

function add(num1 ,num2 ,callback){
var sum = num1 + num2;
callback(sum);
}

function doSummary(sum){
alert(sum);
}

add(3,5,doSummary);
</script>
</body>
</html>




匿名回调函数

function add(num1, num2, callback){
var sum = num1 + num2;
callback(sum);
}

add(1, 2, function(sum){
console.log(sum);       //=>3
});


举例：

<!DOCTYPE html>
<html>
<body>
<title>匿名回调函数</title>
<script language="javascript" type="text/javascript">

function add(num1 ,num2 ,callback){
var sum = num1 + num2;
callback(sum);
}

add(3,5,function(sum){
alert(sum);
});
</script>
</body>
</html>


我们经常使用的jQuery中大量的使用了回调函数

$("#btn").click(function() {
alert("button clicked");
});




回调函数的特点

不会立刻执行

回调函数作为参数传递给一个函数的时候，传递的只是函数的定义并不会立即执行。和普通的函数一样，回调函数在函调用函数中也要通过()运算符调用才会执行。

是个闭包

回调函数是一个闭包，也就是说它能访问到其外层定义的变量。

执行前类型判断

在执行回调函数前最好确认其是一个函数。

function add(num1, num2, callback){
var sum = num1 + num2;
if(typeof callback === 'function'){
callback(sum);
}
}


this的使用

注意在回调函数调用时this的执行上下文并不是回调函数定义时的那个上下文，而是调用它的函数所在的上下文.

ar obj = {
sum: 0,
add: function(num1, num2){
this.sum = num1 + num2;
}
};

function add(num1, num2, callback){
callback(num1, num2);
};

add(1,2, obj.add);
console.log(obj.sum);           //=>0
console.log(window.sum);        //=>3


上述代码调用回调函数的时候是在全局环境下，因此this指向的是window，所以sum的值是赋值给windows的。

关于this执行上下文的问题可以通过apply方法解决。

var obj = {
sum: 0,
add: function(num1, num2){
this.sum = num1 + num2;
}
};

function add(num1, num2, callbackObj, callback){
callback.apply(callbackObj, [ num1, num2 ]);
};

add(1,2, obj, obj.add);
console.log(obj.sum);           //=>3
console.log(window.sum);        //=>undefined


允许传递多个回调函数

一个函数中可以传递多个回调函数，典型的例子如jQuery

function successCallback() {
// Do stuff before send​
}
​function successCallback() {
// Do stuff if success message received​
}​
​function completeCallback() {
// Do stuff upon completion​
}
​function errorCallback() {
// Do stuff if error received​
}
$.ajax({
url: "http://fiddle.jshell.net/favicon.png",
success: successCallback,
complete: completeCallback,
error: errorCallback
});


回调函数嵌套

一个回调函数中可以嵌入另一个回调函数，对于这种情况出现多层嵌套时，代码会难以阅读和维护，这个时候可以采用命名回调函数的方式调用，或者采用模块化管理函数，也可以用promise模式编程。

回调函数的优点和使用场景

优点

DRY，避免重复代码。

可以将通用的逻辑抽象。

加强代码可维护性。

加强代码可读性。

分离专职的函数。

使用场景

异步编程。

事件监听、处理。

setTimeout、setInterval方法。

通用功能，简化逻辑。

实战

CommonAction.qryTableDate是异步调用的，所以在外层无法获取函数里面的值，不能直接返回，采用回调的方式 ：给documentTypeMapping这个函数设置一个回调函数，在CommonAction的回调里面调用传过来的这个回调函数。

//documentType switch  id to name
// 两个入参 docmentTypeId 和 回调函数
documentTypeMapping: function (documentType,returnDocumentTypeNameCallback){

var documentMappingName ;
// load from db
var certTypeParam = {
tableName: 'CERT_TYPE',
columnArray: ["CERT_TYPE_ID", "CERT_TYPE_NAME", "CERT_TYPE_CODE", "CUST_TYPE"]};

// 异步的方法，无法在外层直接获取到documentMappingName,通过回调获取
CommonAction.qryTableDate(certTypeParam, 'POST', function (result) {
fish.forEach(result, function (val) {
if (val.dataValueArray[3] == '' || val.dataValueArray[3] == 'A') {
if(val.dataValueArray[0] == documentType){
documentMappingName = val.dataValueArray[1];
console.log("Name:" + documentMappingName);

// 回调函数                         returnDocumentTypeNameCallback(documentMappingName);
}
}
});
})
}




调用

// 第二个参数为回调函数,获取 documentMappingName，设置在组件上
that.documentTypeMapping(result.documentType,function(documentMappingName) {
that.$('input[name="documentType"]').combobox('text', documentMappingName);
})


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航