博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript 理解和使用回调函数
阅读量:7136 次
发布时间:2019-06-28

本文共 2949 字,大约阅读时间需要 9 分钟。

在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,我们一起学前端!

转载地址:http://rgvrl.baihongyu.com/

你可能感兴趣的文章
2015 UESTC Training for Data Structures
查看>>
喜大普奔!开启我的博客之旅!
查看>>
Ubuntu相关的笔记
查看>>
session技术进行登录验证问题解析
查看>>
Linux 求某一列平均值
查看>>
安卓虚拟机配置问题
查看>>
【动态规划】Gym - 101102A - Coins
查看>>
【kd-tree】hdu5992 Finding Hotels
查看>>
【函数式权值分块】【分块】bzoj1901 Zju2112 Dynamic Rankings
查看>>
流程控制
查看>>
P4363 [九省联考2018]一双木棋chess(对抗搜索+记忆化搜索)
查看>>
execution plan in sqlserver
查看>>
【WCF之旅】第一回:概述
查看>>
设计模式(四)外观模式
查看>>
RadioGroup实现类似ios的分段选择(UISegmentedControl)控件
查看>>
51Nod 1079 中国剩余定理 Label:数论
查看>>
在sql结果中显示行号
查看>>
代码层次
查看>>
python基础一 day11 装饰器复习
查看>>
使用vs code编写Markdown文档以及markdown语法详解
查看>>