`
ponlya
  • 浏览: 164308 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

JS 闭包

 
阅读更多

JS闭包,很流行的概念,听说,不会闭包就不要说会js,今天学习下,http://kb.cnblogs.com/page/110782/讲的比较清楚:

<body>
	<div id="console"></div>
</body>
<script>
//from:http://kb.cnblogs.com/page/110782/
//一个函数访问了它的外部变量,那么它就是一个闭包
function foo(x) {
    var tmp = 3;
    function bar(y) {
        document.getElementById("console").innerHTML += "<br/>"+ (x + y + (++tmp));
    }
    bar(10);
}
foo(2);
foo(2);
foo(2);
//一直是16,这还不是闭包。当你return的是内部function时,就是一个闭包。内部function会close-over外部function的变量直到内部function结束。

document.getElementById("console").innerHTML += "<br><br>闭包1";
function returnFoo(x) {
    var tmp = 3;
    return function returnBar(y) {
        document.getElementById("console").innerHTML += "<br/>"+ (x + y + (++tmp));
    } 
}
var barReturn = returnFoo(2); // bar 现在是一个闭包
barReturn(10);//16
barReturn(10);//17
barReturn(10);//18

//上面的x是一个字面值(值传递),和JS里其他的字面值一样,当调用foo时,实参x的值被复制了一份,复制的那一份作为了foo的参数x。
document.getElementById("console").innerHTML += "<br><br>闭包2";
barReturn = returnFoo(2);//因为虽然barReturn不直接处于returnFoo的内部作用域,但barReturn还是能访问x和tmp。
barReturn(10);//16
barReturn = returnFoo(2);
barReturn(10);//16
barReturn = returnFoo(2);
barReturn(10);//16
barReturn(10);//16

document.getElementById("console").innerHTML += "<br><br>闭包3 obj ";
//JS里处理object时是用到引用传递的,那么,你调用foo时传递一个object,foo函数return的闭包也会引用最初那个object!
function fooObj(x) {
	var tmp = 3;
	return function (y) {
		//alert(x + y + tmp);
        document.getElementById("console").innerHTML += "<br/>"+ (x + y + (++tmp));
		//x.memb = x.memb ? x.memb + 1 : 1;
		//alert(x.memb);
    }
} 
var num = new Number(2);
var barObj = fooObj(num); // bar 现在是一个闭包
barObj(10);
barObj = fooObj(num);  
barObj(10);
barObj = fooObj(num); 
barObj(10);
barObj(10);

//闭包经常用于创建含有隐藏数据的函数
var db = (function() {
	// 创建一个隐藏的object, 这个object持有一些数据   从外部是不能访问这个object的
	var data = {};
	// 创建一个函数, 这个函数提供一些访问data的数据的方法
	return function(key, val) {
		if (val === undefined) { return data[key] } // get
		else { return data[key] = val } // set
		}
	// 我们可以调用这个匿名方法 返回这个内部函数,它是一个闭包
})();

document.getElementById("console").innerHTML += "<br/>"+ db('x'); // 返回 undefined
document.getElementById("console").innerHTML += "<br/>"+ db('x', 1); // 设置data['x']为1
document.getElementById("console").innerHTML += "<br/>"+ db('x'); // 返回 1
// 我们不可能访问data这个object本身
// 但是我们可以设置它的成员
</script>

 

分享到:
评论

相关推荐

    JS闭包可被利用的常见场景

    JavaScript 闭包是一种强大的编程工具,常常被用来解决特定的问题和优化代码结构。在JavaScript中,闭包是指一个函数能够访问并操作其定义时的作用域内的变量,即使该函数在其外部作用域被调用。以下将详细介绍两个...

    js闭包个人理解

    ### JavaScript闭包的理解 在JavaScript中,闭包(Closure)是一种非常重要的概念,它涉及到函数作用域、变量生命周期以及函数内部对外部作用域的访问等多个方面。本文将基于提供的文件内容,深入探讨JavaScript...

    Javascript 闭包完整解释

    ### JavaScript闭包完整解释 #### 一、闭包的基本概念 **闭包**是一个非常重要的JavaScript概念,它指的是一个函数能够记住并访问其外部作用域中的变量的能力,即使该函数在其外部作用域之外被调用也是如此。具体...

    js闭包详细讲解

    ### JavaScript闭包详解 #### 一、闭包概念与特性 **闭包**是JavaScript语言的一个重要特性,它使得函数可以访问并操作其外部作用域内的变量,即使该函数在其外部作用域之外被调用。要理解闭包,首先需要了解...

    js闭包理解之倒计时

    在这个“js闭包理解之倒计时”的主题中,我们将深入探讨如何利用闭包实现一个实际项目中的倒计时功能。 首先,让我们了解一下闭包的基本概念。在JavaScript中,每当函数被创建时,它都会形成一个闭包,这个闭包包含...

    js闭包写法学习demo

    以下是一些关于JavaScript闭包的关键知识点: 1. **函数嵌套**:闭包最常见的形式是内部函数引用了外部函数的变量。例如: ```javascript function outerFunction() { var outerVar = 'I am from the outer ...

    JavaScript闭包

    Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态...本文将以例子入手来介绍Javascript闭包的语言特性,并结合一点 ECMAScript语言规范来使读者可以更深入的理解闭包。

    JavaScript闭包研究及典型应用.pdf

    JavaScript 闭包研究及典型应用 JavaScript 闭包是一种强大的技术,能够在各种场景中发挥重要作用。本文将介绍 JavaScript 闭包的定义、使用场景和典型应用。 闭包函数的定义和使用场景 在 JavaScript 语言中,...

    javascript 闭包

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

    JS 闭包的理解

    总之,JavaScript闭包是理解和编写高效、模块化代码的关键概念,它能帮助我们更好地管理作用域、变量和内存,从而提高代码的复用性和可维护性。在日常开发中,熟练掌握闭包不仅可以提升编程技能,也能让代码更加优雅...

    基于JavaScript闭包的Web图片浏览控件的实现.pdf

    基于JavaScript闭包的Web图片浏览控件的实现 本文主要讲解了基于JavaScript闭包原理的Web图片浏览控件的实现,包括JavaScript闭包概念、闭包应用场景、Web图片浏览控件的设计思路和实现方法。 1. JavaScript闭包...

    javascript闭包详解中文word版

    资源名称:javascript闭包详解 中文word版   内容简介: Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态语言C/C 的程序员来说是一个新的...

    js闭包的理解以及作用.docx

    闭包是JavaScript中实现数据隐藏和封装的一种重要手段,对于理解和编写高效的JS代码至关重要。 1. **作用域的理解** - **全局变量**:在整个程序中都可访问的变量,它们在整个脚本的生命周期内都存在。 - **局部...

    js闭包学习

    JavaScript中的闭包是一种强大的特性,它允许函数访问和操作其外部作用域内的变量,即使在外部函数执行完毕后,闭包依然能保持对外部变量的访问。闭包的关键在于,它能够保留函数内部状态,使得数据得以持久化,这...

    javascript闭包的理解

    标题《JavaScript闭包的理解》涉及的知识点主要围绕JavaScript编程中的一个重要概念——闭包。闭包是一个高级且复杂的话题,它是JavaScript语言的核心特性之一,同时也是一大难点。要想熟练运用JavaScript,掌握闭包...

    layer.rar 使用js 闭包封装的原生提示模态框

    在这个场景中,我们讨论的是一个名为"layer.rar"的压缩包,它包含了一个利用JavaScript闭包技术封装的提示模态框。这个模态框设计得既适应PC设备,也能在不同分辨率的设备上良好运行,体现了响应式设计的概念。 ...

    JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解

    在深入讨论JavaScript闭包之前,首先需要了解JavaScript的变量作用域。在JavaScript中,变量的作用域分为两种:全局变量和局部变量。全局变量是在函数外部定义的变量,可以在JavaScript程序的任何地方被访问。局部...

    javascript 闭包实例下载

    JavaScript 闭包是一种高级编程概念,它在JavaScript中扮演着至关重要的角色,特别是在函数式编程和模块化设计中。闭包本质上是函数和其能够访问...通过学习这些实例,你将能够更好地掌握JavaScript闭包这一核心概念。

    [深入理解JS闭包]帮助你快速学习js的闭包,简单高效的文档资源

    JavaScript 闭包是一种强大的特性,它允许函数访问和操作其外部作用域的变量,即使在其外部函数执行完毕后,闭包依然能保持对外部变量的访问。闭包的关键在于内部函数能够记住它被创建时的环境,即它可以访问定义在...

    什么是js闭包

    ### 什么是JS闭包 #### 一、变量的作用域与闭包的基础 在JavaScript中,理解闭包之前,首先需要掌握变量的作用域概念。变量的作用域主要分为两种:全局变量和局部变量。全局变量在整个程序范围内都可以访问,而...

Global site tag (gtag.js) - Google Analytics