JavaScript之闭包、定时器

2023-12-18 23:32
文章标签 java script 定时器 之闭

本文主要是介绍JavaScript之闭包、定时器,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

谈谈闭包

对于JavaScript而言,虽然没有块作用域的概念,但是有函数作用域的概念,若是想从全局环境下去访问一个函数内的局部变量,是办不到的;但是根据JavaScript中的链式作用域的概念,它是可以访问外面的全局变量的,所以,针对一个被定义在函数内的函数,它的父函数中的所有变量也是能够被它访问到的。

  1. 什么是闭包
    闭包(Closure)是让内部函数能够访问外部函数中的变量。
    一个最简单的闭包栗子:

    function Closure{var a = 1;// 在最父函数环境中定义了areturn function(){a = 2;   // 给a赋值,但是在当前作用域中并没有声明a这个变量}
    }
    func = Closure(); // 这时的返回值即是一个函数
    func() // 对里面的函数进行调用,这时a的值发生了改变
  2. 闭包的作用
    闭包的作用就是让内部函数能够访问到外部变量,就像上面例子中所演示的样子。
    闭包的另一个作用就是让一些变量始终保存在内存中,看下面:

    function func(){var a = 1;function add(){a++;}function ret(){return a;}return {ret:ret,add:add}
    }
    var f1 = func();
    f1.add();
    f1.add();
    console.log(f1.ret());

    在这个栗子中,函数中的子函数add一共运行了两次,将a的值从1改变到了3,由于父函数被赋给了一个全局变量,所以它就一直在内存中,而不是在调用之后被自动清除了。

  3. 使用闭包的注意点
    上文中已经说过,闭包的特点之一,也是最主要的特点就是函数的所有变量都会被保存在内存中,那么这些变量当然也会占用内存,如果闭包使用过度甚至滥用,就会给内存造成很大的负担,可能会造成性能问题甚至造成内存泄漏,所以在使用完成闭包之后一定要手动去清除这块内存,避免内存问题的出现。

    setTimeout 0 有什么作用

    但从字面上的意思来看,这样设置就是让函数延迟0s执行,但是其实不然,它的作用是让函数放到最后去执行,比如:
    setTimeout(function(){console.log(1);},0); (function(){console.log(12);}());
    以上两个函数的执行顺序并不是按照顺序上的先打印1,再打印12;由于给前面的函数设置了0s的延时,执行到此处的时候它就被放进了循环队列,遵循队列后进后出的原理,在执行完成其它代码后再对队列中的代码依次执行。

    下面代码的输出是什么,对其进行修改让fnArr()输出i,使用2种以上的方式

     var fnArr = [];for (var i = 0; i < 10; i ++) {fnArr[i] =  function(){return i;};}console.log( fnArr[3]() );  // 10

    修改1:

     var fnArr = [];for (var i = 0; i < 10; i ++) {fnArr[i] =  function(){return i;}(i);}console.log( fnArr[3] );  //

    修改二:

     for(var i=0;i<5;i++){(function(){var n = i;setTimeout(function(){console.log('delayer:' + n );}, 0);})();console.log(i);}

使用闭包封装汽车对象,并获取状态

    var Car = carSet();function carSet(){var speed = 0;function setSpeed(spe){speed = spe;}function getSpeed(){console.log(speed);return speed;}function accelerate(){speed += 10;}function decelerate(){speed -= 10;}function getStatus(){if(speed === 0){console.log("stop");return "stop";}else{console.log("running");return "running";}}return{setSpeed:setSpeed,getSpeed:getSpeed,decelerate:decelerate,getStatus:getStatus,accelerate:accelerate}}Car.setSpeed(30);Car.getSpeed(); //30Car.accelerate();Car.getSpeed(); //40;Car.decelerate();Car.decelerate();Car.getSpeed(); //20Car.getStatus(); // 'running';Car.decelerate(); Car.decelerate();Car.getStatus();  //'stop';//Car.speed;  //error

使用setTimeot模拟setInterval的功能。

    function getsec(){setTimeout(function(){console.log(new Date().getSeconds());getsec();},1000)}

计算setTimeout的最小时间粒度

    function cTime(){var i = 0;var sta = Date.now();var clo = setTimeout(function a(){i++;if(i === 1000){var end = Date.now();clearTimeout(clo);console.log((end - sta)/i);}clo = setTimeout(a,0);},0);}cTime();

下列代码的输出

// 由于被设置延时的函数会被移动到队列中,等待所有正常执行完成之后再进行执行,所以执行的实际顺序为:
var a = 1;
var a;
console.log(a);   // 1
a = 3;
console.log(a);  // 3
setTimeout(function(){a = 2;console.log(a);
},0)

以下代码的输出

    var flag = true;setTimeout(function(){ // 设置延时后,这段代码被放进队列中,等待所有执行完成之后再执行flag = false;},0)while(flag){}  // 到这里的时候,判断flag一直会使true,无法往下执行,形成死循环console.log(flag);

以上代码在模拟控制台上会输出true,但实际只是假象

使用闭包来让下面这段函数输出delayer: 0, delayer:1...

for(var i=0;i<5;i++){(function(){var n = i;setTimeout(function(){console.log('delayer:' + n );}, 0);})();console.log(i);
}

这篇关于JavaScript之闭包、定时器的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/510152

相关文章

Java实现检查多个时间段是否有重合

《Java实现检查多个时间段是否有重合》这篇文章主要为大家详细介绍了如何使用Java实现检查多个时间段是否有重合,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录流程概述步骤详解China编程步骤1:定义时间段类步骤2:添加时间段步骤3:检查时间段是否有重合步骤4:输出结果示例代码结语作

Java中String字符串使用避坑指南

《Java中String字符串使用避坑指南》Java中的String字符串是我们日常编程中用得最多的类之一,看似简单的String使用,却隐藏着不少“坑”,如果不注意,可能会导致性能问题、意外的错误容... 目录8个避坑点如下:1. 字符串的不可变性:每次修改都创建新对象2. 使用 == 比较字符串,陷阱满

Java判断多个时间段是否重合的方法小结

《Java判断多个时间段是否重合的方法小结》这篇文章主要为大家详细介绍了Java中判断多个时间段是否重合的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录判断多个时间段是否有间隔判断时间段集合是否与某时间段重合判断多个时间段是否有间隔实体类内容public class D

IDEA编译报错“java: 常量字符串过长”的原因及解决方法

《IDEA编译报错“java:常量字符串过长”的原因及解决方法》今天在开发过程中,由于尝试将一个文件的Base64字符串设置为常量,结果导致IDEA编译的时候出现了如下报错java:常量字符串过长,... 目录一、问题描述二、问题原因2.1 理论角度2.2 源码角度三、解决方案解决方案①:StringBui

Java覆盖第三方jar包中的某一个类的实现方法

《Java覆盖第三方jar包中的某一个类的实现方法》在我们日常的开发中,经常需要使用第三方的jar包,有时候我们会发现第三方的jar包中的某一个类有问题,或者我们需要定制化修改其中的逻辑,那么应该如何... 目录一、需求描述二、示例描述三、操作步骤四、验证结果五、实现原理一、需求描述需求描述如下:需要在

Java中ArrayList和LinkedList有什么区别举例详解

《Java中ArrayList和LinkedList有什么区别举例详解》:本文主要介绍Java中ArrayList和LinkedList区别的相关资料,包括数据结构特性、核心操作性能、内存与GC影... 目录一、底层数据结构二、核心操作性能对比三、内存与 GC 影响四、扩容机制五、线程安全与并发方案六、工程

JavaScript中的reduce方法执行过程、使用场景及进阶用法

《JavaScript中的reduce方法执行过程、使用场景及进阶用法》:本文主要介绍JavaScript中的reduce方法执行过程、使用场景及进阶用法的相关资料,reduce是JavaScri... 目录1. 什么是reduce2. reduce语法2.1 语法2.2 参数说明3. reduce执行过程

如何使用Java实现请求deepseek

《如何使用Java实现请求deepseek》这篇文章主要为大家详细介绍了如何使用Java实现请求deepseek功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1.deepseek的api创建2.Java实现请求deepseek2.1 pom文件2.2 json转化文件2.2

Java调用DeepSeek API的最佳实践及详细代码示例

《Java调用DeepSeekAPI的最佳实践及详细代码示例》:本文主要介绍如何使用Java调用DeepSeekAPI,包括获取API密钥、添加HTTP客户端依赖、创建HTTP请求、处理响应、... 目录1. 获取API密钥2. 添加HTTP客户端依赖3. 创建HTTP请求4. 处理响应5. 错误处理6.

Spring AI集成DeepSeek的详细步骤

《SpringAI集成DeepSeek的详细步骤》DeepSeek作为一款卓越的国产AI模型,越来越多的公司考虑在自己的应用中集成,对于Java应用来说,我们可以借助SpringAI集成DeepSe... 目录DeepSeek 介绍Spring AI 是什么?1、环境准备2、构建项目2.1、pom依赖2.2