JavaScript中的回调函数（callback）

青山长在 發表於 2019-11-16 16:45:00

<h2>什么是回调函数</h2>
<blockquote>
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 ［引自维基百科 callback］

</blockquote>
回调函数是一段可执行的代码段，它作为一个参数传递给其他的代码，其作用是在需要的时候方便调用这段（回调函数）代码。(有点像C语言中的函数指针？？)
在JavaScript中函数也是对象的一种，同样对象可以作为参数传递给函数，因此函数也可以作为参数传递给另外一个函数，这个作为参数的函数就是回调函数。
回调函数
<div class="cnblogs_code">
<pre>function add(num1, num2, callback){
var sum = num1 + num2;
callback(sum);
}

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

add(1, 2, print); //=>3</pre>
</div>
匿名回调函数
<div class="cnblogs_code">
<pre>function add(num1, num2, callback){
var sum = num1 + num2;
callback(sum);
}

add(1, 2, function(sum){
console.log(sum); //=>3
});</pre>
</div>
jQuery中大量的使用了回调函数
<div class="cnblogs_code">
<pre>$("#btn").click(function() {
alert("button clicked");
});</pre>
</div>
<h2>我们为什么需要回调？</h2>
有一个非常重要的原因 —— JavaScript 是事件驱动的语言。这意味着，JavaScript 不会因为要等待一个响应而停止当前运行，而是在监听其他事件时继续执行。来看一个基本的例子：
<div class="cnblogs_code">
<pre>function first(){
console.log(1);
}

function second(){
console.log(2);
}

first();
second();</pre>
</div>
正如你所料，<code>first</code> 函数首先被执行，随后 <code>second</code> 被执行 —— 控制台输出下面内容：
<div class="cnblogs_code">
<pre>1
2</pre>
</div>
<div>
<div>但如果函数 <code>first</code> 包含某种不能立即执行的代码会如何呢？例如我们必须发送请求然后等待响应的 API 请求？为了模拟这种状况，我们将使用 <code>setTimeout</code>，它是一个在一段时间之后调用函数的 JavaScript 函数。我们将函数延迟 500 毫秒来模拟一个 API 请求，新代码长这样：</div>
<div class="cnblogs_code">
<pre>function first(){
// 模拟代码延迟
setTimeout( function(){
console.log(1);
}, 500 );
}

function second(){
console.log(2);
}

first();
second();</pre>
</div>
现在理解 <code>setTimeout()</code> 是如何工作的并不重要，重要的是你看到了我们已经把 <code>console.log(1);</code> 移动到了 500 毫秒延迟函数内部。那么现在调用函数会发生什么呢？
<div class="cnblogs_code">
<pre>2
1</pre>
</div>
即使我们首先调用了 <code>first()</code> 函数，我们记录的输出结果却在 <code>second()</code> 函数之后。
这不是 JavaScript 没有按照我们想要的顺序执行函数的问题，而是 JavaScript 在继续向下执行 <code>second()</code> 之前没有等待 <code>first()</code> 响应的问题。
所以为什么给你看这个？因为你不能一个接一个地调用函数并希望它们按照正确的顺序执行。回调正是确保一段代码执行完毕之后再执行另一段代码的方式。
<h2>回调函数有哪些特点？</h2>
不会立刻执行
回调函数作为参数传递给一个函数的时候，传递的只是函数的定义并不会立即执行。和普通的函数一样，回调函数在函调用函数数中也要通过<code>()</code>运算符调用才会执行。
是个闭包
回调函数是一个闭包，也就是说它能访问到其外层定义的变量。
执行前类型判断
在执行回调函数前最好确认其是一个函数。
<div class="cnblogs_code">
<pre>function add(num1, num2, callback){
var sum = num1 + num2;
if(typeof callback === 'function'){
 callback(sum);
}
}</pre>
</div>
this的使用 注意在回调函数调用时this的执行上下文并不是回调函数定义时的那个上下文，而是调用它的函数所在的上下文。
<div class="cnblogs_code">
<pre>var 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</pre>
</div>
上述代码调用回调函数的时候是在全局环境下，因此this指向的是<code>window</code>，所以<code>sum</code>的值是赋值给<code>windows</code>的。
关于<code>this</code>执行上下文的问题可以通过<code>apply</code>方法解决。
<div class="cnblogs_code">
<pre>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</pre>
</div>
允许传递多个回调函数
一个函数中可以传递多个回调函数，典型的例子如jQuery
<div class="cnblogs_code">
<pre>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
});</pre>
</div>
回调函数嵌套
一个回调函数中可以嵌入另一个回调函数，对于这种情况出现多层嵌套时，代码会难以阅读和维护，这个时候可以采用命名回调函数的方式调用，或者采用模块化管理函数，也可以用promise模式编程。
从node-mongodb-native，一个适用于Node.js的MongoDB驱动中拿来了一个例子：
<div class="cnblogs_code">
<pre>var p_client = new Db('integration_tests_20', new Server("127.0.0.1", 27017, {}), {'pk':CustomPKFactory});
p_client.open(function(err, p_client) {
 p_client.dropDatabase(function(err, done) {
 p_client.createCollection('test_custom_key', function(err, collection) {
 collection.insert({'a':1}, function(err, docs) {
 collection.find({'_id':new ObjectID("aaaaaaaaaaaa")}, function(err, cursor) {
 cursor.toArray(function(err, items) {
 test.assertEquals(1, items.length);

 // Let's close the db
 p_client.close();
 });
 });
 });
 });
 });
});</pre>
</div>
 
 
参考链接：
1. https://cnodejs.org/topic/564dd2881ba2ef107f854e0b
2. https://juejin.im/post/594b3607128fe100650355c7
3. https://www.jianshu.com/p/84cc8732689c
</div>

</div>
<div id="MySignature" role="contentinfo">
个性签名：时间会解决一切 
来源：https://www.cnblogs.com/lfri/p/11872294.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript中的回调函数（callback）