首先我们来绑定一个函数给click事件,这个很好理解,就是创建一个匿名函数作为回调绑定给click事件,如下:

但如果我们想声明一个函数作为回调来绑定多个元素呢,例如下面(注意:绑定事件后不用加括号,否则是调用函数,此时绑定的是函数执行后返回的值):

当然上面这样是没有问题的,但是如果changSize()需要传入形参呢,例如下面:

这样的话就会出错,在给click事件绑定函数回调时就直接执行了changSize()函数,并且绑定的是返回的结果,而非changSize()函数。

这时闭包就可以解决这个问题,如下:

将执行语句作为函数返回,在绑定事件时就函数就不再执行,而是作为新的匿名函数回调绑定给click事件。

当然我们也不一定非要绑定给事件时,也可以传递给新的函数,如下:

新手学习日志,理解不当之处,还望大佬批评指正!

JS闭包应用场景之函数回调(含函数的调用个人理解)的更多相关文章

  1. Javascript中的回调函数和匿名函数的回调

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Javascript中的回调函数和匿名函数的回调示例介绍

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Js闭包常见三种用法

        Js闭包特性源于内部函数可以将外部函数的活动对象保存在自己的作用域链上,所以使内部函数的可以将外部函数的活动对象占为己有,可以在外部函数销毁时依然存有外部函数内的活动对象内容,这样做的好处是可 ...

  4. (原创)JS闭包看代码理解

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  5. 浅谈js闭包(closure)

    相信很多从事js开发的朋友都或多或少了解一些有关js闭包(closure)的知识. 本篇文章是从小编个人角度,简单地介绍一下有关js闭包(closure)的相关知识.目的是帮助一些对js开发经验不是很 ...

  6. JavaScript函数节流与函数去抖

    介绍 首先解释一下这两个概念: 函数节流(throttle):是让一个函数无法在很短的时间间隔内连续调用,当上一次函数执行后过了规定的时间间隔,才能进行下一次该函数的调用. 函数去抖(debounce ...

  7. JS闭包的理解及常见应用场景

    JS闭包的理解及常见应用场景 一.总结 一句话总结: 闭包是指有权访问另一个函数作用域中的变量的函数 1.如何从外部读取函数内部的变量,为什么? 闭包:f2可以读取f1中的变量,只要把f2作为返回值, ...

  8. 闭包函数&回调函数

    闭包函数&回调函数 谈到回调函数,不得不提匿名函数;匿名函数,也叫闭包函数,也就是没有名字的函数,它可以单独存在,也可以将其赋值给某一个变量.so,先来看一下闭包函数. 闭包函数 php文档: ...

  9. [Node.js] 闭包和高阶函数

    原文地址:http://www.moye.me/2014/12/29/closure_higher-order-function/ 引子 最近发现一个问题:一部分写JS的人,其实对于函数式编程的概念并 ...

随机推荐

  1. Java的前生今世

    Java作为一门编程语言,自诞生以来已经流行了20多年,在学习它之前,我们有必要先了解一下它的历史,了解它是如何一步步发展到今天这个样子. 孕育 上世纪90年代,硬件领域出现了单片式计算机系统,比如电 ...

  2. script写在head与写在body中的区别

    咱先说将Javascript写在head里面的情况吧,如果你要在这里面去操控DOM元素,是会报错的,因为浏览器是先执行head标签里面的内容,在执行时你的DOM元素还没有生成.(使用了windows. ...

  3. html+css快速入门教程(1)

    1 HTML简介 1.1. 什么是HTML?(了解) HTML是超文本标记语言(HyperText Markup Language,HTML)的缩写.是标准通用标记语言(SGML Standard G ...

  4. METS介绍

    METS介绍 首页  >  关于METS > METS介绍   医护英语水平考试(Medical English Test System, 以下简称:METS)是由教育部考试中心与中国国际 ...

  5. 读取和写入blob类型数据

    读写oracle  blob类型 http://zyw090111.iteye.com/blog/607869 http://blog.csdn.net/jeryjeryjery/article/de ...

  6. 一.django初识

    1.创建django项目:[vagrant@CentOS7 vagrant]$ django-admin startproject devops [vagrant@CentOS7 vagrant]$ ...

  7. C#实现快速查找(递归,非递归)

    原文件: http://pan.baidu.com/share/link?shareid=2838344856&uk=3912660076 我英语很烂...哎,我正在努力... 效果图:

  8. TJOI2018 数学计算 题解

    题目 小豆现在有一个数 \(x\) ,初始值为 \(1\) . 小豆有 \(Q\) 次操作,操作有两种类型: \(m\): \(x=x×m\),输出 \(x\mod M\) : \(pos\): \( ...

  9. The Meaningless Game,算是思维吧。

    题目直接链接 题意: 某游戏规则:每次选定数字k(正整数),两人初始分数为1,获胜者分数乘k2,失败者分数成k,给你两个数字,判断是否可能是本游戏的两人的得分. 分析: 为啥题意我不写判断两个数可不可 ...

  10. 常用js代码片段(一)

    1.如果数组所有元素都满足函数条件,则返回true.调用时,如果省略第二个参数,则默认传递布尔值. const all= (arr, fn=Boolean) => arr.every(fn); ...