首页 > 编程语言 >JavaScript回调函数

JavaScript回调函数

时间:2023-02-19 23:45:34浏览次数:34  
标签:function 函数 num2 sum JavaScript 回调 num1

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

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

回调函数

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

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

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

匿名回调函数

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

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

jQuery中大量的使用了回调函数

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

回调函数有哪些特点

不会立刻执行

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

是个闭包

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

执行前类型判断

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

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

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

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

上述代码调用回调函数的时候是在全局环境下,因此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模式编程。

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

优点

  1. DRY,避免重复代码。
  2. 可以将通用的逻辑抽象。
  3. 加强代码可维护性。
  4. 加强代码可读性。
  5. 分离专职的函数。

使用场景

  1. 异步编程。
  2. 事件监听、处理。
  3. setTimeout、setInterval方法。
  4. 通用功能,简化逻辑。
  5. function getDataFromAPI(callback) {
    // 执行一些异步操作以获取数据
    const data = fetchDataFromServer();
    // 在获取数据完成后调用回调函数,并将结果传递给它
    callback(data);
    }

    // 处理数据的回调函数
    function handleData(data) {
    // 对数据进行处理
    console.log(data);
    }

    // 获取数据,并在获取完成后调用 handleData 函数
    getDataFromAPI(handleData);

标签:function,函数,num2,sum,JavaScript,回调,num1
From: https://www.cnblogs.com/andy-chi/p/17135958.html

相关文章

  • exec函数簇
    exec函数是为了在子进程中执行其他的可执行程序(代码替换)子进程调用exec函数并不创建新的进程,所以前后进程的ID不会改变,exec函数只是用另一个新程序代替当前进程的正文、数......
  • DVWA靶场实战(十四)——JavaScript
    DVWA靶场实战(十四)五、JavaScript:1.漏洞原理:这里的JavaScript其实是JavaScriptAttack也就是JS攻击。JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本......
  • 为笛卡尔积运算而生的Reduce(Excel函数集团)
    我要是没记错,Reduce这词是减少的意思,可是当他作为Excel函数出现时,我真没看出哪里Reduce了……好吧,其实可以换种理解,缩减了嵌套(帮助里写的是“将数组缩减为累计值)。来来来......
  • JavaScript知识汇总
    1JavaScript功能直接写入HTML输出流(在HTML输出中使用document.write,如在文档加载后使用该方法会覆盖整个文档)对事件进行响应(如鼠标事件、键盘事件等)改变HTML内......
  • 浅谈strtok函数的原理与使用
    对于strok函数的理解,自己也是很迷茫,尤其看到有的范例将第一参数设为NULL也很是不解,也是找了许多博文,并看了官方的英文文档才浅显地理解了。这位前辈的博文对我启发很大。链......
  • 【JavaScript】17_debug,立即执行函数 与 严格模式
    14、debug<script>//debugger//在代码中打了一个断点console.log(a)//2vara=1console.log(a)//1fu......
  • 【JavaScript】18_面向对象,类与属性
    1、面向对象面向对象编程(OOP)程序是干嘛的?程序就是对现实世界的抽象(照片就是对人的抽象)对象是干嘛的?一个事物抽象到程序中后就变成了对象在程序的世界中,一切皆对象面向对象......
  • 第六章 函数
    第六章函数函数基础函数定义:包括返回类型、函数名字和0个或者多个形参(parameter)组成的列表和函数体。调用运算符:调用运算符的形式是一对圆括号(),作用于一个表达式,该......
  • wait函数
    wait()函数:以阻塞的方式等待子进程退出,防止僵尸进程的产生头文件:      #include<sys/types.h>      #include<sys/wait.h>      pid_twaitpid(p......
  • 创建自己的函数库
    前言  回顾一下,前面点亮led灯我们都进行了哪些操作。  首先需要看电路图,然后找到led灯的控制引脚,然后了解了控制引脚的方法是通过操作相应的物理地址,接着知道了可以映......