对js中回调函数的一些看法

最近在忙公司android的项目,所以也就很少抽时间来写些东西了。刚闲下来,我就翻了翻之前看的东西。做了android之后更加感觉到手机端开发的重要性,现在做native App  和Web App是主流,也就是说现在各种基于浏览器的web app框架也会越来越火爆了,做js的也越来越有前途。我也决定从后端开发渐渐向前端开发和手机端开发靠拢,废话不说了,我们来切入正题“js的回调函数”相关的东西。

说起回调函数,好多人虽然知道意思,但是还是一知半解。至于怎么用,还是有点糊涂。网上的一些相关的也没有详细的说一下是怎么回事,说的比较片面。下面我只是说说个人的一点理解,大牛勿喷。我们来看一下一个粗略的一个定义“函数a有一个参数,这个参数是个函数b,当函数a执行完以后执行函数b。那么这个过程就叫回调。”,这句话的意思是函数b以一个参数的形式传入函数a并执行,顺序是先执行a ,然后执行参数b,b就是所谓的回调函数。我们先来看下面的例子。

function a(callback){
   alert('a');
   callback.call(this);//或者是 callback(), callback.apply(this),看个人喜好

  }
  function b(){
    alert('b');
  }
  //调用
  a(b);

这样的结果是先弹出 'a',再弹出‘b'。这样估计会有人问了“写这样的代码有什么意思呢?好像没太大的作用呢!”

是的,其实我也觉得这样写没啥意思,“如果调用一个函数就直接在函数里面调用它不就行了”。我这只是给大家写个小例子,做初步的理解。真正写代码的过程中很少用这样无参数的,因为在大部分场景中,我们要传递参数。来个带参数的:

function c(callback){
   alert('c');
   callback.call(this,'d');

  }

//调用
c(function(e){

  alert(e);
});

这个调用看起来是不是似曾相识,这里e参数被赋值为'd',我们只是简单的赋值为字符窜,其实也可以赋值为对象。Jquery里面是不是也有个e参数,下面我们就来讲讲
Jquery里面的e参数是如何被回调赋值的。

Jquery框架我想大家不陌生了,出来了好久,开发的时候都在用,比较简单,api网上搜起来很方便,上手快。在Jquery框架下,我们有时候要获取事件中的一些参数,比如我要获取当前点击的坐标,点击的元素对象。这个需求在Jquery里面好办  :

$("#id").bind('click',function(e){

//e.pageX ,e.pageY ,e.target.....各种数据

 });

用起来倒是挺方便,其实这个e参数的赋值也是通过回调函数来实现的,这个参数是用回调参数给它赋予了一个对象值,仔细研究过JJquery源码的朋友应该发现了这一点。

还有Ajax里面   $.get('',{},function(data){})    data这个参数也是同样的原理。

我们来看看Jquery事件对象里面是怎么应用回调函数的。

为了方便,我简单的写了一下$相关的一些实现,之前写过“小谈Jquery”里面有比较接近框架实现的方法,我下面只是写一个简易的选择器。

<div id="container"  style="width:200px;height:200px;background-Color:green;">
</div>

<script>
   var  _$=function (id)
        {
           this.element= document.getElementById(id);
        }
    _$.prototype={
      bind:function(evt,callback)
      {
        var  that=this;
        if(document.addEventListener)
        {
          this.element.addEventListener(evt, function(e){
            callback.call(this,that.standadize(e));
          } ,false);
        }
        else if(document.attachEvent)
        {
          this.element.attachEvent('on'+evt,function(e){
            callback.call(this,that.standadize(e));
          });
        }
        else
          this.element['on'+evt]=function(e){
            callback.call(this,that.standadize(e));
          };
      },
      standadize:function(e){
         var evt=e||window.event;
         var pageX,pageY,layerX,layerY;
         //pageX 横坐标 pageY纵坐标  layerX点击处位于元素的横坐标  layerY点击处位于元素的纵坐标
         if(evt.pageX)
         {
           pageX=evt.pageX;
           pageY=evt.pageY;
         }
         else
         {
          pageX=document.body.scrollLeft+evt.clientX-document.body.clientLeft;
          pageY=document.body.scrollTop+evt.clientY-document.body.clientLTop;
         }
         if(evt.layerX)
         {

           layerX=evt.layerX;
           layerY=evt.layerY;
         }
         else
         {
           layerX=evt.offsetX;
           layerXY=evt.offsetY;
         }
         return {
          pageX:pageX,
          pageY:pageY,
          layerX:layerX,
          layerY:layerY
         }

      }

    }
    window.$=function(id)
    {
     return new _$(id);

    }

    $('container').bind('click',function(e){

      alert(e.pageX);
    });

    $('container1').bind('click',function(e){

       alert(e.pageX);
    });
</script>

这段代码我们主要看standadize函数的实现,兼容性的代码,就不多说了,返回的是一个对象

return {
pageX:pageX,
pageY:pageY,
layerX:layerX,
layerY:layerY
}

然后再看bind函数里面的代码    callback.call(this,that.standadize(e)),这段代码其实就是给e参数赋值了,是用callback回调实现的。

callback 函数被调用的时候传入的是匿名函数

function(e){

    }

而callback.call(this,that.standadize(e))相当于是执行了这么一段代码

(function(e){

})(standadize(e))

这也是Jquery用回调函数比较经典的地方,e参数就是这么被赋值的,说了这些你们也大概有个了解了,以及怎么使用了。

回调在各种框架中应用的比较多,有时候自己写一些东西的时候也可以根据实际情况用用看。

以上这篇对js中回调函数的一些看法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 关于Javascript回调函数的一个妙用

    前言 其实回调函数简单通俗点就是当有a和b两个函数,当a作为参数传给b,并在b中执行,这时a就是一个回调(callback)函数,如果a是一个匿名函数,则为匿名回调函数那下面们来通过一个实例来具体解释下Javascript回调函数怎么使用. 实例 在很久很久以前,有一个人. var person; 他是个人,也就是一个对象. person= {}; // 在JavaScript中,花括号就代表是一个对象 他有个名字叫小明. person.name = '小明'; 看一下是不是真的叫小明. ale

  • 详解JavaScript的回调函数

    本文的目录: 什么是回调或高级函数 回调函数是如何实现的 实现回调函数的基本原则 回调地狱的问题和解决方案 实现自己的回调函数 在JavaScrip中,function是内置的类对象,也就是说它是一种类型的对象,可以和其它String.Array.Number.Object类的对象一样用于内置对象的管理.因为function实际上是一种对象,它可以"存储在变量中,通过参数传递给(别一个)函数(function),在函数内部创建,从函数中返回结果值". 因为function是内置对象,我

  • Javascript基于AJAX回调函数传递参数实例分析

    本文实例讲述了Javascript基于AJAX回调函数传递参数的方法.分享给大家供大家参考,具体如下: 前面介绍了<javascript实现html页面之间参数传递的四种方法>,这里针对ajax参数传递做一分析. 在Javascript 中,特别是在AJAX中,回调函数常常是一个函数名,没有地方放入参数,如下面的AJAX代码,在成功后将调用回调函数callback,但callback是有参数的,如何把参数传进来呢? var callback = function(p1){ //do somet

  • 谈谈JavaScript自定义回调函数

    废话不多说了,直接给大家贴代码了. 背景分析 首先看一段js的代码,主要实现添加的时候首先通过异步请求判断是否存在,如果不存在的话,在进行添加操作: function add(url,data) { var isExited = isExited(data); if(!isExited){ addRequest(url, data); } } 当我添加一个数据的时候,我首先通过判断是否在数据库中存在(当然,如果前后台彻底分离的话,不应该前端进行业务逻辑的判断,前端只应该,用来展示数据),首先,i

  • js自定义回调函数

    背景分析 首先看一段js的代码,主要实现添加的时候首先通过异步请求判断是否存在,如果不存在的话,在进行添加操作: function add(url,data) { var isExited = isExited(data); if(!isExited){ addRequest(url, data); } } 当我添加一个数据的时候,我首先通过判断是否在数据库中存在(当然,如果前后台彻底分离的话,不应该前端进行业务逻辑的判断,前端只应该,用来展示数据),首先,isExited()的请求是ajax请

  • 浅析JavaScript回调函数应用

    一.回调函数定义 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应. 在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A.我们就说函数A叫做回调函数.如果没有名称(函数表达式),就叫做匿名回调函数.因此callba

  • JS动态插入并立即执行回调函数的方法

    本文实例讲述了JS动态插入并立即执行回调函数的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • js的回调函数详解

    现在做native App  和Web App是主流,也就是说现在各种基于浏览器的web app框架也会越来越火爆了,做js的也越来越有前途.我也决定从后端开发渐渐向前端开发和手机端开发靠拢,废话不说了,我们来切入正题"js的回调函数"相关的东西. 说起回调函数,好多人虽然知道意思,但是还是一知半解.至于怎么用,还是有点糊涂.网上的一些相关的也没有详细的说一下是怎么回事,说的比较片面.下面我只是说说个人的一点理解,大牛勿喷.我们来看一下一个粗略的一个定义"函数a有一个参数,这

  • 对js中回调函数的一些看法

    最近在忙公司android的项目,所以也就很少抽时间来写些东西了.刚闲下来,我就翻了翻之前看的东西.做了android之后更加感觉到手机端开发的重要性,现在做native App  和Web App是主流,也就是说现在各种基于浏览器的web app框架也会越来越火爆了,做js的也越来越有前途.我也决定从后端开发渐渐向前端开发和手机端开发靠拢,废话不说了,我们来切入正题"js的回调函数"相关的东西. 说起回调函数,好多人虽然知道意思,但是还是一知半解.至于怎么用,还是有点糊涂.网上的一些

  • 浅析JS中回调函数及用法

    回调函数,什么是回调函数呢?很多初学者都不是很明白,感觉懵懵的,不理解,更不会用! 其实简单理解的话就是在一个函数执行完毕后,得到想要的特定数据后在去执行的函数,并没有性药中的那么高深! function getdata(callback){ //这里我们假设是从后端获取数据 setTimeout(function(){ //假设我们获取到数据info var info = { "id":1, "name":'张三' } //得到数据以后执行函数方法 callbac

  • js中回调函数的学习笔记

    回调函数是什么在学习之前还真不知道js回调函数怎么使用及作用了,下面本文章把我在学习回调函数例子给各位同学介绍一下吧,有需了解的同学不防进入参考. 回调函数原理: 我现在出发,到了通知你" 这是一个异步的流程,"我出发"这个过程中(函数执行),"你"可以去做任何事,"到了"(函数执行完毕)"通知你"(回调)进行之后的流程 例子 1.基本方法 <script language="javascript&q

  • js中匿名函数的创建与调用方法分析

    本文实例分析了js中匿名函数的创建与调用方法.分享给大家供大家参考.具体实现方法如下: 匿名函数就是没有名字的函数了,也叫闭包函数(closures),允许 临时创建一个没有指定名称的函数.最经常用作回调函数(callback)参数的值,很多新手朋友对于匿名函数不了解.这里就来分析一下. function 函数名(参数列表){函数体;} 如果是创建匿名函数,那就应该是: function(){函数体;} 因为是匿名函数,所以一般也不会有参数传给他. 为什么要创建匿名函数呢?在什么情况下会使用到匿

  • 深入理解js 中async 函数的含义和用法

    一.终极解决 异步操作是 JavaScript 编程的麻烦事,麻烦到一直有人提出各种各样的方案,试图解决这个问题. 从最早的回调函数,到 Promise 对象,再到 Generator 函数,每次都有所改进,但又让人觉得不彻底.它们都有额外的复杂性,都需要理解抽象的底层运行机制. 异步I/O不就是读取一个文件吗,干嘛要搞得这么复杂?异步编程的最高境界,就是根本不用关心它是不是异步. async 函数就是隧道尽头的亮光,很多人认为它是异步操作的终极解决方案. 二.async 函数是什么? 一句话,

  • C++中回调函数及函数指针的实例详解

    C++中回调函数及函数指针的实例详解 如何获取到类中函数指针 实现代码: //A类与B类的定义 class A { public: void Test() { cout << "A::Test()" << endl; } }; class B : public A { public: void Test() { cout << "B::Test()" << endl; } }; //定义类的成员函数指针 typedef

  • 浅析JS中对函数function的理解(基础篇)

    正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法.因此,函数名实际上是指向函数对象的指针,不与某个函数绑定.在常见的两种定义方式(见下文)之外,还有一种定义的方式能更直观的体现出这个概念: var sum = new Function("num1", "num2", "return num1 + num2"); //不推荐 Function的构造函数可以接收任意数量的参

  • 关于原生js中bind函数的简单实现

    今天继续研究了bind函数的实现,也知道了shim和polyfill的说法,现在总结一下, if (!Function.prototype.bind) { Function.prototype.bind = function (oThis) { if (typeof this !== "function") { // closest thing possible to the ECMAScript 5 internal IsCallable function throw new Typ

随机推荐

其他