JavaScript 中级笔记 第四章 闭包

5，闭包
闭包意味着内层的函数可以引用存在于包围它的函数内的变量，即使外层函数的执行已经终止。
让我们先来看一个闭包的例子。

function add(num){
return function(toAdd){
return num+toAdd; //代码①
}
}
var addFive = add(5); //此时addFive为function(toAdd){return num+toAdd;}
var count = addFive(3); //此时count为 num+toAdd
alert(count);//8

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

代码①是处于函数内层，不过它可以使用外层的变量num。
闭合还能解决另一个常见的Js问题，全局变量的影响。
通过自动执行匿名函数组合闭包，便可把原本属于全局的变量隐藏起来。看下面的例子：

(function(){
var msg = "Hello";
window.onunload = function(){
alert(msg);//输出Hello
}
})()
//alert(msg);//出现未定义

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

在使用setTimeout时，我们经常也用上了闭包。

demo

window.onload = function(){
var obj = document.getElementById("abc");
obj.style.border = "1px solid #000";
setTimeout(function(){
obj.style.color = "red";
},1000)
function DeAlert(msg , time){
setTimeout( function(){
alert(msg);
},time)
}
DeAlert("hello",2000);
}

CssRain

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

以这种方式使用setTimeout()，可以避免一些问题。
当然使用闭包 也会带来一些问题。如下代码所示：

demo

window.onload = function(){
var ul = document.getElementById("abc");
var li = document.getElementsByTagName("li");
for(var i=0;i

    • AAA
    • BBB
    • CCC

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    单击li弹出的序号为 3 ，并不是正确的序号，它引用的值是最后一次的赋值。
    我们可以使用下面代码来解决：

    window.onload = function(){
    var ul = document.getElementById("abc");
    var li = document.getElementsByTagName("li");
    for(var i=0;i

  • [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    通过使用闭包对作用域的控制，从而符合了我们的要求。
    上面的代码可以分解为：

    window.onload = function(){
    var ul = document.getElementById("abc");
    var li = document.getElementsByTagName("li");
    function a(){
    var b = 0 ;
    li[b].onclick = function(){
    alert("你单击的是第"+b+"个li。");
    }
    }
    function b(){
    var b = 1 ;
    li[b].onclick = function(){
    alert("你单击的是第"+b+"个li。");
    }
    }
    function c(){
    var b = 2 ;
    li[b].onclick = function(){
    alert("你单击的是第"+b+"个li。");
    }
    }
    a();
    b();
    c();
    }

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    闭包的概念不容易掌握，我也是花了大量时间和精力才理解。
    6，小结
    笔记（2），（3），（4）讲解了 JavaScript中的几个重要的内容，包括引用，函数重载，作用域，上下文对象和闭包。
    引用的关键内容： 指针，数组引用，字符串引用，区别，传值，传址。
    函数重载的关键内容： 参数的数量，参数的类型，arguments，伪数组，typeof，constructor，区别-字符串和对象。
    作用域的关键内容： 函数划分，全局作用域，全局对象，window对象的属性，局部作用域，显式声明，隐式声明。
    上下文对象的关键内容： this变量，call，apply，参数区别，数组。
    闭包的关键内容： 内层函数，外层函数，变量，setTimeout，闭包问题，最后一次的赋值，闭包和作用域。

    • 赞 (0)

    相关推荐

    • JavaScript 中级笔记 第四章 闭包

      5,闭包 闭包意味着内层的函数可以引用存在于包围它的函数内的变量,即使外层函数的执行已经终止. 让我们先来看一个闭包的例子. function add(num){ return function(toAdd){ return num+toAdd; //代码① } } var addFive = add(5); //此时addFive为function(toAdd){return num+toAdd;} var count = addFive(3); //此时count为 num+toAdd al

    • JavaScript 中级笔记 第五章 面向对象的基础

      一,面向对象的基础 对象是JavaScript的基础.从最基本的层次上说,对象是一系列属性的集合. 1,对象的创建 //创建一个新的Object对象,存放在obj变量中 var obj1 = new Object(); //设置属性 obj1.value = 5; obj1.click = function(){ alert("Hello"); } //另一种方式定义一个对象,以键值(key/value)的方式定义属性 var obj2 = { value : 5, click : f

    • JavaScript 中级笔记 第三章

      3,作用域 所有的面向对象的语言都有某种形式的作用域,JavaScript也不例外.在JavaScript里,作用域是由函数划分的,而不是由块(while,if之类的)来划分的. 我们先来看一个简单的作用域的例子. var foo = "a"; //设置全局变量foo if(true){ var foo = "b";//在if块中,把foo的值改为b,注意:此时还在全局作用域中 } alert(foo); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    • javascript学习笔记（四）function函数部分

      函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. Jscript 支持两种函数:一类是语言内部的函数(如eval() ),另一类是自己创建的. 在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它.(该变量的作用域是局部的). 您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量. 函数的调用方式 1.普通调用:functionName(实际参数...) 2.通过指向函数的变量去调用: var  myVar

    • MYSQL必知必会读书笔记第四章之检索数据

      MYSQL必知必会读书笔记第四章之检索数据

      MySQL是一种开放源代码的关系型数据库管理系统(RDBMS),MySQL数据库系统使用最常用的数据库管理语言--结构化查询语言(SQL)进行数据库管理. 使用Select语句返回的数据,可能会发现显示的数据会与其他的地方顺序不同.出现这种情况很正常.如果没有明确排序查询结果.则返回的数据没有特殊意义.返回数据的顺序可能是是数据被添加到表中的顺序,也可能不是.只要返回相同数目的行,就是正常. 注意:SQL语句和大小写 请注意,SQL语句不区分大小写,因此select和SELECT是相同的.同样,

    • JavaScript 中级笔记 第一章

      JavaScript 中级笔记 第一章

      一,回顾 首先先来回顾下DOM和事件. 1,DOM DOM在JavaScript中是应用最广泛的,大部分Web开发的编程语言都提供了相关的实现.给了开发者一个统一的接口. 看下面的例子: demo /* 示例操作DOM元素 */ window.onload = function(){ //给Dom元素添加颜色 var li = document.getElementsByTagName("li"); for(var i=0;i 李老师-英语 张老师-数学 刘老师-物理 [Ctrl+A

    • JavaScript 中级笔记 第二章

      1,引用 引用是一个指向对象实际位置的指针.看下面的使用引用的例子: /*示例引用*/ var obj = new Object(); //定义一个空对象 var newObj = obj; //定义一个新对象引用. obj.name = "rain";//修改原对象的属性 alert( newObj.name ); alert( obj.name == newObj.name );//由此可以证明它们是引用的同一个对象 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 本例

    • JavaScript Event学习第四章 传统的事件注册模型

      在最古老的JavaScript浏览器里注册事件只能通过内联模式.自从DHTML从根本上改变了你操作页面的方法,事件的注册就必须有扩展性而且要有很强的适应性.所以就必须有相应的事件模型.Netscape在第三代浏览器中就开始了,IE在第四代浏览器开始. 因为Netscape 3就开始支持这种新的事件注册模型,在浏览器战争前就是事实上的标准.所以微软不得不也是最后一次为了网上那些数不清的使用了Netscape事件处理模型的页面在兼容性上做出了让步. 所以这两个浏览器,事实上也是所有的浏览器都支持下面

    • JavaScript 学习笔记（四）

      本地对象 ①Array类 ②Date类 对象的类型 内置对象 ①Global对象 ②Math对象 宿主对象 今天继续学习JS中的对象,昨天学完了本地对象中的两个重要对象Array和Date.今天看下内置对象Global对象和Math对象. Global对象 encodeURI()方法用于处理完整的URI,去除一些空格等字符. eval()方法可计算某个字符串,并执行其中的的 JavaScript 代码. Math对象 min()方法和max()方法用于判断一组数中的最大值和最小值.这两个方法都可

    • javascript 学习笔记（四） 倒计时程序代码

      首先看全部完整代码: countDown test function countDown(endDate) { var now = new Date(); var deadtime = document.getElementById(endDate); var deadline = new Date(deadtime.value); //本地时间与格林威治标准时间 (GMT) 的分钟差 var timeDiff = now.getTimezoneOffset(); //此处有些不解,如果把分钟差

    随机推荐