在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 理解和使用回调函数的更多相关文章

  1. 转·带你用实例理解C语言回调函数

    原文出处:https://segmentfault.com/a/1190000008293902?utm_source=tag-newest 前言: 如不懂函数指针,请先查阅关于函数指针内容的资料(h ...

  2. 如何写JavaScript中的callback回调函数

    如何写回调函数? 如果自己在写一个方法或函数,你有可能会遇到需要一个回调函数.下面就是一个简单的常见回调函数例子: function mySandwich(param1, param2, callba ...

  3. 理解 JavaScript 回调函数并使用

    JavaScript中,函数是一等(first-class)对象:也就是说,函数是 Object 类型并且可以像其他一等对象(String,Array,Number等)一样使用.它们可以"保 ...

  4. 理解和使用 JavaScript 中的回调函数

    理解和使用 JavaScript 中的回调函数 标签: 回调函数指针js 2014-11-25 01:20 11506人阅读 评论(4) 收藏 举报  分类: JavaScript(4)    目录( ...

  5. [转]理解与使用Javascript中的回调函数

    在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回. 因 ...

  6. 【JavaScript】理解与使用Javascript中的回调函数

    在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回. 因 ...

  7. 理解javascript中的回调函数(callback)【转】

    在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实 ...

  8. 理解与使用Javascript中的回调函数

    在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回. 因 ...

  9. Javascript 回调函数理解---二娃子买肾机6

    在Javascript中什么是回调函数,我认为简单来说就是把一个函数B作为参数传递给另一个函数A,在A函数中的一定时机调用函数B. 这里可以看出回调函数形成了一个闭包,它可以访问函数A中的活动对象. ...

随机推荐

  1. kubernetes配置使用ceph动态存储

    在k8s集群中配置ceph 3.1.使用cephfs (1) 在ceph集群创建cephfs #以下操作在ceph集群的admin或者mon节点上执行 #创建pool来存储数据和元数据 ceph os ...

  2. QT:Qt Creator中创建的各种项目说明

    Qt Widgets Application:支持桌面平台GUI的应用程序.GUI的设计完全基于C++,采用Qt提供的一套C++类库: Qt Console Application:控制台应用程序,无 ...

  3. linux作业--第四周

    1.自建yum仓库,分别为网络源和本地源 所有Yum仓库的配置文件均需以 .repo 结尾并存放在/etc/yum.repos.d/目录中的 [base] : yum仓库唯一标识符,避免与其它仓库冲突 ...

  4. php压缩zip文件类

    使用文件压缩类, 注意传的路径是相对路径.如果传绝对路径就把addFile里面的第二个参数去掉/ $zip = new ZipFolder(); $zipFile = './autoloadClass ...

  5. mxnet源码阅读笔记之include

    写在前面 mxnet代码的规范性比Caffe2要好,看起来核心代码量也小很多,但由于对dmlc其它库的依赖太强,代码的独立性并不好.依赖的第三方库包括: cub dlpack dmlc-core go ...

  6. Java学习笔记:04面向对象-内部类_访问修饰符_final

    04面向对象-内部类/访问修饰符/final 1.static的介绍 static:关键字,静态的 static的作用是用来修饰类中的成员 2.访问一个类中的某一个成员变量 方法一: _1.创建对象 ...

  7. ActiveMQ-模块代码-02

    模块模式 p2p模式 生产者 ConfigBeanQueue package com.producerp2p.producerp2p; import org.apache.activemq.comma ...

  8. 域环境SID相同如何解决

    查看SID 进入命令行(WIN+R) 输入     whoami /user 什么是SID? sid相当于系统的身份证号,在域内有相同sid的计算机就相当于两个人共同有一个身份证号码,后果可想而知 建 ...

  9. web服务器-Nginx URL重写

    web服务器-Nginx URL重写 一. URL重写介绍 和apache等web服务软件一样,rewrite的主要功能是实现URL地址的重定向.Nginx的rewrite功能需要PCRE软件的支持, ...

  10. python psutila模块

    #!/usr/bin/env python #coding:utf-8 # qianxiao996精心制作 #博客地址:https://blog.csdn.net/qq_36374896 import ...