Javascript学习笔记——闭包

闭包:函数嵌套函数,内部函数可以引用外部函数的参数和变量;参数和变量不会被垃圾回收机制所收回

好处:1.变量可以长期驻扎在内存当中;2.避免全局变量的污染;3.私有成员的存在

示例1:

function aaa(){
    var a=1;
    return function(){
        a++;
        alert(a);
    }
}
var b=aaa();
b();//2
b();//3
alert(a);//报错,因为a是局部变量

示例2:改写示例一,实现代码模块化

var aaa=(function(){
    var a=1;
    return function(){
        a++;
        alert(a);
    }
})();
aaa();//2
aaa();//3
alert(a);//报错,因为a是局部变量

示例3:另一代码模块化例子

var aaa=(function(){
    var a=1;
    function bbb(){
        a++;
        alert(a);
    }
    function ccc(){
        a++;
        alert(a);
    }
    return{
        b:bbb,
        c:ccc
    }
})();
aaa.b();//2
aaa.c();//3
alert(a);//报错
alert(bbb);//报错
alert(ccc);//报错

用法:1.模块化代码;2.在循环中直接找到对应元素的索引

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>闭包</title>
    <script type="text/javascript" src="bibao.js"></script>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div id="div1"></div>
</body>
</html>

bibao.js代码如下

示例4:

window.onload=function(){
    var aLi=document.getElementsByTagName("li");
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick=function(){
            alert(i);//alert的i都是i的length,因为onclick未执行时,for循环已结束
        }
    }
}

示例5:改写示例4,使得实现用法2:方法一

window.onload=function(){
    var aLi=document.getElementsByTagName("li");
    for(var i=0;i<aLi.length;i++){
        (function(i){
            aLi[i].onclick=function(){
            alert(i);
            }
        })(i);

    }
}

示例6:改写示例4,使得实现用法2:方法二

window.onload=function(){
    var aLi=document.getElementsByTagName("li");
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick=(function(i){
            return function(){alert(i);}
        })(i);
    }
}

注意:使用闭包,IE下会发生内存泄漏

示例7:

window.onload=function(){
    var oDiv=document.getElementById(‘div1‘);
    oDiv.onclick=function(){
        alert(oDiv.id);//相互引用,IE下引发内存泄露
    };
        //方法一
    window.onunload=function(){
        oDiv.onclick=null;
    };
}

示例8:

window.onload=function(){
    var oDiv=document.getElementById(‘div1‘);
        //方法二
    var id=oDiv.id;
    oDiv.onclick=function(){
        alert(id);
    };
    oDiv=null;
}
时间: 01-03

Javascript学习笔记——闭包的相关文章

JavaScript 学习笔记— —闭包(一)

一个函数内部还定义了另一个函数,内部函数可以调用外部函数的变量,这就是闭包. function foo(x) { var tmp = 3; function bar(y) { alert(x + y + (++tmp)); } bar(10); } foo(2) 上述代码输出为16,因为bar可以调用foo内的参数x,同样也可以调用foo里的tmp值. function foo(x) { var tmp = 3; return function (y) { alert(x + y + (++tm

JavaScript 学习笔记— —闭包(二)

闭包有三个特性: 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数和变量不会被垃圾回收机制回收 闭包的定义及其优缺点 闭包 是指有权访问另一个函数作用域中的变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量 使用闭包有一个优点,也是它的缺点,就是可以把局部变量驻留在内存中,可以避免使用全局变量.全局变量在每个模块都可调用,这势必将是灾难性的.(所以推荐使用私有的,封装的局部变量.) 一般函数执行完毕后,局部活动对象就被销毁,内存

JavaScript学习笔记【3】数组、函数、服务器端JavaScript概述

笔记来自<JavaScript权威指南(第六版)> 包含的内容: 数组 函数 服务器端JavaScript概述 数组 数组是动态的:根据需要它们会增长或缩减,并且在创建数组时无须声明一个固定的大小或在数组大小变化时无须重新分配空间. 数组可能是稀疏的:索引不一定要连续的,它们之间可以有空缺. 通常,数组的实现是经过优化的,用数字索引来访问数组元素一般来说比访问常规的对象属性要快很多. 数组继承自Array.prototype中的属性,它定义了一套丰富的数组操作方法. 如果省略数组直接量中的某个

Java程序猿的JavaScript学习笔记(1——理念)

计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript学习笔记(3--this/call/apply) Java程序猿的JavaScript学习笔记(4--this/闭包/getter/setter) Java程序猿的JavaScript学习笔记(5--prototype) Java程序猿的JavaScript学习笔记(6--面向对象模拟) Java程

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

javascript学习笔记---ECMAScript语法(引用类型)

引用类型通常叫做类(class). 本教程会讨论大量的 ECMAScript 预定义引用类型. 引用类型 引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象. 本教程会讨论大量的 ECMAScript 预定义引用类型. 从现在起,将重点讨论与已经讨论过的原始类型紧密相关的引用类型. 注意:从传统意义上来说,ECMAScript 并不真正具有类.事实上,除了说明不存在类,在 ECMA-262 中根本没有出现"类"这个词.ECMAScript 定义了"对象定

javascript学习笔记---ECMAScriptECMAScript 对象----定义类或对象

使用预定义对象只是面向对象语言的能力的一部分,它真正强大之处在于能够创建自己专用的类和对象. ECMAScript 拥有很多创建对象或类的方法. 原始的方式 因为对象的属性可以在对象创建后动态定义(后绑定),类似下面的代码: var oCar = new Object; oCar.color = "blue"; oCar.doors = 4; oCar.mpg = 25; oCar.showColor = function() { alert(this.color); };不过这里有一

javascript学习笔记---ECMAScriptECMAScript 对象----修改对象

通过使用 ECMAScript,不仅可以创建对象,还可以修改已有对象的行为. prototype 属性不仅可以定义构造函数的属性和方法,还可以为本地对象添加属性和方法. 创建新方法 通过已有的方法创建新方法Number.prototype.toHexString = function() { return this.toString(16); }; 在此环境中,关键字 this 指向 Number 的实例,因此可完全访问 Number 的所有方法.有了这段代码,可实现下面的操作: var iNu