javascript回调函数详解


Posted in Javascript onFebruary 06, 2018

在高级语言层出不穷的年代, 各个语言都号称有着一切皆为对象的自豪说法, 而 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回调函数的相关知识内容,感谢你对三水点靠木的支持。

Javascript 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
jquery创建div 实现代码
Apr 27 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
javascript判断office版本示例
Apr 11 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 Javascript
原生JS实现瀑布流插件
Feb 06 #Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 #Javascript
20行JS代码实现粘贴板复制功能
Feb 06 #Javascript
JS中offset和匀速动画详解
Feb 06 #Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 #Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 #Javascript
AngularJS实时获取并显示密码的方法
Feb 06 #Javascript
You might like
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
js实现二级导航功能
2017/03/03 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
Puppet的一些技巧
2018/09/17 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
python解决字典中的值是列表问题的方法
2013/03/04 Python
基于Python实现用户管理系统
2019/02/26 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
投标诚信承诺书
2014/05/26 职场文书
酒后驾车标语
2014/06/30 职场文书
个人债务授权委托书
2014/10/17 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
小学教师读书笔记
2015/07/01 职场文书
Golang表示枚举类型的详细讲解
2021/09/04 Golang
Python实现制作销售数据可视化看板详解
2021/11/27 Python