javascript回调函数详解

 更新时间:2018年02月06日 14:21:19   投稿:laozhang  
这篇文章主要介绍了javascript回调函数的相关知识点以及用法代码实例分析,对此有需要的朋友可以学习参考下。

在高级语言层出不穷的年代, 各个语言都号称有着一切皆为对象的自豪说法, 而 js 作为一门脚本语言却相对于java等传统面向对象语言有很大的不同之处, 除了 js 诡异的继承体系之外, 最令人着迷的一个特性就是回调函数, 当然也有很多人对他诟病, 笔者认为 回调函数 和 异步 是js语言特性的两大最为突出的店, 当然正如所有优点需要满足自我的需求, 这个世界没有银弹, 比如大量的使用回调函数将会使你的代码冗余, 错乱影响代码人的视觉与思维体验.

本文是自己对学习回调函数的的体会, 难免不完善甚至错误, 原谅我的无知, 我愿虚心学习, 完善自己.

javascript最独特的就是 函数 作为一等公民, 我更愿意将 js 称为一切皆为 变量 的一门高级语言, 函数也是一种变量可以成为其他函数的参数, 我们喜欢在js中称之为回调函数, 另外js中的匿名函数可以作为函数参数使得回调函数的写法如鱼得水.

ps. 回调函数与 c 语言中的函数指针类似---指针指针指针!!!重要的事情说三遍

先来看一下回调函数的定义

In computer programming, a callback is a piece of executable code that is passed as an argument to other code, which is expected to call back (execute) the argument at some convenient time

回调函数是一段可执行的代码段,它作为一个参数传递给其他的代码,其作用是在需要的时候方便调用这段(回调函数)代码。

回调函数

  function addSqua(num1, num2, callback){
    var sum = num1 + num2;
    return callback(sum);
  }
  
  function squa(num){
    return num*num;
  }
  
  let num = addSqua(1, 2, squa);    
  console.log(num);
  //=>9  

匿名回调函数

将匿名函数直接作为函数参数传递给函数, 这也是我们编程一般采用的

function addSqua(num1, num2, callback){
 var sum = num1 + num2;
 return callback(sum);
}
let num = addSqua(1, 2, function squa(num){
 return num*num;
});    
console.log(num); 
//=9 

模仿数组中的every方法

在Array.prototype中添加类似与every一样的方法

  Array.prototype.myEvery = function (callback) {
   if (typeof callback === 'function') {
    for (let i = 0; i < this.length; i++) {
     if (callback(this[i])) {
      return false;
     }   
    }
    return true;
   }
   return true;
  }
  
  let op = [3, 6, 'every', 9,'each'];
  op.myEvery(function (value) {
   console.log(value);
  })
  // 3
  // 6
  // 'every'
  // 9
  // 'each'

回调函数特点

  1. 不会立刻执行, 正如定义中给出的一样回调函数作为代码片段可以根据需要在其特定条件下执行, 回调函数作为参数传递给一个函数的时候,传递的只是函数的定义并不会立即执行。
  2. this,ES6推出了箭头函数, 箭头函数的推出需要在写回调函数的时候格外注意, this 是指向所在函数的上下文对象, 如果在在ES6采用箭头函数则需要注意 this使用, 箭头函数中this并没有上下文关系直说, 有兴趣的可以查看ES6 阮一峰, 再次奉上传送门

回调函数的优点和使用场景是个闭包

回调函数是闭包的简单使用,也就是说它能访问到其外层定义的变量。

回调函数之美

  • DRY,避免重复代码。
  • 可以将通用的逻辑抽象。
  • 业务逻辑分离 (it's so beautiful ^-^ ^-^)
  • 提高代码可维护性和可读性。
  • 加强代码可读性。
  • 分离专职的函数。

js回调函数的伟大之处是其他传统语言所没有的, 它可以实现业务逻辑分离, 相当于暴露给外界一个接口, 这一点像极了前后端分离架构中的 API 接口设计理念

这个世界没有 '银弹' , 没有能够解决所有事情的一种方案, 由于js为异步而生, 回调函数用的最多的地方, 也是最适合的地方就是异步编程, 然而大量的使用会使得程序员的代码冗余, 有很大的不可读行, 体验极差, 索性让人高兴的事, 人们从来没有停止过对自己舒适度的追求。

以上就是本次小编整理的关于javascript回调函数的相关知识内容,感谢你对脚本之家的支持。

相关文章

  • ES6 13个新特性总结

    ES6 13个新特性总结

    这篇文章主要介绍了ES6 13个新新特性总结,let const,模块字符串,解构,箭头函数,for of,promise,async/await,Symbol,Set集合等需要的朋友可以参考下
    2022-04-04
  • 使用javascipt---实现二分查找法

    使用javascipt---实现二分查找法

    本篇文章,小编为大家介绍使用javascipt---实现二分查找法的方法,有需要的朋友可以参考一下
    2013-04-04
  • js querySelector() 使用方法

    js querySelector() 使用方法

    querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代
    2016-12-12
  • javascript基础之查找元素的详细介绍(访问节点)

    javascript基础之查找元素的详细介绍(访问节点)

    常用jQuery的话我们知道,jQuery有非常强大的选择器来查找元素(也称作访问节点),例如:基本选择器、层次选择器、过滤选择器、属性选择器等
    2013-07-07
  • ASP小贴士/ASP Tips javascript tips可以当桌面

    ASP小贴士/ASP Tips javascript tips可以当桌面

    今天看到《ASP小贴士/ASP Tips》 我也去把JavaScript的tips 下下来了。 看看是A4的。 自己把他改成1024 * 768 刚好可以用来做桌面
    2009-12-12
  • javascript基础知识分享之类与函数化

    javascript基础知识分享之类与函数化

    在C++中是以class来声明一个类的,JavaScript与C++不同,它使用了与函数一样的function来声明,这就让许多学Jscript的朋友把类与函数混在一起了,在Jscript中函数与类确实有些混,但使用久了自然会理解,这篇文章是针对想进攻面向对象编程的朋友而写,就不打算讨论得太深了
    2016-02-02
  • 5个最顶级jQuery图表类库插件【jquery插件库】

    5个最顶级jQuery图表类库插件【jquery插件库】

    这篇文章主要介绍了5个最顶级jQuery图表类库插件【jquery插件库】,需要的朋友可以参考下
    2016-05-05
  • JS获取各种宽度、高度的简单介绍

    JS获取各种宽度、高度的简单介绍

    这篇文章主要介绍了JS获取各种宽度、高度的简单介绍的相关资料,需要的朋友可以参考下
    2014-12-12
  • 深入理解Javascript中的观察者模式

    深入理解Javascript中的观察者模式

    观察者模式又称发布订阅模式,是一种最常用的设计模式之一了。下面这篇文章主要给大家深入的介绍了Javascript中观察者模式的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-02-02
  • JavaScript中getUTCSeconds()方法的使用详解

    JavaScript中getUTCSeconds()方法的使用详解

    这篇文章主要介绍了JavaScript中getUTCSeconds()方法的使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06

最新评论