资讯专栏INFORMATION COLUMN

javascript 理解和使用回调函数

caohaoyu / 1639人阅读

摘要:下面我们再看几种回调函数。方法将会调用或执行我们传递给它们的回调函数。这个例子就是一个典型的回调函数的方式。讲作为参数传递给了,在函数内,使用回调值,在中处理这个值。使用含有对象的回调函数。出现这种现象是因为在全局函数中对象指向了对象。

在javascript中,function是内置的类对象,也就是说它是一种类型的对象,可以和其他String、Array、Number、Objec类的对象一样用于内置对象的管理。因为function实际上是一种对象,它可以“存储在变量中,通过参数传递给(另一个)函数(function),在函数内部创建,从函数中返回结果值”。
因为函数名本身是变量,所以函数也可以作为值来使用。也就是说,不仅可以像传递参数一样把一个函数传递给另一个函数,而且可以将一个函数作为另一个函数的结果返回。

</>复制代码

  1. function callSomeFunction(someFunction, somaArgument) {
  2. return someFunction(somaArgument);
  3. }
  4. function add(num) {
  5. return num + 10;
  6. }
  7. var result1 = callSomeFunction(add, 10);
  8. console.log(result1); // 20;
  9. function getGreeting(name) {
  10. return "hello "+ name;
  11. }
  12. var result2 = callSomeFunction(getGreeting, "world");
  13. console.log(result2); // hello world;

这个calSomeFunction()函数是通用的,即无论第一个参数中传递进来的是什么函数,它都返回执行第一个参数后的结果。要访问函数的指针而不执行函数的话,必须去掉函数名后的那对括号。因此上面的列子中传递给callSomeFunction()的是add和getGreeting,而不是执行它们之后的结果。

下面我们再看几种回调函数。
在jQuery中常用的函数:

</>复制代码

  1. $("#btn").click(function() {
  2. alert("Btn Clicked");
  3. })

如上面的例子,我们传递了一个匿名函数给click方法的形参。click方法将会调用(或执行)我们传递给它们的回调函数。这个例子就是一个典型的回调函数的方式。
再看一个javascript的典型例子:

</>复制代码

  1. function callFunction(something) {
  2. for (var item in something) {
  3. console.log(item + ": " + something[item]);
  4. }
  5. }
  6. function getSome(obj, callback) {
  7. callback(obj);
  8. }
  9. getInput({name: "CSDN", lang: "Javascript"}, callFunction);

返回的结果是CSDN:Javascript。
讲callFunction作为参数传递给了getSome,在函数内,使用callback回调值,在calFunction中处理这个值。这样就形成了一个很好的函数处理过程。将各段处理都分开。
使用含有this对象的回调函数。当回调函数是一个含有this对象的方法时,我们必须修改执行回调函数的方法以保护this对象的内容。否则this对象将会指向全局的window对象,或者指向包含函数。

</>复制代码

  1. var obj = {
  2. name: null,
  3. setName: function (firstName, lastName) {
  4. this.name = firstName + "-" + lastName;
  5. }
  6. }
  7. function getName(firstName, lastName, callback) {
  8. callback(firstName, lastName);
  9. }
  10. getName("Tom","Jony",obj.setName);
  11. console.log(obj.name); // null
  12. console.log(window.name); // Tom-Jony

当obj.setName被执行时,this.name 不会设置obj 对象的name,而是设置window对象中的name,因为getName是一个全局函数。出现这种现象是因为在全局函数中this对象指向了window对象。
这个时候我们可以使用Call和Apply函数保护this对象。

</>复制代码

  1. var obj = {
  2. name: null,
  3. setName: function (firstName, lastName) {
  4. this.name = firstName + "-" + lastName;
  5. }
  6. }
  7. function getName(firstName, lastName, callback, callbackObj) {
  8. callback.call(callbackObj, firstName, lastName);
  9. // callback.apply(callbackObj, [firstName, lastName]);
  10. }
  11. getName("Tom", "Jony", obj.setName, obj);
  12. console.log(obj.name); // Tom-Jony

这样就可以通过call函数正确的设置this对象,现在我们可以正确的执行回调函数并它正确地设置obj对象中的name。使用apply也是一样的。
多重回调函数也是可以得。一个典型的例子就是jQuery的ajax函数

</>复制代码

  1. function successCallback() {
  2. // Do stuff before send
  3. }
  4. function successCallback() {
  5. // Do stuff if success message received
  6. }
  7. function completeCallback() {
  8. // Do stuff upon completion
  9. }
  10. function errorCallback() {
  11. // Do stuff if error received
  12. }
  13. $.ajax({
  14. url:"http://favicon.png",
  15. success:successCallback,
  16. complete:completeCallback,
  17. error:errorCallback
  18. });

</>复制代码

  1. 学习前端的同学注意了!!!
    学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入前端学习交流群461593224,我们一起学前端!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112640.html

相关文章

  • javascript 回调函数 整理

    摘要:回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应。若是使用回调函数进行处理,代码就可以继续进行其他任务,而无需空等。参考理解回调函数理解与使用中的回调函数这篇相当不错回调函数 为什么写回调函数 对于javascript中回调函数 一直处于理解,但是应用不好的阶段,总是在别人家的代码中看到很巧妙的回调,那时候会有wow c...

    xiaowugui666 评论0 收藏0
  • 理解使用Javascript中的回调函数

    摘要:在阅读本文之后你能了解怎样使用回调函数。这是中回调函数的典型用法,它在中广泛被使用。这意味着回调函数本质上是一个闭包。使用命名或匿名函数作为回调在前面的例子以及的例子中,我们使用了再参数位置定义的匿名函数作为回调函数。 转自:张小俊128:http://www.html-js.com/articl..._luxiao:http://luxiao1223.blog.51cto.... j...

    Pandaaa 评论0 收藏0
  • 理解异步JavaScript

    摘要:当函数结束,将会被从调用栈移出。事件循环事件循环的责任就是查看调用栈并确定调用栈是否为空。事件循环会再次检查调用栈是否为空,如果为空的话,它会把事件回调压入栈中,然后回调函数则被执行。 写在文章前 这篇文章是翻译自Sukhjinder Arora的Understanding Asynchronous JavaScript。这篇文章描述了异步和同步JavaScript是如何在运行环境中,...

    ixlei 评论0 收藏0
  • 夯实基础-JavaScript异步编程

    摘要:调用栈被清空,消息队列中并无任务,线程停止,事件循环结束。不确定的时间点请求返回,将设定好的回调函数放入消息队列。调用栈执行完毕执行消息队列任务。请求并发回调函数执行顺序无法确定。 异步编程 JavaScript中异步编程问题可以说是基础中的重点,也是比较难理解的地方。首先要弄懂的是什么叫异步? 我们的代码在执行的时候是从上到下按顺序执行,一段代码执行了之后才会执行下一段代码,这种方式...

    shadowbook 评论0 收藏0
  • ES6-7

    摘要:的翻译文档由的维护很多人说,阮老师已经有一本关于的书了入门,觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中,显得越来越重要。为了让编程更美好,我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书(中文版) 超详细介绍promise的gitbook,看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

    mudiyouyou 评论0 收藏0
  • javascript 理解使用回调函数

    摘要:下面我们再看几种回调函数。方法将会调用或执行我们传递给它们的回调函数。这个例子就是一个典型的回调函数的方式。讲作为参数传递给了,在函数内,使用回调值,在中处理这个值。使用含有对象的回调函数。出现这种现象是因为在全局函数中对象指向了对象。 在javascript中,function是内置的类对象,也就是说它是一种类型的对象,可以和其他String、Array、Number、Objec类的...

    youkede 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<