作为一个前端开发者,闭包是必须要攻克掉的障碍。据说好多面试者挂在闭包面试上。下面我就给大家讲一下我理解中的闭包。不说太多的废话,直接进入主题。

变量作用域

学习编程语言需要明白,变量的作用域。变量作用域分全局变量、局部变量。全局变量尽量少用,因为它很耗费性能。简单理解,全局变量:在任何一个地方都可以访问到。局部变量只有在局部才可以访问到。先举个例子看看:

var data=100;
function domo(){
var data1=20;
console.log(data);
console.log(data1);
}
domo();

可以看出data在dome中也可被访问。所有呢!data是全局变量,data1是局部变量。

闭包

1.常见闭包

/**
* 最简单的闭包
* */
function bibao(){
var d=10;
return function(){
console.log(d);
d++;
}
}
var _bibao=bibao();
_bibao();//输出10
_bibao();//输出11

首先我们要明白函数是有返回值的,如果不手动更改返回值则返回undefined。如何手动更改返回值?就是在函数中使用return 返回。可以返回为布尔值也可以是对象也可以是空字符串也可以是函数。这个最简单的闭包就是返回一个匿名函数。_bibao接收到bibao函数的返回。相当于_bibao===function(){console.log(d);d++;}。然而这个匿名函数中用到了d。此刻_bibao就可以访问d;也可以更改d

2.无return闭包

  1. /**
    * 无return的闭包
    *
    * */
    var _bibao1;
    function bibao1(){
    var d=20;
    _bibao1= function(){
    console.log(d);
    d++;
    }
    }
    bibao1();
    _bibao1();//输出20
    _bibao1();//输出21
    
    

这种没有return 的闭包其实跟上面最简单的闭包是相同的,它只不过把一个匿名函数赋值给全局变量。全局变量此刻保持对这个匿名函数的引用。当调用_bibao1()的时候,就等于调用这个匿名函数。

3.回掉函数中产生的闭包

/**
* 回掉函数中产生的闭包
* @callback {Function} 回掉函数
* */ function bibao2(callback){
var d=100;
setTimeout(function(){
callback()
},2000)
} function _bibao2(){
var d=120;
bibao2(function(){
console.log(d);
d++;
});
setTimeout(function(){
console.log(d);
},3000)
}
_bibao2();//两秒后输出120。三秒后输出121

只有记住一个变量或者参数是一个函数的引用,这个答案就会迎刃而解。执行_bibao2();它会执行bibao2,然后传入一个匿名函数,此刻这个匿名函数保持可以访问到_bibao2中的d。bibao2中的参数callback保持对这个匿名函数的引用。所以它访问的是_bibao2中的d而不是bibao2中的d。

总结

闭包是很有用的,也是很常用的,只有我们记住了它的原理,就能够掌控它们。它只不过是一个函数的引用,这个函数可以访问到这个函数的父函数中的变量而已。

JavaScript 经典之一 闭包的更多相关文章

  1. JavaScript葵花宝典之闭包

    闭包,写过JS脚本的人对这个词一定不陌生,都说闭包是JS中最奇幻的一个知识点,  虽然在工作中,项目里经常都会用到~  但是是不是你已经真正的对它足够的了解~~ 又或者是你代码中出现的闭包,并不是你刻 ...

  2. 和JavaScript家的闭包玩玩捉迷藏

    JavaScript的闭包 首先声明,这是一篇面向小白的博客,不过也欢迎各位大牛批评指正,谢谢.   其实关于闭包各个论坛社区里都有很多的文章来讲它,毕竟闭包是JavaScript中一个特色,也正因为 ...

  3. 深入理解javascript原型和闭包(10)——this

    接着上一节讲的话,应该轮到“执行上下文栈”了,但是这里不得不插入一节,把this说一下.因为this很重要,js的面试题如果不出几个与this有关的,那出题者都不合格. 其实,this的取值,分四种情 ...

  4. 深入理解javascript原型和闭包(15)——闭包

    前面提到的上下文环境和作用域的知识,除了了解这些知识之外,还是理解闭包的基础. 至于“闭包”这个词的概念的文字描述,确实不好解释,我看过很多遍,但是现在还是记不住. 但是你只需要知道应用的两种情况即可 ...

  5. 深入理解javascript原型和闭包 (转)

    该教程绕开了javascript的一些基本的语法知识,直接讲解javascript中最难理解的两个部分,也是和其他主流面向对象语言区别最大的两个部分--原型和闭包,当然,肯定少不了原型链和作用域链.帮 ...

  6. 深入理解javascript原型和闭包系列

    从下面目录中可以看到,本系列有16篇文章,外加两篇后补的,一共18篇文章.写了半个月,从9月17号开始写的.每篇文章更新时,读者的反馈还是可以的,虽然不至于上头条,但是也算是中规中矩,有看的人,也有评 ...

  7. 让你分分钟学会Javascript中的闭包

    Javascript中的闭包 前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它 ...

  8. 深入理解javascript原型和闭包(1)——一切都是对象

    “一切都是对象”这句话的重点在于如何去理解“对象”这个概念. ——当然,也不是所有的都是对象,值类型就不是对象. 首先咱们还是先看看javascript中一个常用的函数——typeof().typeo ...

  9. 深入理解javascript原型和闭包(2)——函数和对象的关系

    上文(理解javascript原型和作用域系列(1)——一切都是对象)已经提到,函数就是对象的一种,因为通过instanceof函数可以判断. var fn = function () { }; co ...

随机推荐

  1. String+ String.Concat String.Format StringBuilder 之间的性能测试

    找到一篇国外的代码,专门来测试这个, String+ String.Concat String.Format StringBuilder 前三个在100个左右字符串差不多, String.Concat ...

  2. 纠错:基于FPGA串口发送彩色图片数据至VGA显示

    今天这篇文章是要修改之前的一个错误,前面我写过一篇基于FPGA的串口发送图片数据至VGA显示的文章,最后是显示成功了,但是显示的效果图,看起来确实灰度图,当时我默认我使用的MATLAB代码将图片数据转 ...

  3. javascript数组的常用方法总结

    http://jingyan.baidu.com/album/86fae346bce16d3c49121af9.html?picindex=1 1. concat()方法 数组和数组的 粘结: var ...

  4. ConcurrentHashMap源码及分析

    ConcurrentHashMap是在jdk1.5版本开始,存在于java.util.concurrent包下.本文主要是针对jdk1.7版本. 由于HashMap是非线程安全的,HashTable虽 ...

  5. JAVA提高五:注解Annotation

    今天我们学习JDK5.0中一个非常重要的特性,叫做注解.是现在非常流行的一种方式,可以说因为配置XML 比较麻烦或者比容易查找出错误,现在越来越多的框架开始支持注解方式,比如注明的Spring 框架, ...

  6. win10 uwp 右击选择 GridViewItem

    有时候我们需要选择一个 GridView 的一项,通过我们右击. 于是我们需要在 GridView 的 SelectionMode 为 Single ,IsRightTapEnabled 为True ...

  7. C# 格式化字符串

    C#字符串使用{}来格式化 {引索,宽度:格式} 格式后面加数字保留位数 格式 C人民币 {0,10:C10} <script type="text/javascript"& ...

  8. ROS Indigo在ubuntu1404上的安装方法

    安装配置方法参照  http://wiki.ros.org/indigo/Installation/Ubuntu 以下操作需要保证虚拟机能够正常连接网络. 1.更换源镜像: 将源设置为国内源,我选择的 ...

  9. Java常用类(一)之Object类详解

    大家都知道Object是所有类的父类,任何类都默认继承Object 理论上Object类是所有类的父类,即直接或间接的继承java.lang.Object类.由于所有的类都继承在Object类,因此省 ...

  10. javascrip实现:若选中TreeView的父节点checkbox,则其子节点全部选中;子节点全部没选中,则父节点也会没选中。

    <script type="text/javascript"> function public_GetParentByTagName(element, tagName) ...