JS中的 回调函数(callback)

简介: JS中的 回调函数(callback)

1.什么是回调函数(callback)呢?

把函数当作一个参数传到另外一个函数中,当需要用这个函数是,再回调运行()这个函数.

回调函数是一段可执行的代码段,它作为一个参数传递给其他的代码,其作用是在需要的时候方便调用这段(回调函数)代码。(作为参数传递到另外一个函数中,这个作为参数的函数就是回调函数)

理解:函数可以作为一个参数传递到另外一个函数中。

<script>
        function add(num1, num2, callback) {
            var sum = num1 + num2;
            callback(sum);
        }
        function print(num) {
            console.log(num);
        }
        add(1, 2, print); //3
    </script>

分析:add(1, 2, print);中,函数print作为一个参数传入到add函数中,但并不是马上起作用,而是var sum = num1 + num2;运行完之后需要打印输出sum的时候才会调用这个函数。(这个作为参数传递到另外一个函数中,这个作为参数的函数就是回调函数.

匿名回调函数:

 

<script>
        function add(num1, num2, callback) {
            var sum = num1 + num2;
            callback(sum);
        }
        add(1, 2, function (sum) {
            console.log(sum); //=>3
        });
    </script>

2.回调函数有哪些特点?

1.不会立即执行

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

2.回调函数是一个闭包

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

3.执行前类型判断

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

 

<script>
        function add(num1, num2, callback) {
            var sum = num1 + num2;
            //判定callback接收到的数据是一个函数
            if (typeof callback === 'function') {
                //callback是一个函数,才能当回调函数使用
                callback(sum);
            }
        }
    </script>

3.回调函数中this的指向问题

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

举例:

<script>
        function createData(callback){
            callback();
        }
        var obj ={
            data:100,
            tool:function(){
                createData(function(n){
                    console.log(this,1111);  //window 1111
                })   
            }
        }
        obj.tool();
    </script>

分析:this指向是 离它最近的或者嵌套级别的 function/方法的调用者,这里离它最近的function是

function(n),会回到上面的callback()中,这时候调用者就不是obj而是window。

解决回调函数this指向的方法1:箭头函数

回调函数(若回调函数是普通函数时)当参数传入另外的函数时,若不知道这个函数内部怎么调用回调函数,就会出现回调函数中的this指向不明确的问题(就比如上面例子中this指向的不是obj而是window)。所以 把箭头函数当回调函数,然后作为参数传入另外的函数中就不会出现this指向不明的问题。

 

<script>
        function createData(callback){
            callback();
        }
        var obj ={
            data:100,
            tool:function(){
                createData((n)=>{
                    this.data = n;
                })   
            }
        }
        obj.tool();
        console.log(obj.data); 
    </script>

分析:回调函数用箭头函数写之后,this指向很明确,就是 离它最近的或者嵌套级别的 function/方法的调用者,所以这里是 obj 。

解决回调函数this指向的方法2:var self = this;

<script>
        function createData(callback){
            callback(999);
        }
        var obj ={
            data:100,
            tool:function(){
                var self = this;   //这里的this指向obj,然后当一个变量取用
                createData(function(n){
                    self.data = n;
                })   
            }
        }
        obj.tool();
        console.log(obj.data);
    </script>

4.为什么要用到回调函数?

有一个非常重要的原因 —— JavaScript 是事件驱动的语言。这意味着,JavaScript 不会因为要等待一个响应而停止当前运行,而是在监听其他事件时继续执行。来看一个基本的例子:

<script>
        function first() {
            console.log(1);
        }
        function second() {
            console.log(2);
        }
        first();
        second();
    </script>

分析:正如你所料,first 函数首先被执行,随后 second 被执行 —— 控制台输出:1  2

但如果函数 first 包含某种不能立即执行的代码会如何呢?例如我们必须发送请求然后等待响应的 API 请求?为了模拟这种状况,我们将使用 setTimeout,它是一个在一段时间之后调用函数的 JavaScript 函数。我们将函数延迟 500 毫秒来模拟一个 API 请求,新代码长这样:

 

<script>
        function first() {
            // 模拟代码延迟
            setTimeout(function () {  //所以function(){console.log(1)}是回调函数
                console.log(1);
            }, 500);
        }
        function second() {
            console.log(2);
        }
        first();
        second();
    </script>

分析:这里 function(){console.log(1)}函数当作一个参数传入setTimeout函数中,因为setTimeout是官方提供得一个函数,里面有很多复杂的业务程序,所以函数 function(){console.log(1)}传入后,不一定马上运行,要setTimeout里面要运行到function(){console.log(1)}时才会运行该函数参数,那是不是整个程序就一直等setTimeout运行?不是的!!!

整个程序运行结果为: 2  1 ,并不是原先的1 2 .即使我们首先调用了 first() 函数,我们记录的输出结果却在 second() 函数之后。

这不是 JavaScript 没有按照我们想要的顺序执行函数的问题,而是 JavaScript 在继续向下执行 second() 之前没有等待 first() 响应的问题。回调正是确保一段代码执行完毕之后再执行另一段代码的方式。

5.回调函数和异步操作的关系是什么?回调函数是异步么?

定义:回调函数被认为是一种高级函数,一种被作为参数传递给另一个函数的高级函数。回调函数的本质是一种模式(一种解决常见问题的模式),因此回调函数也被称为回调模式。

简而言之:一个函数在另一个函数中被调用。而且可以当参数传给其他函数。

所以: 回调函数和异步操作的关系是没有关系!!!

那为什么很多的异步操作都有回填函数啊??

问:你所知道的异步操作,是回调的作用么???  并不是。

回调:更多的可以理解为一种业务逻辑把           异步编程:JS代码的执行顺序      

简单理解:callback 顾名思义  打电话回来的意思

eg1:你点外卖,刚好你要吃的食物没有了,于是你在店老板那里留下了你的电话,过了几天店里有了,店员就打了你的电话,然后你接到电话后就跑到店里买了。在这个例子里,你的电话号码就叫回调函数,你把电话留给店员就叫登记回调函数,店里后来有货了叫做触发了回调关联的事件,店员给你打电话叫做调用回调函数,你到店里去取货叫做响应回调事件。

eg2:再比如,你发送一个axios 请求,请求成功之后,触发成功的回调函数,请求失败触发失败的回调函数。这里面的回调函数更像是一个工具,后台通过这个工具告诉你,你成功了抑或是失败了。这里面的所有异步操作都和回调没关系,真正的异步是then方法。

 

相关文章
|
7月前
|
JavaScript 前端开发 Go
动态加载与异步加载 JavaScript 详解:加载远程js,加载成功后执行回调函数
动态加载与异步加载 JavaScript 详解:加载远程js,加载成功后执行回调函数
1357 2
|
7月前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
55 3
|
2月前
|
JavaScript API
Node.js 回调函数
10月更文挑战第3天
18 0
|
4月前
|
SQL JavaScript 前端开发
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
|
6月前
|
存储 前端开发 JavaScript
回调函数是JavaScript中处理异步编程的常见模式,常用于事件驱动和I/O操作。
【6月更文挑战第27天】回调函数是JavaScript中处理异步编程的常见模式,常用于事件驱动和I/O操作。它作为参数传递给其他函数,在特定条件满足或任务完成后被调用。例如,`asyncOperation`函数接受回调函数`handleResult`,模拟异步操作后,调用`handleResult`传递结果。这样,当异步任务完成时,`handleResult`负责处理结果。
40 1
|
5月前
|
JavaScript 前端开发 API
Node中的AsyncLocalStorage 使用问题之Node.js将 JavaScript 层的 nativeHooks 注册到 C++ 层的问题如何解决
Node中的AsyncLocalStorage 使用问题之Node.js将 JavaScript 层的 nativeHooks 注册到 C++ 层的问题如何解决
|
6月前
|
前端开发 JavaScript
JavaScript异步处理避免了单线程阻塞,如回调函数、Promise和async/await。
【6月更文挑战第22天】JavaScript异步处理避免了单线程阻塞,如回调函数、Promise和async/await。回调是基础,用于在操作完成后执行函数;Promise管理异步状态,支持链式调用;async/await提供同步代码外观,简化错误处理。每种技术在处理耗时任务时都起着关键作用。
55 3
|
6月前
|
前端开发 JavaScript 开发者
JavaScript基础-异步编程:回调函数
【6月更文挑战第12天】本文介绍了JavaScript中的异步编程基础,重点讨论回调函数。回调函数是处理延迟操作的关键,常见于事件监听、定时器、Ajax请求和文件操作。然而,它们可能导致回调地狱、错误处理不一致和控制流混乱等问题。为了解决这些问题,文章推荐使用Promise链、async/await来扁平化异步逻辑,并提供了相关代码示例,强调了现代JavaScript特性的优势,以提升代码可读性和可维护性。
104 7
|
6月前
|
JavaScript API
Node.js 回调函数
Node.js 回调函数
30 1
|
6月前
|
前端开发 JavaScript 开发者
JavaScript异步编程艺术:深入浅出回调函数与异步挑战【含代码示例】
本文深入解析JavaScript异步编程,重点探讨回调函数和异步挑战。在单线程的JavaScript中,异步编程至关重要,回调函数是其基础。然而,回调地狱问题催生了Promise和async/await的出现。文章提供代码示例展示Promise和async/await的使用,并分享异步编程最佳实践,包括错误处理、资源管理和性能优化。遇到问题时,建议通过明确异步流程、逐步调试和异常捕获来解决。最后,文章强调异步编程的未来发展,鼓励开发者掌握最新工具并探讨更高效的异步解决方案。
77 2