JavaScript闭包实例详解

一、充电

1、一切（引用类型）都是对象，对象是属性的集合。

2、函数是一种对象，但是函数却不像数组一样——你可以说数组是对象的一种，因为数组就像是对象的一个子集一样。但是函数与对象之间，却不仅仅是一种包含和被包含的关系，函数和对象之间的关系比较复杂，甚至有一点鸡生蛋蛋生鸡的逻辑。

function Fn() {this.name = '王福朋';this.year = 1988;}
var fn1 = new Fn();
var obj = { a: 10, b: 20 };等价于var obj = new Object();
obj.a = 10;obj.b = 20;
var arr = [5, 'x', true];等价于var arr = new Array();
arr[0] = 5;arr[1] = 'x';arr[2] = true;

对象是函数创建的，而函数却又是一种对象。

3、每个函数都有一个属性叫做prototype。这个prototype的属性值是一个对象（属性的集合，再次强调！），默认的只有一个叫做constructor的属性，指向这个函数本身。

4、每个对象都有一个__proto__属性，指向创建该对象的函数的prototype。这个__proto__是一个隐藏的属性，JavaScript不希望开发者用到这个属性值，有的低版本浏览器甚至不支持这个属性值。obj.__proto__=== Object.prototype

二、闭包

1、闭包的基本概念

有权访问另一个函数作用域中的变量的函数。简单理解为“定义在一个函数内部的函数”例如：

function createComparisonFunction(propertyName){
return function(object1,object2){//匿名函数
value1=object1[propertyName];
value2=object2[propertyName];
if(value1<value2){
return -1;
}else if(value1>value2){
return 1;
}else{
return 0;
}
}
}
//创建函数
var compareNames=createComparisonFunction("name");
//调用函数
var result=compareNames({name:"Nicolas"},{name:"Greg"});
//解除对匿名函数的引用（以便释放内存）
compareNames=null;
alert(result);//1

(1).好处：保护函数内的变量安全,加强了封装性；在内存中维持一个变量（缓存）；匿名自执行函数；模拟面向对象编程。

(2).应用场景：使用闭包代替全局变量；函数外或在其他函数中访问某一函数内部的参数；包装相关功能；为节点循环绑定click事件，在事件函数中使用当次循环的值或节点，而不是最后一次循环的值或节点；

(3).缺点：常驻内存，会增大内存使用量，使用不当很容易造成内存泄露，更重要的是，对闭包的使用不当会造成无效内存的产生。

只要存在调用内部函数的可能，JavaScript就需要保留被引用的函数。而且JavaScript运行时需要跟踪引用这个内部函数的所有变量，直到最后一个变量废弃，JavaScript的垃圾收集器才能释放相应的内存空间。父函数定义的变量在子函数的作用域链中，子函数没有被销毁，其作用域链中所有变量和函数就会被维护，不会被销毁。

2、闭包的用途

闭包有两个用途，一是方便实现嵌套的回调函数，二是隐藏对象的细节。

对于前者，NodeJS的编程风格已经可以说明问题，后者对于函数内部的局部变量外部是不可见的，但可以提供访问函数来访问和修改相应的局部变量，从而实现OO封装的意图。

(1)、简单的例子

首先从一个经典错误谈起，页面上有若干个div， 我们想给它们绑定一个onclick方法，于是有了下面的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="jquery.js"></script>
<script>
$(document).ready(function() {
var spans = $("#divTest span");
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
alert(i);
}
}
});
</script>
<style>
#divTest{
margin-top:30px;
margin-bottom:40px;
}
span{
border-color:#3C0;
border-style:solid;
margin-bottom:5px;
padding:10px 30px 10px 30px;
border-radius:10px
}
</style>
<title>无标题文档</title>
</head>
<body>
<div id="divTest">
<span>0</span> <span>1</span> <span>2</span> <span>3</span>
</div>
</body>
</html>

很简单的功能可是却偏偏出错了，每次alert出的值都是4，简单的修改就好使了

$(document).ready(function() {
var spans = $("#divTest span");
for (var i = 0; i < spans.length; i++) {
(function(num){//匿名函数表达式
spans[i].onclick = function() {
alert(num);
}
})(i);//立即执行，并且把i的值传给num
}
});

上面代码在页面加载后就会执行，当i的值为4的时候，判断条件不成立，for循环执行完毕，但是因为每个span的onclick方法这时候为内部函数，所以i被闭包引用，内存不能被销毁，i的值会一直保持4，直到程序改变它或者所有的onclick函数销毁（主动把函数赋为null或者页面卸载）时才会被回收。这样每次我们点击span的时候，onclick函数会查找i的值（作用域链是引用方式），一查等于4，然后就alert给我们了。而第二种方式是使用了一个立即执行的函数又创建了一层闭包，函数声明放在括号内就变成了表达式，后面再加上括号括号就是调用了，这时候把i当参数传入，函数立即执行，num保存每次i的值。

（2）、内部函数

让我们从一些基础的知识谈起,首先了解一下内部函数。内部函数就是定义在另一个函数中的函数。例如：

function outerFn () {
function innerFn () {}
}

innerFn就是一个被包在outerFn作用域中的内部函数。这意味着，在outerFn内部调用innerFn是有效的，而在outerFn外部调用innerFn则是无效的。下面代码会导致一个JavaScript错误：

function outerFn() {
document.write("Outer function<br/>");
function innerFn() {
document.write("Inner function<br/>");
}
}
innerFn();

不过在outerFn内部调用innerFn，则可以成功运行：

function outerFn() {
document.write("Outer function<br/>");
function innerFn() {
document.write("Inner function<br/>");
}
innerFn();
}
outerFn();

（3）、伟大的逃脱

JavaScript允许开发人员像传递任何类型的数据一样传递函数，也就是说，JavaScript中的内部函数能够逃脱定义他们的外部函数。

逃脱的方式有很多种，例如可以将内部函数指定给一个全局变量：

var globalVar;
function outerFn() {
document.write("Outer function<br/>");
function innerFn() {
document.write("Inner function<br/>");
}
globalVar = innerFn;
}
outerFn();
globalVar();

调用outerFn时会修改全局变量globalVar，这时候它的引用变为innerFn，此后调用globalVar和调用innerFn一样。这时在outerFn外部直接调用innerFn仍然会导致错误，这是因为内部函数虽然通过把引用保存在全局变量中实现了逃脱，但这个函数的名字依然只存在于outerFn的作用域中。
也可以通过在父函数的返回值来获得内部函数引用

function outerFn() {
document.write("Outer function<br/>");
function innerFn() {
document.write("Inner function<br/>");
}
return innerFn;
}
var fnRef = outerFn();
fnRef();

这里并没有在outerFn内部修改全局变量，而是从outerFn中返回了一个对innerFn的引用。通过调用outerFn能够获得这个引用，而且这个引用可以可以保存在变量中。

这种即使离开函数作用域的情况下仍然能够通过引用调用内部函数的事实，意味着只要存在调用内部函数的可能，JavaScript就需要保留被引用的函数。而且JavaScript运行时需要跟踪引用这个内部函数的所有变量，直到最后一个变量废弃，JavaScript的垃圾收集器才能释放相应的内存空间。

说了半天总算和闭包有关系了，闭包是指有权限访问另一个函数作用域的变量的函数，创建闭包的常见方式就是在一个函数内部创建另一个函数，就是我们上面说的内部函数，所以刚才说的不是废话，也是闭包相关的。

（4）、变量的作用域

内部函数也可以有自己的变量，这些变量都被限制在内部函数的作用域中：

function outerFn() {
document.write("Outer function<br/>");
function innerFn() {
var innerVar = 0;
innerVar++;
document.write("Inner function\t");
document.write("innerVar = "+innerVar+"<br/>");
}
return innerFn;
}
var fnRef = outerFn();
fnRef();
fnRef();
var fnRef2 = outerFn();
fnRef2();
fnRef2();

每当通过引用或其它方式调用这个内部函数时，就会创建一个新的innerVar变量，然后加1，最后显示

Outer function
Inner function innerVar = 1
Inner function innerVar = 1
Outer function
Inner function innerVar = 1
Inner function innerVar = 1

内部函数也可以像其他函数一样引用全局变量：

var globalVar = 0;
function outerFn() {
document.write("Outer function<br/>");
function innerFn() {
globalVar++;
document.write("Inner function\t");
document.write("globalVar = " + globalVar + "<br/>");
}
return innerFn;
}
var fnRef = outerFn();
fnRef();
fnRef();
var fnRef2 = outerFn();
fnRef2();
fnRef2();

现在每次调用内部函数都会持续地递增这个全局变量的值：

Outer function
Inner function globalVar = 1
Inner function globalVar = 2
Outer function
Inner function globalVar = 3
Inner function globalVar = 4

但是如果这个变量是父函数的局部变量又会怎样呢？因为内部函数会引用到父函数的作用域（有兴趣可以了解一下作用域链和活动对象的知识），内部函数也可以引用到这些变量

function outerFn() {
var outerVar = 0;
document.write("Outer function<br/>");
function innerFn() {
outerVar++;
document.write("Inner function\t");
document.write("outerVar = " + outerVar + "<br/>");
}
return innerFn;
}
var fnRef = outerFn();
fnRef();
fnRef();
var fnRef2 = outerFn();
fnRef2();
fnRef2();

这一次结果非常有意思，也许或出乎我们的意料

Outer function
Inner function outerVar = 1
Inner function outerVar = 2
Outer function
Inner function outerVar = 1
Inner function outerVar = 2

我们看到的是前面两种情况合成的效果，通过每个引用调用innerFn都会独立的递增outerVar。也就是说第二次调用outerFn没有继续沿用outerVar的值，而是在第二次函数调用的作用域创建并绑定了一个一个新的outerVar实例，两个计数器完全无关。

当内部函数在定义它的作用域的外部被引用时，就创建了该内部函数的一个闭包。这种情况下我们称既不是内部函数局部变量，也不是其参数的变量为自由变量，称外部函数的调用环境为封闭闭包的环境。从本质上讲，如果内部函数引用了位于外部函数中的变量，相当于授权该变量能够被延迟使用。因此，当外部函数调用完成后，这些变量的内存不会被释放（最后的值会保存），闭包仍然需要使用它们。

（5）、闭包之间的交互

当存在多个内部函数时，很可能出现意料之外的闭包。我们定义一个递增函数，这个函数的增量为2

function outerFn() {
var outerVar = 0;
document.write("Outer function<br/>");
function innerFn1() {
outerVar++;
document.write("Inner function 1\t");
document.write("outerVar = " + outerVar + "<br/>");
}
function innerFn2() {
outerVar += 2;
document.write("Inner function 2\t");
document.write("outerVar = " + outerVar + "<br/>");
}
return { "fn1": innerFn1, "fn2": innerFn2 };
}
var fnRef = outerFn();
fnRef.fn1();
fnRef.fn2();
fnRef.fn1();
var fnRef2 = outerFn();
fnRef2.fn1();
fnRef2.fn2();
fnRef2.fn1();

我们映射返回两个内部函数的引用，可以通过返回的引用调用任一个内部函数，结果：

Outer function
Inner function 1 outerVar = 1
Inner function 2 outerVar = 3
Inner function 1 outerVar = 4
Outer function
Inner function 1 outerVar = 1
Inner function 2 outerVar = 3
Inner function 1 outerVar = 4

innerFn1和innerFn2引用了同一个局部变量，因此他们共享一个封闭环境。当innerFn1为outerVar递增一时，久违innerFn2设置了outerVar的新的起点值，反之亦然。我们也看到对outerFn的后续调用还会创建这些闭包的新实例，同时也会创建新的封闭环境，本质上是创建了一个新对象，自由变量就是这个对象的实例变量，而闭包就是这个对象的实例方法，而且这些变量也是私有的，因为不能在封装它们的作用域外部直接引用这些变量，从而确保了了面向对象数据的专有性。

3、模仿块级作用域

JavaScript是函数作用域（function scope），没有块级作用域。无论函数体内的变量在什么地方声明，对整个函数都是可见的，即JavaScript函数里声明的所有变量都被提前到函数体的顶部，只是提前变量声明，变量的赋值还是保留在原位置。

匿名函数可以用来模仿块级作用域避免变量提前声明为全局变量，用作块级作用域（通常称为私有作用域）的匿名函数的语法如下：

(function(){
//这里是块级作用域
})();

例如：

function output(count){
(function(){
for(var i=0;i<count;i++){
alert(i);
}
})();
alert(i);
}
output(4);

在匿名函数中定义的任何变量，都会在执行结束时被销毁。因此，变量i只能在循环中使用，使用后即被销毁。

4、私有变量

我们把有权访问私有变量和私有函数的公有方法称为特权方法。

（1）、构造函数中定义特权方法

function Person(name){
//name为私有变量
this.getName=function(){//特权方法
return name;
};
this.setName=function(value){//特权方法
name=value
};
}
var person=new Person("zoumiao");
alert(person.getName());
person.setName("zouzou");
alert(person.getName());
var person1=new Person("zou");
alert(person1.getName());//"zou"
alert(person.getName());//"zouzou"

在构造函数中定义特权方法也有一个缺点，那就是你必须使用构造函数模式来达到这个目的，构造函数模式的缺点就是针对每一个实例都会创建同样一组新方法，使用静态私有变量来实现特权方法就可以避免这个问题。

（2）、静态私有变量

通过在私有作用域中定义私有变量或函数，同样也可以创建特权方法，其基本模式如下：

(function(){
var name='';//静态的、由所有实例共享的属性
Person=function(value){//全局构造函数
name=value;
}
Person.prototype.getName=function(){//公有/特权方法
return name;
}
Person.prototype.setName=function(value){//公有/特权方法
name=value;
}
})();
var person=new Person("zoumiao");
alert(person.getName());
person.setName("zouzou");
alert(person.getName());
var person1=new Person("zou");
alert(person1.getName());//"zou"
alert(person.getName());//"zou"

这个模式与构造函数中定义特权方法的区别，就在于私有变量和函数是由实例共享的。

赞 (0)

相关推荐

  • js闭包用法实例详解

    本文实例讲述了js闭包用法.分享给大家供大家参考,具体如下: 引言 在公司中需要写一个js脚本来进行网站的统计,实现类似百度统计或者站长统计的功能,在实现的过程中自己感觉写的代码还是可以的,因为之前的js代码都是这些写,但是在组长代码走查的时候却非常的不满意,因为我们在js中写的方法都是全局的方法,因为我们写的东西需要嵌入到别人的界面中,所以这些全局的东西很可能会和别人的东西重名从而引发错误,所以说组长就给我留下一句话:用js闭包包起来. 变量作用域 我们都非常的熟悉变量的作用域就分为:全局变量

  • JavaScript中闭包的写法和作用详解

    1.什么是闭包 闭包是有权访问另一个函数作用域的变量的函数. 简单的说,Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内.而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量.参数和声明的其他内部函数.当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包. 2.变量的作用域 要理解闭包,首先要理解变量的作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变

  • Javascript闭包与函数柯里化浅析

    闭包和柯里化都是JavaScript经常用到而且比较高级的技巧,所有的函数式编程语言都支持这两个概念,因此,我们想要充分发挥出JavaScript中的函数式编程特征,就需要深入的了解这两个概念,闭包事实上更是柯里化所不可缺少的基础. 一.柯里化的概念 在计算机科学中,柯里化是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术.这个技术由Christopher Strachey以逻辑学家 Haskell Curry 命名的,尽管

  • 通俗易懂地解释JS中的闭包

    1. "闭包就是跨作用域访问变量." [示例一] var name = 'wangxi' function user () { // var name = 'wangxi' function getName () { console.log(name) } getName() } user() // wangxi 在 getName 函数中获取 name,首先在 getName 函数的作用域中查找 name,未找到,进而在 user 函数的作用域中查找,同样未找到,继续向上回溯,发现在

  • JavaScript闭包和范围实例详解

    本文实例分析了JavaScript闭包和范围.分享给大家供大家参考,具体如下: 1. if (!("a" in window)) { var a = 1; } alert(a); [分析]代码含义:如果window不包含属性a,就声明一个变量a并赋值为1 ①JS引擎会先扫描所有的变量声明 ②所有的全局变量都是window的属性 ③变量声明和赋值一起用时,Js引擎会自动将它分成两部分:变量声明提前,变量赋值没有(不将赋值提前是因为他有可能影响代码执行出不可预期的结果) 所以代码执行顺序等

  • 详解JavaScript的闭包、IIFE、apply、函数与对象

    详解JavaScript的闭包、IIFE、apply、函数与对象

    目录 一.闭包(Closure) 1.1.闭包相关的问题 1.2.理解闭包 二.对象 2.1.对象常量(字面量) 2.2.取值 2.3.枚举(遍历) 2.4.更新与添加 2.5.对象的原型 2.6.删除 2.7.封装 三.函数 3.1.参数对象 (arguments) 3.2.构造函数 3.3.函数调用 3.3.1.call 3.3.2.apply 3.3.3.caller 3.3.4.Callee 3.5.立即执行函数表达式 (IIFE) 3.5.1.匿名函数与匿名对象 3.5.2.函数与函数

  • 深入理解javascript函数参数与闭包

    最近在学习javascript的函数,函数是javascript的一等对象,想要学好javascript,就必须深刻理解函数.本人把学习的过程整理成文章,一是为了加深自己函数的理解,二是给读者提供学习的途径,避免走弯路.内容有些多,但都是笔者对于函数的总结. 1.函数参数 1.1:参数是什么 1.2:参数的省略 1.3:参数默认值 1.4:参数传递方式 1.5:同名参数 1.6:arguments对象 2.闭包 2.1:闭包定义 2.2:立即调用的函数表达式(IIFE, Immediately

  • JS 循环li添加点击事件 （闭包的应用）

    废话不多说了,直接给大家贴代码了,具体代码如下所述: var aLi = document.querySelectorAll('.article-tab li'); for (var i = 0; i <= aLi.length; i++) { (function(){ var p = i aLi[i].onclick = function() { alert(p); } })(); } 以上所述是小编给大家介绍的JS 循环li添加点击事件 (闭包的应用),希望对大家有所帮助,如果大家有任何疑问

  • 浅谈JavaScript for循环 闭包

    有个网友问了个问题,如下的html,为什么每次输出都是5,而不是点击每个p,就alert出对应的1,2,3,4,5. <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>闭包演示</title> <script type="text/javascript&quo

  • JavaScript闭包实例详解

    一.充电 1.一切(引用类型)都是对象,对象是属性的集合. 2.函数是一种对象,但是函数却不像数组一样--你可以说数组是对象的一种,因为数组就像是对象的一个子集一样.但是函数与对象之间,却不仅仅是一种包含和被包含的关系,函数和对象之间的关系比较复杂,甚至有一点鸡生蛋蛋生鸡的逻辑. function Fn() {this.name = '王福朋';this.year = 1988;} var fn1 = new Fn(); var obj = { a: 10, b: 20 };等价于var obj

  • Kotlin 语言中调用 JavaScript 方法实例详解

    Kotlin 语言中调用 JavaScript 方法实例详解 Kotlin 已被设计为能够与 Java 平台轻松互操作.它将 Java 类视为 Kotlin 类,并且 Java 也将 Kotlin 类视为 Java 类.但是,JavaScript 是一种动态类型语言,这意味着它不会在编译期检查类型.你可以通过动态类型在 Kotlin 中自由地与 JavaScript 交流,但是如果你想要 Kotlin 类型系统的全部威力 ,你可以为 JavaScript 库创建 Kotlin 头文件. 内联 J

  • Javascript复制实例详解

    在做项目时有一个需求,是需要复制内容到剪切板,因为有众多浏览器,所以要兼容性很重要. 1.最简单的copy,只能在IE下使用 使用clipboardData方法 <script type="text/javascript"> function copy(){ window.clipboardData.setData("text",document.getElementById("name").value); alert("T

  • JavaScript内存管理与闭包实例详解

    JavaScript内存管理与闭包实例详解

    目录 1. 内存管理的理解 1.1 认识内存管理 1.2 JavaScript的内存管理 2. 垃圾回收(GC) 2.1 认识垃圾回收 2.2 GC算法 – 引用计数 2.3 GC算法 – 标记清除 2.4 其他算法优化补充 3. 闭包的概念理解 3.1 JavaScript的函数式编程 3.2 定义 4. 闭包的内存流程 5. 闭包的内存泄漏 5.1 认识内存泄露 5.2 内存泄露的测试 5.3 浏览器的优化 总结 1. 内存管理的理解 1.1 认识内存管理 不管什么样的编程语言,在代码的执行

  • JavaScript 闭包机制详解及实例代码

    JavaScript 闭包机制详解及实例代码

    首先要区分两个概念,一是匿名函数,一是闭包. 所谓匿名函数,就是创建函数没有给定函数名.经常出现的包括函数表达式,就是定义一个匿名函数,然后将函数赋值给某个变量,而此时这个变量就相当于该函数的函数名,例如: var sayHi = function(){ alert("Hi"); }; //注意这个分号 sayHi(); //调用函数 还有一种常用匿名函数的情况是回调函数,如 JQuery 中常用到的: $("p").click(function(){ alert(

  • JavaScript 引用类型实例详解【数组、对象、严格模式等】

    本文实例讲述了JavaScript 引用类型.分享给大家供大家参考,具体如下: 数组 在ECMAScript中数组是非常常用的引用类型 ECMAScript所定义的数组和其他语言中的数组有着很大的区别 数组也是一种对象 创建数组 //方法一 var arr = new Array(); //方法二 var arr1 = []; 特点 数组即一组数据的集合 js数组更加类似java的map容器.长度可变,元素类型任意 数组长度随时可变!随时可以修改!(length属性) var arr1 = [1

  • Python中的闭包实例详解

    一般来说闭包这个概念在很多语言中都有涉及,本文主要谈谈python中的闭包定义及相关用法.Python中使用闭包主要是在进行函数式开发时使用.详情分析如下: 一.定义 python中的闭包从表现形式上定义(解释)为:如果在一个内部函数里,对在外部作用域(但不是在全局作用域)的变量进行引用,那么内部函数就被认为是闭包(closure).这个定义是相对直白的,好理解的,不像其他定义那样学究味道十足(那些学究味道重的解释,在对一个名词的解释过程中又充满了一堆让人抓狂的其他陌生名词,不适合初学者).下面

  • Javascript事件实例详解

    document是位于html标签之上的,可以说是权力最大的.下面的实例当你单击页面上的任何位置都会弹出"a",正是运用了document的特性. 复制代码 代码如下: <script>             document.onclick=function(){         alert('a');     }; </script> 获取鼠标位置clientX,clientY---注意这里仅仅只是可视区的鼠标位置 复制代码 代码如下: <scrip

  • JavaScript正则表达式实例详解

    废话不多说了,直接把小编多年总结汇总的代码奉献给大家 <script type="text/javascript"> var str2 = "YouCan3You8Up,no can no bibi!"; var reg = /^[0-9a-zA-Z]{1,}$/; console.log(reg.test(str2)); //正则表达式的一般形式 //正则表达式对象的创建: //var 对象名 = new RegExp(参数1,参数2); //参数1:

  • JavaScript“尽快失败”的原则实例详解

    我第一次听说编码原则中有"尽快失败"这一条时,觉得很奇怪,为什么代码要失败?应该成功才对呀.但事实上,当代码在遇到错误的时候应该尽快的终止.为了检测各种状态,我们需要频繁的创建if语句与条件分支,而这些条件检测的结果不是成功就是失败(true&&false).之所以会有这么多的条件检测语句,是因为如果不在构建过程中植入这些监测点(checkpoint),那么浏览器内核会执行很多无用的代码,并占用许多宝贵的CPU性能和处理时间,拖慢网站加载速度. 根据那些判断结果为fal

随机推荐