javascript -- 回调函数之美

kbyyd24 发布于2019-08-26 11:38 / 705人阅读

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"

回调函数特点

不会立刻执行,
正如定义中给出的一样回调函数作为代码片段可以根据需要在其特定条件下执行, 回调函数作为参数传递给一个函数的时候，传递的只是函数的定义并不会立即执行。

this
ES6推出了箭头函数, 箭头函数的推出需要在写回调函数的时候格外注意, this 是指向所在函数的上下文对象, 如果在在ES6采用箭头函数则需要注意 this使用, 箭头函数中this并没有上下文关系直说, 有兴趣的可以查看ES6 阮一峰, 再次奉上传送门

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

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

回调函数之美

DRY，避免重复代码。

可以将通用的逻辑抽象。

业务逻辑分离 (it"s so beautiful ^-^ ^-^)

提高代码可维护性和可读性。

加强代码可读性。

分离专职的函数。

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

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

服务器托管专线服务回调函数添加回调函数回调函数队列 js回调函数

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

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

体验javascript之美-第五课匿名函数自执行和闭包是一回事儿吗？

摘要：大家想想怎么做什么是匿名函数自执行并如何在实际库中应用匿名函数自执行，注意，注意，只有这个名字和没有其它名字，比如封闭空间，这个是为了让大家好理解自己造的词语。通过本节课你将学到： 1.什么是函数表达式和函数声明 2.first-class function 3.引用和复制的区别 4.函数传参是怎么回事儿 5.关于函数的this和arguments 6.什么是匿名函数自执行并如何在...

_Suqin 2019-08-20 15:56 评论0 收藏0
体验javascript之美第四课--函数、函数表达式、闭包

摘要：大彬哥版权所有翻录必究尼古拉斯屌大彬哥群尼古拉斯屌大彬哥函数声明函数表达式是不是简单的让人发指区别就一句话，函数声明，可以在函数调用之后，因为有函数预解析。而函数表达式必须在调用之前。通过前三课讲解，大家应该能做到 1.手里有一份随时能够换工作自信的简历 2.知道了学习js的正确姿势 3.理解了全局对象、全局上下文、知道有预解析同时做了至少50道面试题 4.能熟练的使用json构建...

Doyle 2019-08-20 15:54 评论0 收藏0
体验javascript之美第九课-函数式编程和angular过滤器实现原理

摘要：函数式编程我在网上看了很多关于的函数式编程的教程，不过我感觉很多不是照抄的或者就是故弄玄虚。函数式编程几分钟就完事儿了，简单的让人发指。函数式编程理解这么多就够了，再实用就可以看源码了。 JS函数式编程我在网上看了很多关于javascript的函数式编程的教程，不过我感觉很多不是照抄的或者就是故弄玄虚。js发展到今天越来越往瑜伽圈的风气发展了，拿腔拿调装13不好好说话，好像你讲的东...

coordinate35 2019-08-20 16:11 评论0 收藏0
体验javascript之美第五课五分钟彻底明白匿名函数自执行和闭包

摘要：注意匿名函数自执行只是产生闭包的一种情况，闭包是现象或者情形，不实用匿名函数自执行也有很多情况产生闭包，所以而且根本就是两回事儿，不能混淆。小测验，你能看出下面的程序用了闭包吗闭包在中使用。闭包无处不在，直接看的例子。通过文你将学到： 1.闭包是怎么回事儿？ 2.闭包的原理和在jquery中的应用 3.从一到面试题彻底理解闭包和垃圾回收机制 4.闭包在jquery中的应用概述 ...

HitenDev 2019-08-20 15:56 评论0 收藏0