javascript 闭包Closure理解

javascript 闭包Closure:
1、是这样一种手段:通过它,内部函数在其父函数结束后依然能过够引用其外围函数(outer enclosing function)中的变量。
2、有权访问另一个函数作用域的变量的函数。
3、官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。
闭包产生: 当函数可以记住并访问所在的上下文时,就产生了闭包。
作用:
1、阻止GC回收函数作用域相关变量;
2、读取修改父函数上下文内部的变量;
3、父函数内部和子函数外部连接起来的一座桥梁;
4、结合自执行匿名函数遮蔽全局变量。
实现方式:
1、定义父函数内部自由变量;
2、创建并且返回函数,此函数会"捕获"父函数上下文变量绑定(除了this和arguments)。
闭包的三个事实:
1、javascript允许你引用当前函数以外定义的变量;
2、即使外部函数已经返回,当前函数任然可以引用在外部函数所定义的变量;
3、闭包可以更新外部变量的值。
闭包的应用:
1、在定时器,事件监听器、ajax请求、跨窗口通信,web workers或者其他的异步(或同步)任务中,只要使用了回调函数,实际上就是在使用闭包。
2、模块暴露公共API定义
3、循环和闭包:延时输出循环变量,绑定对象引用
4、函数柯里化

操作方法

  • 01

    // 示例:两个利用闭包来增加代码清晰度的例子 // 找到ID为main的元素 var objEle = document.getElementById('main'); // 更改边框样式 objEle.style.border = '1px solid red'; // 初始化回调函数,该函数会在1秒之后被调用 setTimeout(function() { // 隐藏对象 objEle.display = 'none'; }, 1000); // 一个通用函数,显示一条延迟的警告信息 function delayeAlert(msg, time) { // 初始化内部的回调函数 setTimeout(function() { // 使用从外部函数传入的msg console.log(msg); }, time); } // 调用函数delayeAlert并传入两个参数 delayeAlert('Welconme', 2000);

  • 02

    // 示例:使用闭包技术的函数柯里化 // 定义一个函数,该函数生成一个新的加法函数 function addGenerator(num) { // 返回一个将两个数字相加的简单函数,其中第一个参数重该函数生成器中获取 return function(toAdd) { return num + toAdd; }; } // addFive中包含了一个函数,该函数接受一个参数,然后将该参数与5相加并且返回计算结果 var addFive = addGenerator(5); // 在这里可以看到,给函数addFive传入一个值为4的参数时,得到的结果是9 console.log(addFive(4) === 9);

  • 03

    // 示例:使用匿名函数隐藏全局变量 // 创建一个匿名函数作为包装器来使用 (function() { // 这些变量通常都是作为全局变量 var msg = 'Thanks for visiting!'; // 将一个新函数绑定到全局对象 window.onload = function() { // 使用隐藏变量 console.log(msg); }; // 结束匿名函数定义并执行 })();

  • 04

    // 示例:使用匿名函数来生成创建多个闭包函数所需要的作用域 // ID为main元素 var objElement = document.getElementById('main'); // 要绑定的数组 var onItems = ['click', 'keypress']; // 迭代数组中的每一项 for (var i = 0; i < onItems.length; i++) { // 利用自执行的匿名函数生成作用域 (function(j) { // 记住这一作用域中的值 // 在该作用域的每个item和j的值都是唯一的,不依赖父上下文中所创建的变量 var item = items[j]; // 为元素绑定事件函数 objElement['on' + item] = function() { // item指向的是处于for循环上下文中的父变量 console.log('Thanks for your ' + item); } })(i); }

(0)

相关推荐

  • 百度浏览器5.0版评测

    在很多人眼中,千篇一律不辨雌雄的浏览器e字LOGO实在视觉疲劳。而最近更新的百度浏览器5.0版,其全新形象——太空熊让人眼前一亮。正如每一条船都有他自己的名字,如果您使用过手机版的百度浏览器,对这个与 ...

  • 怎样为IE浏览器的javascript提速

    随着现在网页设计越来越多的应用javascript技术,而且浏览器的Javascript引擎运行速度也成为各大浏览器比拼性能的重要指标,各家浏览器厂商皆宣称他们的浏览器速度更快,希望搅动现存的竞争态势 ...

  • Windows 8 应用框架理解及开发工具使用实例教程

    Windows 操作系统之所以风靡世界,是因为其“易学易用”,从用户的角度出发,让数以万计的非IT人员使用计算机实现娱乐,工作等目的。Windows 8继承Windows桌面的优点,同时提供一种新的用 ...

  • 为IE浏览器的javascript提速

    随着现在网页设计越来越多的应用javascript技术,而且浏览器的Javascript引擎运行速度也成为各大浏览器比拼性能的重要指标,各家浏览器厂商皆宣称他们的浏览器速度更快,希望搅动现存的竞争态势 ...

  • 35款值得网站开发者收藏的JAVASCRIPT图形图表库

    图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等。可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和Web应用和项目的可靠性。 在这篇文章中,我们收集了35款 ...

  • 教你怎么用JavaScript写一个HelloWorld

    JavaScript是web前端必须要会的一门脚本语言,在浏览器上几乎无所不能,弱类型 + 面向对象,加之语法和Java类似,取名为JavaScript. 当小伙伴看到这里,有一点小编可以确定,目前而 ...

  • JavaScript案例——打印乘法口诀表

    通过JavaScript代码,打印乘法口诀表,加深对for循环的理解和认识. 操作方法 01 打开文本编辑器,新建一个文本文档,存储为.html文件,再新建一个文本文档,存储为.js文件.两个文件的名 ...

  • JavaScript中function定义函数的几种方法

    操作方法 01 JavaScript中function定义函数的几种方法: 1.最基本的作为一个本本分分的函数声明使用. function func(){} 或 var func=function() ...

  • 深入理解 __doPostBack

    在我的随笔<Page,你是怎样处理回发事件的?>中曾提出一个疑问,如何得到引起页面PostBack的控件?通过阅读Page类的源码,误打误撞,无意中看到了__EVENTTARGET和__E ...