javascript 理解和使用回调函数
在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
});
学习前端的同学注意了!!!
学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入前端学习交流群461593224,我们一起学前端!
javascript 理解和使用回调函数的更多相关文章
- 转·带你用实例理解C语言回调函数
原文出处:https://segmentfault.com/a/1190000008293902?utm_source=tag-newest 前言: 如不懂函数指针,请先查阅关于函数指针内容的资料(h ...
- 如何写JavaScript中的callback回调函数
如何写回调函数? 如果自己在写一个方法或函数,你有可能会遇到需要一个回调函数.下面就是一个简单的常见回调函数例子: function mySandwich(param1, param2, callba ...
- 理解 JavaScript 回调函数并使用
JavaScript中,函数是一等(first-class)对象:也就是说,函数是 Object 类型并且可以像其他一等对象(String,Array,Number等)一样使用.它们可以"保 ...
- 理解和使用 JavaScript 中的回调函数
理解和使用 JavaScript 中的回调函数 标签: 回调函数指针js 2014-11-25 01:20 11506人阅读 评论(4) 收藏 举报 分类: JavaScript(4) 目录( ...
- [转]理解与使用Javascript中的回调函数
在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回. 因 ...
- 【JavaScript】理解与使用Javascript中的回调函数
在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回. 因 ...
- 理解javascript中的回调函数(callback)【转】
在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实 ...
- 理解与使用Javascript中的回调函数
在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回. 因 ...
- Javascript 回调函数理解---二娃子买肾机6
在Javascript中什么是回调函数,我认为简单来说就是把一个函数B作为参数传递给另一个函数A,在A函数中的一定时机调用函数B. 这里可以看出回调函数形成了一个闭包,它可以访问函数A中的活动对象. ...
随机推荐
- pyinstaller打包exe文件,运行时一闪而过
pyinstaller打包exe文件出现命令窗口一闪而过 原因:exe运行过程中出错了,解决这些错误就可以了 解决方法: 通过 cd path >> xxx.exe 在命令行中运行exe文 ...
- 爬虫之爬取B站视频及破解知乎登录方法(进阶)
今日内容概要 爬虫思路之破解知乎登录 爬虫思路之破解红薯网小说 爬取b站视频 Xpath选择器 MongoDB数据库 爬取b站视频 """ 爬取大的视频网站资源的时候,一 ...
- 【spring】事务底层的实现流程
事务简单介绍 本文源码基于spring-framework-5.3.10. 事务是基于AOP的机制进行实现的! Spring事务基本执行原理 一个Bean在执行Bean的创建生命周期时,会经过Infr ...
- laravel 7 H_ui ajax添加入库及前端jQuery Validate验证+后端验证
1:引入 H-ui 用户添加页面,并修改script对应的src,添加input框的name属性值 <!DOCTYPE HTML> <html> <head> &l ...
- 全量、增量数据在HBase迁移的多种技巧实践
作者经历了多次基于HBase实现全量与增量数据的迁移测试,总结了在使用HBase进行数据迁移的多种实践,本文针对全量与增量数据迁移的场景不同,提供了1+2的技巧分享. HBase全量与增量数据迁移的方 ...
- vue3-异步组件的使用
我们通常会在实际开发中,将项目进行分包处理,以此加快项目的速度 即使用异步组件 //异步组件,分包处理 import {defineAsyncComponent} from "vue&quo ...
- 前端经典面试题vue面试题
1.什么是MVVM? MVVM是一种设计思想. Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑: View 代表UI 组件,它负责将数据模型转化成UI 展现出来,View ...
- 一文让你明白CPU上下文切换
我们都知道,Linux 是一个多任务操作系统,它支持远大于 CPU 数量的任务同时运行.当然,这些任务实际上并不是真的在同时运行,而是因为系统在很短的时间内,将 CPU 轮流分配给它们,造成多任务同时 ...
- 6月21日 Django ORM那些相关操作(表关联、聚合查询和分组查询)
一.ForeignKey操作 正向查找 对象查找(跨表) 语法: 对象.关联字段.字段 示例: book_obj = models.Book.objects.first() # 第一本书对象 pr ...
- 实现一个cache
实现一个LRU cache,定义get函数和set函数,cache是固定长度的,当cache已经满,那么就删除一直没有被更新的记录,然后将新的记录放进去. LRU: 全称是Least Recently ...