zoukankan      html  css  js  c++  java
  • JavaScript中的回调函数

      在学习JavaScript的过程中遇到了很多,使用到回调函数的例子,出现了许多疑问,就由一个栗子开始吧:

      在JavaScript中接触的第一个回调函数是在setInterval()和setTimeout()中出现的:

    1   var num = 10;
    2 
    3   var interValId = setInterval(function (){
    4       console.log(num);
    5       num--;
    6       if(num==0){
    7         clearInterval(interValId);
    8      }
    9  },1000);

      代码中实现了使用了setInterval()在控制台打印数值,然后当数值变为0的时候停止打印。

      在使用setInterval()的时候使用了一个匿名函数作为回调函数,当时看到这,就懵掉了,

    此匿名函数没有实参列表,也就是说这是一个函数声明,不是调用,而且这个匿名函数写在setInterval()的形参列表位置,说明它是setInterval()的形参,但是这个函数是在什么时候调用的呢,如果这个函数也需要传参呢,在调用这个匿名函数的时候,又是怎样实现参数传递的呢。

      

      再一次遇见它是在学习DOM2中使用addEventListener()进行事件绑定的时候:

      

    1 btn2.addEventListener("click",function (){
    2     btn1.removeEventListener("click",func1)
    3 },false)

      在取消事件绑定的时候,有个要求,就是removerEventListener()中的回调函数不能是匿名函数。但是问题还是没有解决,接下来又遇到了有形参列表的回调函数:

      数组中的排序函数:sort();

    1         arr3.sort(function(a,b){
    2             //return a-b; // b在前,a在后(升序排列)
    3             return b-a;  // a在前,b在后(降序排列)
    4         });

      这次的回调函数竟然有了形参,但是问题还是那个问题,这里的形参a,b什么时候变为实参的?他们被赋予实参的时候,赋的值又是什么呢?

      所有的可能性都被排除了,只有一种就是,sort()这个函数给回调函数的参数进行赋值,并把回调函数进行了调用,这样就要求,回调函数的函数声明必须按照调用它的函数的规定进行编写,就是调用它的函数需要它完成什么样的功能,回调函数的函数体应该是怎样的,而且它的参数也不能乱写,必须按照规定写形参,他在调用的时候,传了几个实参,就要写几个形参。

      在使用系统已经写好的函数中编写回调函数的时候,程序员们需要完成的部分,只是回调函数的声明部分,而且参数必须按照规定写。

       

      函数也是对象

      想弄明白回调函数,首先的清楚地明白函数的规则。在javascript中,函数是比较奇怪的,但它确确实实是对象。确切地说,函数是用function()构造函数创建的function对象。function对象包含一个字符串,字符串包含函数的javascript代码。代码怎么可能是字符串?对于javascript来说,这很平常。数据和代码之间的区别是很模糊的。

      回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数。回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应。

      因此,回调本质上是一种设计模式,并且jQuery(包括其他框架)的设计原则遵循了这个模式。

      在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式),就叫做匿名回调函数。

      因此callback 不一定用于异步,一般同步(阻塞)的场景下也经常用到回调,比如要求执行某些操作后执行回调函数。

  • 相关阅读:
    virtualbox+vagrant学习-2(command cli)-9-vagrant Plugin命令
    virtualbox+vagrant学习-2(command cli)-15-vagrant resume命令
    virtualbox+vagrant学习-2(command cli)-14-vagrant reload命令
    virtualbox+vagrant学习-2(command cli)-12-vagrant Provision命令
    virtualbox+vagrant学习-2(command cli)-11-vagrant PowerShell命令
    java设计模式之单例
    java设计模式之策略
    java设计模式之组合
    设计模式之适配器
    java设计模式之模板方法
  • 原文地址:https://www.cnblogs.com/slk-fight/p/6754533.html
Copyright © 2011-2022 走看看