`
toknowme
  • 浏览: 139892 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

班门弄斧01:Javascript闭包

 
阅读更多

闭包:兴趣,注意undefined这个数据类型
先看一个例子:
<script type="text/javascript">
var name = "Love Movie";

var object = {
name : "Love Music",
getName : function(){
alert(this.name);
   }
};
alert(object.getName ());
</script>



这个例子会弹出什么东西?
会弹出“Love Music”,"undefined"

打印undefined的原因仔细思考下。

<script type="text/javascript">
var name = "Love Movie";

var object = {
name : "Love Music",
getName : function(){
alert(this.name);
   }
};
var a = object.getName();
 alert(a);
</script>

闭包:局部变量和全局变量的区分

<script type="text/javascript">
var name = "Love Movie";

var object = function() {
var name = "Love Music"; //(A)
};

function init() {
object();
}

init();
alert(name);
</script>
会打印出Love Movie,因为(A)处的name是object对象的局部变量,外部是无法访问的。
如果去除(A)处的var,结果又是如何?Love Music

如果在一个函数中,用var定义变量,那么这个变量将是这个函数的局部变量,并且外部的函数无法调用。
那么如果想要有属于自己函数的变量,一定要在函数中给这个变量增加一个 var,否则将会默认为全局变量。


提问,那么我们如何调用局部变量呢?

<script type="text/javascript">
var name = "Love Movie";

var object = {
name : "Love Music", //(A)
getName : function() {
return this.name;
}
};

alert(object.getName());
</script>

这个例子不太好!因为这个不是闭包的例子,只是演示了数组的属性和值。



闭包:深度剖析

<script type="text/javascript">
var name = "Love Movie";
function z() {
var name = "Love Music";
function getZname() {
return name;
}
return getZname;
}

var getZname = z();
alert(getZname());

</script>

Q1:这个会弹出什么呢?

<script type="text/javascript">
var name = "Love Movie";
function z() {
var name = "Love Music";
function getZname() {
return this.name;
}
return getZname;
}

var getZname = z();
alert(getZname());

</script>

Q2:这个会弹出什么呢?

答案:
Q1:Love Music
Q2:Love Movie


Q1剖析:
<script type="text/javascript">
var name = "Love Movie";
function z() {
var name = "Love Music";
function getZname() {
return name;
}
return getZname;
}

var getZname = z();
alert(getZname);
alert(getZname());

</script>

这边需要仔细分析下,getZname是什么玩意。
它其实就是
function getZname() {
return name;
}函数对象,然后我们再执行getZname()方法。


验证一下:
<script type="text/javascript">
var name = "Love Movie";
function z() {
var name = "Love Music";
function getZname() {
return name;
}
function _getZname() {
return "Love Dota";
}
return _getZname;
}

var getZname = z();
alert(getZname);
alert(getZname());

</script>
直接返回“Love Dota”

Q2剖析:
理解完Q1剖析,Q2应该很好理解,同样是一个函数,只不过this指向的那么是全局变量。
验证一下:


<script type="text/javascript">
var name = "Love Movie";
function z() {
var name = "Love Music";
function getZname() {
return this;
}
return getZname;
}

var getZname = z();
alert(getZname);
alert(getZname().name);

</script>

看了上述那么多的例子,究竟什么是闭包呢?

闭包:概念
闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。


2014.01.03 01:45


闭包:待续

先说几句废话:每天都是在洗完澡临睡前有点想看文章的冲动,洗澡前干了什么呢,dota,dota...
上述的javascript闭包说的实在令人乏味,javascript闭包到底是个啥玩意?
当你return的是内部function时,就是一个闭包。内部function会close-over外部function的变量直到内部function结束。

这句话,我的理解是(可能有坑):
(1)闭包最起码得有2个函数:外部函数和内部函数
(2)外部函数必须有返回值,返回值是内部函数
(3)对于变量的操作统一放到内部变量中进行、

举例:



function foo(x) {

var tmp = 3;
return function (y) {
alert(x + y + (++tmp));
}
}
var bar = foo(2); // bar 现在是一个闭包
bar(10);


按照这种思路去理解,其实闭包就是一个封闭的东西(包含了一些变量+一个方法)
function (y) {
alert(x + y + (++tmp));
}

In computer science, a closure is a function together with a referencing environment for the nonlocal names (free variables) of that function.

从技术上来讲,在JS中,每个function都是闭包,因为它总是能访问在它外部定义的数据。

Since scope-defining construction in Javascript is a function, not a code block like in many other languages, what we usually mean by closure in Javascript is a fuction working with nonlocal variables defined in already executed surrounding function.

我去,完全被大神们写的文章搞晕了!(看不得就正常了,因为理论总是令人费解的凑字数,然后让你解开)

<script type="text/javascript">

// 我们可以调用这个匿名方法, 返回这个内部函数,它是一个闭包
var db = (
function() {
var data = {};
return
function(key, val) {
if (val === undefined) {
return data[key]
}
else {
return data[key] = val
}
}

}
)();

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

多多实践!

 

分享到:
评论

相关推荐

    javascript闭包详解中文word版

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

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

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

    JavaScript闭包(closure).pdf

    JavaScript中的闭包是一种高级特性,它是函数和其周围状态(词法作用域)的组合,即使函数在其定义的作用域之外被调用,它仍然能访问到这些状态。这个概念是JavaScript编程中的核心部分,尤其在处理异步操作、模块化...

    Javascript 闭包完整解释

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

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

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

    javascript 闭包

    JavaScript 闭包是一种重要的编程概念,它涉及到函数和作用域的深入理解。闭包的本质是函数内部能够访问并保持对外部变量的引用,即使在函数执行完毕后,这些变量仍然可被内部函数访问和操作。这使得闭包成为实现...

    深入解析Javascript闭包的功能及实现方法

    JavaScript中的闭包是一种强大的特性,它允许函数访问和操作其外部作用域的变量,即使在其外部函数已经执行完毕后。闭包的实现基于JavaScript的作用域链和垃圾回收机制。 1. **闭包的概念** 闭包是一个拥有自身...

    JavaScript闭包

    Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性。本文将以例子入手来介绍Javascript闭包的语言特性,并结合一点 ...

    javaScript闭包技术资料

    ### JavaScript闭包技术详解 #### 一、闭包的基本概念 **闭包**是JavaScript中一个重要的概念,它涉及到函数的执行环境、作用域链等关键要素。简单来说,闭包是一个函数及其相关的引用环境的组合。具体而言,当一...

    闭包javascript.pdf

    标签:javascript 闭包 从给定的文件信息来看,主要围绕JavaScript中的闭包概念进行深入探讨。闭包是计算机科学中一个重要的概念,特别是在函数式编程语言中,如JavaScript,它允许一个函数在定义时捕获并记住其...

    基于javascript 闭包基础分享

    在JavaScript编程中,闭包是一个核心概念,它允许函数记住并访问所在词法作用域,即使当函数在其词法作用域之外执行时。闭包的特性使得它在JavaScript中既神秘又强大。 首先,我们从闭包的定义谈起。在JavaScript中...

    javascript闭包的高级使用方法实例

    JavaScript 闭包是一种强大的特性,它允许函数访问和操作其外部作用域中的变量,即使在外部函数执行完毕后,这些变量仍然保持活动状态。在高级使用中,闭包可以用于实现模块化、数据封装、方法扩展和重载、以及创建...

    Javascript闭包实例详解

    JavaScript中的闭包是一种重要的编程概念,它涉及到函数、作用域和变量持久化。闭包本质上是函数能够记住并访问其词法作用域内的变量,即使该函数已经执行完毕且其外部作用域不再存在。这种特性使得闭包成为...

    javascript 闭包实例下载

    JavaScript 闭包是一种高级编程概念,它在JavaScript中扮演着至关重要的角色,特别是在函数式编程和模块化设计中。闭包本质上是函数和其能够访问的变量(包括局部变量)的组合,即使函数已经执行完毕,这些变量仍然...

    揭开Javascript闭包的真实面目

    【JavaScript 闭包详解】 闭包是JavaScript编程中一个核心且关键的概念,尤其对于初学者而言,理解起来可能有些挑战。闭包本质上是一种特殊的作用域,它可以捕获并存储其外部函数作用域内的变量,即使外部函数已经...

    深入理解_JavaScript_闭包

    JavaScript 闭包是编程语言中的一个关键概念,尤其在JavaScript中有着重要的应用。它涉及到函数、作用域和变量持久化等多个方面,对于提升代码质量、实现模块化以及优化内存管理至关重要。本文将深入探讨JavaScript...

    javascript in action:javascript 实战源码

    5. **原型与继承**:JavaScript使用原型链实现对象继承,掌握如何通过构造函数、原型对象和Object.create方法实现继承关系。 6. **面向对象编程**:了解如何通过类(class)和实例(instance)进行面向对象编程,...

    Web-前端教程36 JS进阶:闭包.zip

    5. **应用场景**:闭包在JavaScript中有很多实用的应用,如模块化开发(通过闭包封装变量和方法)、数据隐私保护(隐藏内部变量)、记忆化(缓存计算结果,提高性能)以及异步操作(例如事件处理和定时器)等。...

    javaScript闭包的理解

    ### JavaScript闭包的理解 #### 一、闭包的定义与特点 闭包是JavaScript中一个非常重要的概念,它指的是一个函数能够访问并操作其外部作用域中的变量的能力。这一特性使得JavaScript具有了一些其他语言不具备的...

Global site tag (gtag.js) - Google Analytics