[S3-E425]javascript 理解和使用回调函数

来源：互联网发布：如何认识网络交友编辑：程序博客网时间：2024/05/24 07:27

本文：【第3章第425回】文章底部可跳转至目录查看更多文章

在javascript中，function是内置的类对象，也就是说它是一种类型的对象，可以和其他String、Array、Number、Objec类的对象一样用于内置对象的管理。因为function实际上是一种对象，它可以“存储在变量中，通过参数传递给（另一个）函数（function），在函数内部创建，从函数中返回结果值”。

因为函数名本身是变量，所以函数也可以作为值来使用。也就是说，不仅可以像传递参数一样把一个函数传递给另一个函数，而且可以将一个函数作为另一个函数的结果返回。

function callSomeFunction(someFunction, somaArgument) {
return someFunction(somaArgument);
}

function add(num) {
return num + 10;
}
var result1 = callSomeFunction(add, 10);
console.log(result1); // 20;

function getGreeting(name) {
return "hello "+ name;
}

var result2 = callSomeFunction(getGreeting, "world");
console.log(result2); // hello world;

这个calSomeFunction()函数是通用的，即无论第一个参数中传递进来的是什么函数，它都返回执行第一个参数后的结果。要访问函数的指针而不执行函数的话，必须去掉函数名后的那对括号。因此上面的列子中传递给callSomeFunction（）的是add和getGreeting，而不是执行它们之后的结果。

下面我们再看几种回调函数。

在jQuery中常用的函数：

$("#btn").click(function() {
alert("Btn Clicked");
})

如上面的例子，我们传递了一个匿名函数给click方法的形参。click方法将会调用（或执行）我们传递给它们的回调函数。这个例子就是一个典型的回调函数的方式。

再看一个javascript的典型例子：

function callFunction(something) {
for (var item in something) {
console.log(item + ": " + something[item]);
}

}

function getSome(obj, callback) {
callback(obj);
}

getInput({name: "CSDN", lang: "Javascript"}, callFunction);
返回的结果是CSDN：Javascript。

讲callFunction作为参数传递给了getSome，在函数内，使用callback回调值，在calFunction中处理这个值。这样就形成了一个很好的函数处理过程。将各段处理都分开。

使用含有this对象的回调函数。当回调函数是一个含有this对象的方法时，我们必须修改执行回调函数的方法以保护this对象的内容。否则this对象将会指向全局的window对象，或者指向包含函数。

var obj = {
name: null,
setName: function (firstName, lastName) {
this.name = firstName + "-" + lastName;
}
}

function getName(firstName, lastName, callback) {
callback(firstName, lastName);
}

getName('Tom','Jony',obj.setName);
console.log(obj.name); // null
console.log(window.name); // Tom-Jony

当obj.setName被执行时，this.name 不会设置obj 对象的name，而是设置window对象中的name，因为getName是一个全局函数。出现这种现象是因为在全局函数中this对象指向了window对象。

这个时候我们可以使用Call和Apply函数保护this对象。

var obj = {
name: null,
setName: function (firstName, lastName) {
this.name = firstName + "-" + lastName;
}
}

function getName(firstName, lastName, callback, callbackObj) {
callback.call(callbackObj, firstName, lastName);
// callback.apply(callbackObj, [firstName, lastName]);
}

getName('Tom', 'Jony', obj.setName, obj);
console.log(obj.name); // Tom-Jony

这样就可以通过call函数正确的设置this对象，现在我们可以正确的执行回调函数并它正确地设置obj对象中的name。使用apply也是一样的。

多重回调函数也是可以得。一个典型的例子就是jQuery的ajax函数。

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://favicon.png",
success:successCallback,
complete:completeCallback,
error:errorCallback

});

转自：https://segmentfault.com/a/1190000011274624
作者：树辉

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

更多文章点击目录 查看（或在导航菜单中查看）

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

==========阅读原文==========

阅读全文

0 0