函数解析 之 回调函数

1. 什么叫做回调函数?

详情请查看 阮一峰 之ES6 解析 链接:https://pan.baidu.com/s/1deSccY 密码:fohv

答 :直白的说:就是 函数 中嵌套另一个 函数 形成复杂的语法结构。在javascript 中,
函数也是一种变量可以成为其他函数的参数。这里要注意 this 的指向。

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

2. 回调函数特点

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

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

3.  回调函数的好处

3.1 DRY,避免重复代码。

3.2 可以将通用的逻辑抽象。

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

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

3.5 分离专职的函数。

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

4.  回调函数的缺点

4.1 回调函数层级太多,使用困难。

4.2 大量的回调函数运行, 消耗内存,影响性能。

4.3 直白的来说,就是中看,不实用,能不用,就不用。

5.  实例解析

1.0  //定义主函数,回调函数作为参数function A(callback) {

    callback(); 

    console.log('我是主函数');     

}//定义回调函数function B(){

    setTimeout("console.log('我是回调函数')", 3000);//模仿耗时操作  }//调用主函数,将函数B传进去A(B);//输出结果我是主函数

我是回调函数



2.0 //函数嵌套

functionaddSqua(num1, num2, callback){

  varsum = num1 + num2;

  returncallback(sum);

}

functionsqua(num){

  returnnum*num;

}

let num = addSqua(1, 2, squa);   

console.log(num);

//=>9

6.箭头函数

箭头函数ES6最常用的一个新特性了,用它来写function比原来的写法要简洁清晰很多,下面的来源与 阮一峰讲解的 es6。 链接 :百度云盘ES6资料  密码:nd2h  第70页。

1.0

function (i) { return  i +1; }

//ES5的写法

(i) => i +1

//ES6的写法



2.0

const pipeline = (...funcs) =>

val => funcs.reduce((a, b) => b(a), val);

const plus1 = a => a + 1;

const mult2 = a => a * 2;

const addThenMult = pipeline(plus1, mult2);

addThenMult(5)

// 12



3.0

// ES6

function foo() {

setTimeout(() => {

  console.log('id:', this.id);

            }, 100);

 }

// ES5

function foo() {

var _this = this;

setTimeout(function () {

console.log('id:', _this.id);

}, 100);

}



4.0能力提升

请问下面的代码之中有几个this?

function foo() {

return () => {

return () => {

return () => {

console.log('id:', this.id);

};

};

};

}

var f = foo.call({id: 1});

var t1 = f.call({id: 2})()(); // id: 1

var t2 = f().call({id: 3})(); // id: 1

var t3 = f()().call({id: 4}); // id: 1

上面代码之中,只有一个this,就是函数foo的this,所以t1、t2、t3都输出同样的结果。因为所有的内层函数都是箭头函数,都没有自己的this,

它们的this其实都是最外层foo函数的this。

注意: 由于箭头函数没有自己的this,所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。

详情请查看 阮一峰 之ES6 解析 链接:https://pan.baidu.com/s/1deSccY 密码:fohv

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,843评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,538评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,187评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,264评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,289评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,231评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,116评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,945评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,367评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,581评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,754评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,458评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,068评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,692评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,842评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,797评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,654评论 2 354

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,148评论 0 13
  • Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函...
    neromous阅读 8,706评论 1 56
  • ES6语法跟babel: 一、首先我们来解释一下什么是ES? ES的全称是ECMAScript。1996 11 ,...
    Mooya_阅读 997评论 0 0
  • js简介 Js是一种基于事件和对象驱动的解释性、松散性的语言。 一切皆对象 javascript 布兰登艾奇 ...
    塔库纳玛哈哈阅读 1,204评论 0 2
  • 看不懂,可以看个热闹,你的逻辑能经受住真正的逻辑之考验否?[奸笑] 仙人也从来没指望多少人能看懂这里的所有,看懂几...
    纵情嬉戏天地间阅读 354评论 0 0