详解JavaScript之闭包

闭包 : 闭包就是一个函数引用另外一个函数的变量,因为变量被引用着所以不会被回收,因此可以用来封装一个私有变量。

当内部函数在定义它的作用域的数据外部被引用时,就创建了该内部函数的闭包,如果内部函数引用了位于外部函数的变量,当外部函数调用完毕后,这些变量在内存不会被释放,因为闭包需要它们

变量的作用域 :  作用域就两种,全局作用域和局部作用域

var n=999;function f1(){  alert(n);}f1(); // 999function f2(){  var m=999;}alert(m); // errorfunction f3(){  i=999; // 函数内部声明变量的时候,一定要使用 var 声明变量,如果不用 var,此时改变量就变成全局变量}f3();alert(i); // 999

登录后复制

从外部读取局部变量 : 正常情况下是办不到的,但可以在函数的内部再定义一个函数,这样内部函数就可以访问外部函数的变量。另外,外部函数无法访问内部函数变量,这就是 JavaScript 语言特有的 “链式作用域” 结构

function f1() {  var n = 999;  function f2() {    alert(n);  }  return f2;}var result = f1();result(); // 999

登录后复制

闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中

function f1() {  var n = 999;  nAdd = function(){ // nAdd 是全局变量    n += 1;  }    function f2() {    alert(n);  }  return f2;}var result = f1();result(); // 999nAdd();result(); // 1000

登录后复制

1> 由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除

2> 闭包会在父函数外部,改变父函数内部变量的值。所以,如果把父函数当作对象 (object) 使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值

立即学习“Java免费学习笔记(深入)”;

var name = "The Window";var object = {  name : "My Object",  getNameFunc : function() {    return function() {      return this.name;    };  },  getNameFunc2 : function() {    return () => this.name;  },  getNameFunc3 : function() {    this_ = this;    return function() {      return this_.name;    };  }};alert(object.getNameFunc()());  // The Window,this 指向调用的对象,此处执行的时全局 this alert(object.getNameFunc2()()); // My Object,使用箭头函数相当于 getNameFunc3 的写法alert(object.getNameFunc3()()); // My Object

登录后复制

function outerFun() {  var a =0;  alert(a);  }var a = 4;outerFun(); // 0alert(a); // 4

登录后复制

function outerFun() {  a = 0; // 没有 var,此时 a 是作用于全局变量,将修改全局变量的 a  alert(a);  }var a=4; // 全局变量 aouterFun(); // 0alert(a); // 0

登录后复制

function createFunctions() {  var result = new Array();  for (var i=0; i 

登录后复制

以上就是详解JavaScript之闭包的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2779274.html

(0)
上一篇 2025年3月8日 15:45:47
下一篇 2025年3月8日 15:45:55

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • js数组操作实例分析

    本文主要和大家分享js数组操作实例分析,主要以代码的形式和大家分享,希望能帮助到大家。 shift:删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined  var a = [1,2,3,4,5];   var b = …

    编程技术 2025年3月8日
    200
  • vue.js实现绑定class

    本文主要和大家分享vue.js实现绑定class,主要以代码的形式和大家分享,希望能帮助到大家。 nbsp;html>                Document                                  …

    编程技术 2025年3月8日
    200
  • JS跨域处理详解

    本文主要和大家分享JS跨域处理详解,解决js的跨域问题可以使用Jsonp,希望能帮助到大家。 js不可以跨域请求数据。 什么是跨域: 1、域名不同 2、域名相同端口不同。 解决js的跨域问题可以使用Jsonp,使用js的特性绕过跨域请求。J…

    2025年3月8日
    200
  • JS预加载图片的实现

    本文主要和大家分享js预加载图片的实现,希望能帮助到大家。 需求:项目中点击按钮,实现切换背景图功能。 问题:在切换css的background-image属性时,先加载图片后显示,会出现一瞬空白期。 解决方法:提前预加载背景图    首先…

    编程技术 2025年3月8日
    200
  • JS中的闭包详解

    本文主要和大家分享js中的闭包详解,主要以代码的方式和大家讲解,希望能帮助到大家。 var n = 999;function f1() {  console.log(n);}f1() // 999 登录后复制 JavaScript有两种作用…

    编程技术 2025年3月8日
    200
  • js实现拼装html代码

    本文主要和大家分享js实现拼装html代码,主要以一张图片和大家分享,希望能帮助到大家。 以上就是js实现拼装html代码的详细内容,更多请关注【创想鸟】其它相关文章!

    2025年3月8日
    200
  • js中DOM元素的操作方法

    DOM节点(node)一般对应一个标签、一个文版或者一个HTML属性。DOM节点有一个nodeType属性用来表示当前元素的枚举类型,{1:Element,2:Attribute,3:Text}。本文主要和大家分享js中DOM元素的操作方法…

    编程技术 2025年3月8日
    200
  • vue.js生成条形码的方法

    本文主要和大家分享vue.js生成条形码的方法,主要以代码的形式和大家分享,希望能帮助到大家。 1.下载插件 npm install @xkeshi/vue-barcode //下载条形码插件 登录后复制 2.在main.js中引入插件 i…

    编程技术 2025年3月8日
    200
  • js实现动态获取地址栏后的参数

    本文主要和大家分享js实现动态获取地址栏后的参数,希望能帮助到大家。 需求:js动态的获取地址栏后面的参数 js代码: alert(GetQueryString(“code”))  //获取地址栏后面的参数  function GetQue…

    2025年3月8日
    200
  • JS实现自动打字效果的代码

    本文主要和大家分享js实现自动打字效果,主要以代码的形式和大家分享,希望能帮助到大家。 nbsp;html>        自动打字 var str = '这是一段自动打字的代码,很有趣,哈哈哈哈哈哈,呵呵呵呵呵'…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论