JavaScript中闭包之浅析解读(必看篇)

2024-12-13 23:16:53

JavaScript中的闭包真心是一个老生常谈的问题了，最近面试也是一直问到，我自己的表述能力又不能完全支撑起来，真是抓狂。在回来的路上，我突然想到了一个很简单的事情，其实我们在做项目时候，其实就经常用到闭包的，可是面试问的时候，回答又往往是我们经常搜到的答案，唉不管是应付面试还是真的想学点东西，我也用自己的理解跟大家分享一下，书面化就避免不了了的。

1.闭包是什么？

红宝书中曰：“是指有权访问另外一个函数作用域中的变量的函数。”

简单的说，JavaScript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。再通俗的说就是“一个函数内部创建另外一个函数，后面这个函数可以读取上面那个函数中的变量，后面这个函数就可以称作‘闭包'”。

2.闭包有啥用？

通过我大量的查阅，如果说“通过使用闭包，我们可以做很多事情。比如模拟面向对象的代码风格；更优雅，更简洁的表达出代码；在某些方面提升代码的执行效率”，会不会感觉很空洞，那这些会不会好一些，由于在JavaScript中没有真正的块级作用域，但是为了给某个函数声明一些只有该函数才能使用的局部变量时，我们就会用到闭包，这样我们可以很大程度上减少全局作用域中的变量，净化全局作用域。

下面举例说明一下：

1.匿名自执行函数

我们知道所有的变量，如果不加上var关键字，则默认的会添加到全局对象的属性上去，这样的临时变量加入全局对象有很多坏处，

比如：别的函数可能误用这些变量；造成全局对象过于庞大，影响访问速度(因为变量的取值是需要从原型链上遍历的)。

了每次使用变量都是用var关键字外，我们在实际情况下经常遇到这样一种情况，即有的函数只需要执行一次，其内部变量无需维护，

比如UI的初始化，那么我们可以使用闭包：

var data= {
  table : [],
  tree : {}
};  

(function(dm){
  for(var i = 0; i < dm.table.rows; i++){
    var row = dm.table.rows[i];
    for(var j = 0; j < row.cells; i++){
      drawCell(i, j);
    }
  }  

})(data);

我们创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，因此在函数执行完后会立刻释放资源，关键是不污染全局对象。

2.结果缓存

我们开发中会碰到很多情况，设想我们有一个处理过程很耗时的函数对象，每次调用都会花费很长时间，那么我们就需要将计算出来的值存储起来，当调用这个函数的时候，首先在缓存中查找，如果找不到，则进行计算，然后更新缓存并返回值，如果找到了，直接返回查找到的值即可。闭包正是可以做到这一点，因为它不会释放外部的引用，从而函数内部的值可以得以保留。

var CachedSearchBox = (function(){
  var cache = {},
    count = [];
  return {
    attachSearchBox : function(dsid){
      if(dsid in cache){//如果结果在缓存中
       return cache[dsid];//直接返回缓存中的对象
      }
      var fsb = new uikit.webctrl.SearchBox(dsid);//新建
      cache[dsid] = fsb;//更新缓存
      if(count.length > 100){//保正缓存的大小<=100
       delete cache[count.shift()];
      }
      return fsb;
    },  

    clearSearchBox : function(dsid){
      if(dsid in cache){
       cache[dsid].clearSelection();
      }
    }
  };
})();  

CachedSearchBox.attachSearchBox("input");

这样我们在第二次调用的时候，就会从缓存中读取到该对象。

3.封装

var person = function(){
  //变量作用域为函数内部，外部无法访问
  var name = "default";    

  return {
    getName : function(){
      return name;
    },
    setName : function(newName){
      name = newName;
    }
  }
}();  

print(person.name);//直接访问，结果为undefined
print(person.getName());
person.setName("abruzzi");
print(person.getName());

4.实现类和继承

function Person(){
  var name = "default";    

  return {
    getName : function(){
      return name;
    },
    setName : function(newName){
      name = newName;
    }
  }
  };  

  var p = new Person();
  p.setName("Tom");
  alert(p.getName());

  var Jack = function(){};
  //继承自Person
  Jack.prototype = new Person();
  //添加私有方法
  Jack.prototype.Say = function(){
    alert("Hello,my name is Jack");
  };
  var j = new Jack();
  j.setName("Jack");
  j.Say();
  alert(j.getName());

写到最后，不知道最后各位亲们发现自己曾经做过的项目中其实用到过很多这种，反正我是遇到了，闭包就是这么一直存在着的。

关于闭包，虽然老生常谈，但是还是挺重要的。至于闭包的缺陷嘛，就说一个好了不是干货滥用闭包，会导致内存泄漏，内存泄漏是啥自己百度吧 ^_^。

以上这篇JavaScript中闭包之浅析解读(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

深入解析Javascript闭包的功能及实现方法

一.什么是闭包和闭包的几种写法和用法 1.什么是闭包闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分.闭包的特点: 1). 作为一个函数变量的一个引用,当函数返回时,其处于激活状态. 2). 一个闭包就是当一个函数返回时,一个没有释放资源的栈区. 简单的说,Javascript允许使用内部函数-即函数定义和函数表
js实现为a标签添加事件的方法(使用闭包循环)

本文实例讲述了js实现为a标签添加事件的方法.分享给大家供大家参考,具体如下: 以示例说明: 实现效果:循环为带有ml-praise样式类的a标签添加事件,并且在点击a标签后,相应的数量增加1. Html结构如下所示: <ul> <li><a href="javascript:;" class="ml-praise">数量:<span class="ding-num">100</span>
JavaScript中闭包的写法和作用详解

1.什么是闭包闭包是有权访问另一个函数作用域的变量的函数. 简单的说,Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内.而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量.参数和声明的其他内部函数.当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包. 2.变量的作用域要理解闭包,首先要理解变量的作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变
javascript闭包概念简单解析(推荐)

关于"闭包"这个概念的文章在网上铺天盖地,基本已经稀烂了,但是有时候总感觉读了这么多的文章还是云山雾罩,当然是由于它本身就比较难于理解和涉及的知识较多,还有一个很重要的原因就是网上很多教程介绍可能存在一定的误区,或者说侧重点不同,下面就通过代码实例简单的介绍一下什么是闭包. 代码实例一: function a(){ var webName="我们"; console.log(webName); } a() 以上是一段非常简单的代码,当函数执行结束之后,它就会从内存中
JavaScript闭包实例详解

一.充电 1.一切(引用类型)都是对象,对象是属性的集合. 2.函数是一种对象,但是函数却不像数组一样--你可以说数组是对象的一种,因为数组就像是对象的一个子集一样.但是函数与对象之间,却不仅仅是一种包含和被包含的关系,函数和对象之间的关系比较复杂,甚至有一点鸡生蛋蛋生鸡的逻辑. function Fn() {this.name = '王福朋';this.year = 1988;} var fn1 = new Fn(); var obj = { a: 10, b: 20 };等价于var obj
浅谈JavaScript for循环闭包

有个网友问了个问题,如下的html,为什么每次输出都是5,而不是点击每个p,就alert出对应的1,2,3,4,5. <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>闭包演示</title> <script type="text/javascript&quo
JS阻止事件冒泡行为和闭包的方法

阻止事件冒泡行为,要是不阻止的话,点击div的时候也会同时触发body事件 html代码 <body onclick='load()'> <div onclick='cli()'> click this </div> </body> css代码 div{ width:200px; height:200px; border:1px red solid; } js代码 function load(){ console.log('body') } function
Javascript闭包与函数柯里化浅析

闭包和柯里化都是JavaScript经常用到而且比较高级的技巧,所有的函数式编程语言都支持这两个概念,因此,我们想要充分发挥出JavaScript中的函数式编程特征,就需要深入的了解这两个概念,闭包事实上更是柯里化所不可缺少的基础. 一.柯里化的概念在计算机科学中,柯里化是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术.这个技术由Christopher Strachey以逻辑学家 Haskell Curry 命名的,尽管
JavaScript中闭包之浅析解读(必看篇)

JavaScript中的闭包真心是一个老生常谈的问题了,最近面试也是一直问到,我自己的表述能力又不能完全支撑起来,真是抓狂.在回来的路上,我突然想到了一个很简单的事情,其实我们在做项目时候,其实就经常用到闭包的,可是面试问的时候,回答又往往是我们经常搜到的答案,唉不管是应付面试还是真的想学点东西 ,我也用自己的理解跟大家分享一下,书面化就避免不了了的. 1.闭包是什么? 红宝书中曰:"是指有权访问另外一个函数作用域中的变量的函数." 简单的说,JavaScript允许使用内部函数-
常用Javascript函数与原型功能收藏(必看篇)

如下所示: // 重复字符串 String.prototype.repeat = function(n) { return new Array(n+1).join(this); } // 替换全部 String.prototype.replaceAll = function(str1, str2) { return this.replace(new RegExp(str1, "gm"), str2); } // 清除空格 String.prototype.trim = function
JS中BOM相关知识点总结(必看篇)

window对象 ECMAScript是JavaScript的核心,但是如果要在web中使用javascript,那么BOM(浏览器对象模型)才是真正的核心.BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关. window对象:BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象有双重角色,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象. 因此,所有全局作用域中声明的变量.函数都会变成w
Javascript 一些需要注意的细节(必看篇)

1.使用 === 代替 == JavaScript 使用2种不同的等值运算符:===|!== 和 ==|!=,在比较操作中使用前者是最佳实践. "如果两边的操作数具有相同的类型和值,===返回true,!==返回false."--JavaScript:语言精粹然而,当使用==和!=时,你可能会遇到类型不同的情况,这种情况下,操作数的类型会被强制转换成一样的再做比较,这可能不是你想要的结果. 2.Eval == 邪恶起初不太熟悉时,"eval"让我们能够访问Jav
基于jQuery中ajax的相关方法汇总(必看篇)

前提条件话说是jquery中的ajax方法,那么前提条件当然是引入jquery啦. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> 具体方法 ①load() 使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[call
Java中的循环笔记整理(必看篇)

一.循环的类型: 1.for循环 class For{ public static void main(String[] args) { System.out.println("Hello World!"); System.out.println("Hello World!"); System.out.println("Hello World!"); System.out.println("Hello World!"); Sy
Java中的对象流总结(必看篇)

Java中可以通过对象流将一个序列化的对象保存到硬盘中,或者硬盘中读取一个对象.对象流的存储和读取包含以下几点内容: 1.所保存的对象必须实现Serializable接口. 2. 所保存的对象的属性也必须实现Serializable接口. 3. 最好要给该对象提供一个版本号,private static final long serialVersionId. 下面是一个对象流存储和读取一个对象的流程图: class Person implements Serializable { //实现序列化
在ASP.NET Core 中发送邮件的实现方法(必看篇)

前言我们知道目前 .NET Core 还不支持 SMTP 协议,当我么在使用到发送邮件功能的时候,需要借助于一些第三方组件来达到目的,今天给大家介绍两款开源的邮件发送组件,它们分别是 MailKit 和 FluentEmail , 下面我对它们分别进行介绍. MailKit 在 ASP.NET Core 中,可以使用 MailKit 来发送邮件,它支持跨平台,并且支持 IMAP, POP3, SMTP 等协议. 你可以使用下面的方式安装: Install-Package MailKit 下面是
基于java中的流程控制语句总结(必看篇)

程序的结构分类: 顺序结构:按照写代码的顺序一次执行选择结构:根据条件的不同有选择的执行不同的代码循环结构:在一定条件下反复执行某一片代码选择结构: 也叫分支结构根据条件的不同,有选择的执行某一片代码 ,Java提供了两种 if结构 switch结构 if分为三种格式: if的第一种格式 if(条件){ 语句块 } 执行流程: 先判断条件, 如果为真则语句块执行,否则语句块不执行代码演示: public static void main(String[] args) { Sys
JavaScript中数组的各种操作的总结(必看篇)

js数组的新建,头插入,尾插入,头删除,尾删除,中间删除,删除多个,多个数组合并,数组倒序,数组截取等等,都有对应的例子. 声明一个数组原来是如下声明: var s = new Array(); 但是现在编辑器推荐使用如下声明:简洁 var s = []; concat 方法返回一个新数组,这个新数组是由两个或更多数组组合而成的.不修改原数组. join 方法返回字符串值,其中包含了连接到一起的数组的所有元素,元素由指定的分隔符分隔开来.不修改原数组. pop 方法移除数组中的最后一个

JavaScript中闭包之浅析解读(必看篇)

相关推荐

随机推荐