详谈JavaScript函数闭包使用及注意事项代码详解-js教程-PHP中文网

首页

web前端

js教程

详谈JavaScript函数闭包使用及注意事项代码详解

伊谢尔伦

Jul 25, 2017 pm 03:04 PM

javascript js 注意事项

闭包的英文单词是closure，这是JavaScript中非常重要的一部分知识，因为使用闭包可以大大减少我们的代码量，使我们的代码看上去更加清晰等等，总之功能十分强大。

闭包的含义：闭包说白了就是函数的嵌套，内层的函数可以使用外层函数的所有变量，即使外层函数已经执行完毕（这点涉及JavaScript作用域链）。

示例一

function checkClosure(){
    var str = &#39;rain-man&#39;;
    setTimeout(
        function(){ alert(str); } //这是一个匿名函数
    , 2000);
}
checkClosure();

登录后复制

这个例子看上去十分的简单，仔细分析下它的执行过程还是有许多知识点的：checkClosure函数的执行是瞬间的（也许用时只是0.00001毫秒），在checkClosure的函数体内创建了一个变量str，在checkClosure执行完毕之后str并没有被释放，这是因为setTimeout内的匿名函数存在这对str的引用。待到2秒后函数体内的匿名函数被执行完毕,str才被释放。

示例二，优化代码

function forTimeout(x, y){
    alert(x + y);
}
function delay(x , y  , time){
    setTimeout(&#39;forTimeout(&#39; +  x + &#39;,&#39; +  y + &#39;)&#39; , time);    
}
/**
 * 上面的delay函数十分难以阅读，也不容易编写，但如果使用闭包就可以让代码更加清晰
 * function delay(x , y , time){
 *     setTimeout(
 *         function(){
 *             forTimeout(x , y) 
 *         }          
 *     , time);   
 * }
 */

登录后复制

匿名函数最大的用途是创建闭包（这是JavaScript语言的特性之一），并且还可以构建命名空间，以减少全局变量的使用。

示例三：

var oEvent = {};
(function(){ 
    var addEvent = function(){ /*代码的实现省略了*/ };
    function removeEvent(){}
    oEvent.addEvent = addEvent;
    oEvent.removeEvent = removeEvent;
})();

登录后复制

示例四：

var rainman = (function(x , y){
    return x + y;
})(2 , 3);
/**
 * 也可以写成下面的形式，因为第一个括号只是帮助我们阅读，但是不推荐使用下面这种书写格式。
 * var rainman = function(x , y){
 *    return x + y;
 * }(2 , 3);
 */

登录后复制

在这里我们创建了一个变量rainman，并通过直接调用匿名函数初始化为5，这种小技巧有时十分实用。

示例五：

var outer = null;
(function(){
    var one = 1;
    function inner (){
        one += 1;
        alert(one);
    }
    outer = inner;
})();
outer();    //2
outer();    //3
outer();    //4

登录后复制

这段代码中的变量one是一个局部变量（因为它被定义在一个函数之内），因此外部是不可以访问的。但是这里我们创建了inner函数，inner函数是可以访问变量one的；又将全局变量outer引用了inner，所以三次调用outer会弹出递增的结果。

注意：闭包允许内层函数引用父函数中的变量，但是该变量是最终值

示例六：

/**
 * <body>
 * <ul>
 *     <li>one</li>
 *     <li>two</li>
 *     <li>three</li>
 *     <li>one</li>
 * </ul>
 */
var lists = document.getElementsByTagName(&#39;li&#39;);
for(var i = 0 , len = lists.length ; i < len ; i++){
    lists[ i ].onmouseover = function(){
        alert(i);    
    };
}

登录后复制

你会发现当鼠标移过每一个

解决方法一：

var lists = document.getElementsByTagName(&#39;li&#39;);
for(var i = 0 , len = lists.length ; i < len ; i++){
    (function(index){
        lists[ index ].onmouseover = function(){
            alert(index);    
        };                    
    })(i);
}

登录后复制

解决方法二：

var lists = document.getElementsByTagName(&#39;li&#39;);
for(var i = 0, len = lists.length; i < len; i++){
    lists[ i ].$$index = i;    //通过在Dom元素上绑定$$index属性记录下标
    lists[ i ].onmouseover = function(){
        alert(this.$$index);    
    };
}

登录后复制

解决方法三：

function eventListener(list, index){
    list.onmouseover = function(){
        alert(index);
    };
}
var lists = document.getElementsByTagName(&#39;li&#39;);
for(var i = 0 , len = lists.length ; i < len ; i++){
    eventListener(lists[ i ] , i);
}

登录后复制

以上是详谈JavaScript函数闭包使用及注意事项代码详解的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7694

Java教程

1640

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1229

显示更多

Related knowledge

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

鸣潮测试期间注意事项介绍 Mar 13, 2024 pm 08:13 PM

在鸣潮测试期间，请避免进行系统升级、恢复出厂设置和换件等操作，以防信息丢失导致游戏登录异常。特别提醒，测试期暂无申诉通道，请您务必小心处理。鸣潮测试期间注意事项介绍答：不要升级系统、还原出厂设置、更换设备组件等。注意事项介绍：1、请在测试期内谨慎升级系统避免信息丢失。2、若进行系统更新，可能产生无法登陆游戏的问题。3、在此阶段，申诉通道暂未开启，敬请玩家酌情选择是否进行升级。4、同时，一个游戏账号仅能与一部安卓设备及一台PC搭配使用。5、建议您等待测试结束后再行升级手机系统或还原出厂设置、更换设

第一次抖音开直播怎么弄？第一次直播需要注意什么？ Mar 22, 2024 pm 04:10 PM

随着短视频平台的兴起，抖音已成为许多人日常生活中不可或缺的一部分。而在抖音上开直播，与粉丝互动，更是许多用户梦寐以求的事情。那么，第一次抖音开直播怎么弄呢？一、第一次抖音开直播怎么弄？1.准备工作要开始直播，首先需要确保您的抖音账号已经完成实名认证。您可以在抖音APP中的“我”->“设置”->“账号与安全”中找到实名认证教程。完成实名认证后，您就可以满足直播条件，开始在抖音平台进行直播了。2.申请直播权限在满足直播条件后，您需要申请直播权限。打开抖音APP，点击“我”->“创作者中心”->“直

在没有网络的情况下安装pip的步骤和注意事项 Jan 18, 2024 am 10:02 AM

离线环境下安装pip的方法及注意事项在网络不通畅的离线环境中，安装pip成为一项挑战。在本文中，将介绍几种离线环境下安装pip的方法，并提供具体的代码示例。方法一：使用离线安装包在可以连接网络的环境中，使用以下命令从官方源下载pip安装包：pipdownloadpip此命令将会自动从官方源下载pip及其依赖的包，并保存在当前目录下。将下载的压缩包移动到离

利用localstorage存储数据的步骤和注意事项 Jan 11, 2024 pm 04:51 PM

利用localStorage存储数据的步骤和注意事项本文主要介绍如何使用localStorage来存储数据，并提供相关的代码示例。LocalStorage是一种在浏览器中存储数据的方式，它可以将数据保存在用户的本地计算机上，而不需要通过服务器。下面是使用localStorage存储数据的步骤和需要注意的事项。步骤一：检测浏览器是否支持LocalStorage

简易JavaScript教程：获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest

js和vue的关系 Mar 11, 2024 pm 05:21 PM

js和vue的关系：1、JS作为Web开发基石；2、Vue.js作为前端框架的崛起；3、JS与Vue的互补关系；4、JS与Vue的实践应用。

在Linux环境中正确安装和使用pip的步骤和要点 Jan 17, 2024 am 09:31 AM

Linux环境下pip的安装步骤及注意事项标题：Linux环境下pip的安装步骤及注意事项在进行Python开发时，我们经常需要使用到第三方库来增加程序的功能。而pip作为Python标准包管理工具，可以方便地安装、升级和管理这些第三方库。本文将介绍在Linux环境下安装pip的步骤，并提供一些注意事项和具体的代码示例供参考。一、安装pip检查Python版

See all articles

详谈JavaScript函数闭包使用及注意事项代码详解

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题