javascript进阶笔记(3)

本篇文章我们来学习和讨论一下js中的闭包。闭包是纯函数式编程的一个特性,因为它们能够大大简化复杂的操作。在js中,闭包的重要性不言而喻!

简单的说,闭包(closure)是 一个函数在创建时 允许 该自身函数 访问并操作 该自身函数之外的变量时 所创建的作用域。换句话说,闭包可以让函数访问所有的变量和函数,只要这些变量和函数存在于该函数声明时的作用域内就行。要记住,声明的函数在后续什么时候都可以被调用,即便声明时的作用域消失之后。我们通过下面一小段代码来开始本次学习:

var outerValue="outer";

function outerFunction(){
    //调用函数外部变量outerValue
    alert(outerValue);
}
//执行outerFunction函数
outerFunction();

我们在同一个作用域内声明一个变量outerValue和函数outerFunction(),可以看见,outerFunction()函数能够访问并操作outerValue变量,这样的代码,我们已经写了无数次,但是却没有意识到其实这正在创建一个闭包。这并不奇怪,因为变量outerValue和函数outerFunction()都是在全局作用域内声明的,该作用域(实际上就是一个闭包)从未消失过(因为页面已经被加载了),不足为奇,该函数outerFunction()可以访问到外部变量outerValue,因为它仍在作用域内并且是可用的。只不过,在这种情况下,即便闭包存在,也不清楚它的好处。

接下来,我们再次演变一下代码:

var outerValue="outer";
var later;

function outerFunction(){
    var innerValue="inner";

    function innerFunction(){
        //调用外部函数的innerValue变量
        alert(innerValue);
    }
    //将innerFunction函数引用到later
    later=innerFunction;
}
//执行outerFunction函数
outerFunction();
//执行innerFunction函数
later();

//inner

当outerFunction()函数执行之后,outerFunction()函数的作用域已经消失了。按照函数的作用域来说,通常,此时的innerValue变量已不存在了。但是上面的代码真的是这样执行的吗?当然不是!在outerFunction()函数执行之后,我们将内部函数innerFunction的引用赋值给全局变量later来进行调用。此时,later变量引用的innerFunction函数是可用调用到innerValue变量的。为什么?因为闭包!

在外部函数outerFunction中声明内部函数innerFunction的时候,不仅仅是声明了innerFunction函数,还创建了一个闭包,该闭包不仅包含函数声明,还包含了内部函数innerFunction引用外部函数中的变量innerValue。最终当innierFunction函数执行的时候,外部函数outerFunction的作用域已经消失了,通过闭包,innerFunction函数还是可以访问到innerValue变量的。

时间: 2024-10-25 06:16:01

javascript进阶笔记(3)的相关文章

javascript进阶笔记(2)

js是一门函数式语言,因为js的强大威力依赖于是否将其作为函数式语言进行使用.在js中,我们通常要大量使用函数式编程风格.函数式编程专注于:少而精.通常无副作用.将函数作为程序代码的基础构件块. 在函数式编程中,有一种函数称为匿名函数,也就是没有名称的函数,是js中的一个非常重要的概念.通常匿名函数的使用情况是,创建一个供以后使用的函数.比如将匿名函数保存在一个变量里面,或将其作为一个对象方法,更有甚者将其作为一个回调等等之类的. //保存在变量中,通过fn去引用 var fn=function

JavaScript进阶--慕课网学习笔记

                     JAVASCRIPT-进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字母.下划线.美元符号和数字.如下: 正确: mysum _mychar $numa1 错误: 6num  //开头不能用数字 %sum //开头不能用除(_ $)外特殊符号,如(%  + /等) sum+num //开头中间不能使用除(_ $)外特殊符号,如(%  + /等) 2.变量名区分大小写,

#笔记#JavaScript进阶篇一

#JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象 浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScript 方案: var w= document.documentElement.clientWidth || document.body.clientWidth; var h= document.documentElement.clientHeight || document.body.clientHe

Javascript进阶---前言

前言: 在没有完全认识Javacript的时候,经常用Javascript/jQuery操纵DOM,改个样式什么的,使用Ajax进行前端后端的数据交互. 经常会想,这近些年大热的Javascript就只能做这么点事儿吗? 直到后来,慢慢接触到了AngularJS.NodeJS才知道,才知道将Javascript作为一门完整的语言去看待,而不仅仅是网页的脚本. Javascript进阶学习笔记,将会以ECMAScript 6为标准,去学习真正的Javascript. 注意: 1.整理内容具有个人偏

JavaScript进阶学习——DOM对象

DOM对象 1认识DOM 2getElementByName方法 3getElementByTagName方法 4区别getElementByIdgetElementByNamegetElementByTagName 5getAttribute方法 6setAttrubute方法 7节点属性 8访问子节点childNodes 9访问子节点的第一个最后项 10访问父节点parentNode 11访问兄弟节点 12插入节点appendChild 13插入节点insertBefore 14删除节点re

机器学习进阶笔记之一 | TensorFlow安装与入门

原文链接:https://zhuanlan.zhihu.com/p/22410917 TensorFlow 是 Google 基于 DistBelief 进行研发的第二代人工智能学习系统,被广泛用于语音识别或图像识别等多项机器深度学习领域.其命名来源于本身的运行原理.Tensor(张量)意味着 N 维数组,Flow(流)意味着基于数据流图的计算,TensorFlow 代表着张量从图象的一端流动到另一端计算过程,是将复杂的数据结构传输至人工智能神经网中进行分析和处理的过程. -- 由 UCloud

Javascript读书笔记:函数定义和函数调用

定义函数 使用function关键字来定义函数,分为两种形式: 声明式函数定义: function add(m,n) { alert(m+n); } 这种方式等同于构造一个Function类的实例的方式: var add = new Function("m", "n", "alert(m+n);"); Function类构造方法的最后一个参数为函数体:"alert(m+n);",前面的都是函数的形参,参数必须是字符串形式的:&

Javascript 学习笔记 2: 标识语句

可以在任何语句声明之前使用唯一标识(identifier)和冒号(:)用来标记该语句: identifier: statement 这样,你可以在程序的任何其他地方通过标识来使用这个语句.即使在语句内部也可以使用该语句的标识(例如:循环语句和条件语句).当在一个循环语句前添加一个标识,你可以在语句内部通过break 标识来退出当前循环,也可以通过continue标识来继续执行该语句.例如: mainloop: while(token != null) { // Code omitted... c

javascript学习笔记---ECMAScript-判断变量类型

判断类型之前,先要清楚有哪些类型. (理理思路:程序由数据和方法构成,数据由简单数据和复杂数据构成) 即类型有: 数据(简单数据:boolean,string,num,undefined,null.复杂数据:object), 方法(function) 万能的typeof,神一样的方法 typeof(1);// num typeof("hello");// string   typeof(false);// boolean var vFlag; typeof(vFlag);// unde