Javascript高级教程:javascript闭包

文章简介:理解JavaScript的闭包是迈向高级JS程序员的必经之路,理解了其解释和运行机制才能写出更为安全和优雅的代码。

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。

一、变量的作用域

要理解闭包,首先必须理解Javascript特殊的变量作用域。

变量的作用域无非就是两种:全局变量和局部变量。

Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。

Js代码

  var n=999;

  function f1(){
alert(n);
}

  f1(); // 999

另一方面,在函数外部自然无法读取函数内的局部变量。

Js代码

  function f1(){
var n=999;
}

  alert(n); // error

这里有一个地方需要注意,函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!

Js代码

  function f1(){
n=999;
}

  f1();

  alert(n); // 999

--------------------------------------------------------------------------------------------------------

二、如何从外部读取局部变量?

出于种种原因,我们有时候需要得到函数内的局部变量。但是,前面已经说过了,正常情况下,这是办不到的,只有通过变通方法才能实现。

那就是在函数的内部,再定义一个函数。

Js代码

  function f1(){

    n=999;

    function f2(){
alert(n); // 999
}

  }

在上面的代码中,函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1 就是不可见的。这就是Javascript语言特有的“链式作用域”结构(chain scope),

子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。

既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗!

Js代码

  function f1(){

    n=999;

    function f2(){
alert(n);
}

    return f2;

  }

  var result=f1();

  result(); // 999

--------------------------------------------------------------------------------------------------------

三、闭包的概念

上一节代码中的f2函数,就是闭包。

各种专业文献上的“闭包”(closure)定义非常抽象,很难看懂。我的理解是,闭包就是能够读取其他函数内部变量的函数。

由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。

所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

[1] [2] [3]  下一页

时间: 2024-08-22 14:13:47

Javascript高级教程:javascript闭包的相关文章

JavaScript高级教程5.6之基本包装类型(详细)_javascript技巧

为了便于操作基本类型值,ECMAScript还提供了3个特殊的引用类型:Boolean,Number,String. 实际上,每当读取一个基本类型值的时候,后台应付创建一个对应的基本包装类型的对象,从而让我们能够调用一些方法来操作这些数据. var s1="some text"; var s2=s1.substring(2); console.log(s2);//me text 这个例子中s1包含了一个字符串,字符串是基本类型值.第二行调用了s1的subsstring()方法,并将返回

JavaScript 高级篇之闭包、模拟类,继承(五)_javascript技巧

一.javascript中的闭包 1.我们一起先来理解什么是函数的作用域. 2.调用的对象 结合例子: 复制代码 代码如下: function display(something) { function executeDisplay1() { document.write("我在帮老板打印:"+something+"<br />");//引用外部函数的something参数 } executeDisplay1();//函数display引用了内部函数 }

JavaScript实例教程:javascript制作纸牌游戏

文章简介:这几天忙着做了一个JavaScript的纸牌.与Windows的纸牌相似 好几天没有更新自己的博客了,这段时间,作业比较多,试验报告比较多,老师要写纸质试验报告,还要电子档,考试不按照她上课讲的思路那就得不到几分...她这观点一出来,我就傻了,不能有自己的见解了... 废话就到这里,小小抱怨一下,o(∩_∩)o下面进入正题,这几天忙着做了一个JavaScript的纸牌.与Windows的纸牌相似 规则如下: 1.有3个叠牌区域和4种牌,左上角叠牌区,右上角整理区,和中间的层叠区. 2.

JavaScript 参考教程

javascript|参考|教程 JavaScript 是使用"对象化编程"的,或者叫"面向对象编程"的.所谓"对象化编程",意思是把 JavaScript 能涉及的范围划分成大大小小的对象,对象下面还继续划分对象直至非常详细为止,所有的编程都以对象为出发点,基于对象.小到一个变量,大到网页文档.窗口甚至屏幕,都是对象.这一章将"面向对象"讲述 JavaScript 的运行情况. 对象的基本知识  对象是可以从 JavaScr

JavaScript 参考教程_基础知识

JavaScript 参考教程  javascript 是使用"对象化编程"的,或者叫"面向对象编程"的.所谓"对象化编程",意思是把 javascript 能涉及的范围划分成大大小小的对象,对象下面还继续划分对象直至非常详细为止,所有的编程都以对象为出发点,基于对象.小到一个变量,大到网页文档.窗口甚至屏幕,都是对象.这一章将"面向对象"讲述 javascript 的运行情况.  对象的基本知识  对象是可以从 javasc

JavaScript高级程序设计 读书笔记之八 Function类及闭包_javascript技巧

Function类 定义 Function类可以表示开发者定义的任何函数,用Function类直接创建函数的语法如下: var function_name=new Function(agrument1,agrument2,...,argumentN,function_body); 每个argument都是一个参数,最后一个参数是函数主体(要执行的代码). 示例: 复制代码 代码如下: function sayHi(sName,sMessage){ alert("Hello "+sNam

Javascript初学者教程:学习JavaScript的步骤

文章简介:最后undefined 感谢阅读此文!真诚的希望它能帮你成为一名JavaScript 爱好者.如果你已对JavaScript 很熟悉,你可以在评论中推荐其他任何相关资源. 学习新的东西是件可怕的事.对我来说,掌握一项新技能最大的问题是,我不知道自己懂什么.鉴于此,定个计划,学习你感兴趣的东西应该会有用.这篇文章的主旨就是:你为学习JavaScript 制定的蓝图.路线.行动计划!你不必担心找不到最好的资源,先整理些不好的资源,再确定下一步该学什么.遵循它,一步一步来. 任务0:了解什么

Javascript实例教程(19) 数组

javascript|教程|数组 使用javascript数组 在javascript 1.0中构造器只存在Date对象和用户定义的对象.你可能期望有个数组构造器,但是一直没能实现,直到javascript 1.1的出现,你的期望成为了现实.我们可以如下来定义用户对象: function blankArray(n) { for (var i=0; i < n; i++) this[i] = null; this.length = n; } blankArray函数创建了一个数组,这个数组中有n个

Javascript实例教程(18) 数组

javascript|教程|数组 使用Javascript数组 在JavaScript 1.0中构造器只存在Date对象和用户定义的对象.你可能期望有个数组构造器,但是一直没能实现,直到JavaScript 1.1的出现,你的期望成为了现实.我们可以如下来定义用户对象: function blankArray(n) { for (var i=0; i < n; i++) this[i] = null; this.length = n; } blankArray函数创建了一个数组,这个数组中有n个