当前位置: 首页 > 编程日记 > 正文

Javascript闭包和闭包的几种写法及用途

好久没有写博客了,过了一个十一长假都变懒了,今天总算是恢复状态了。好了,进入正题,今天来说一说javascript里面的闭包吧!本篇博客主要讲一些实用的东西,主要将闭包的写法、用法和用途。

 一、什么是闭包和闭包的几种写法和用法

1、什么是闭包

闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。闭包的特点:
  1. 作为一个函数变量的一个引用,当函数返回时,其处于激活状态。
  2. 一个闭包就是当一个函数返回时,一个没有释放资源的栈区。
  简单的说,Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包。

2、闭包的几种写法和用法

首先要明白,在JS中一切都是对象,函数是对象的一种。下面先来看一下闭包的5种写法,简单理解一下什么是闭包。后面会具体解释。

复制代码
//第1种写法  
function Circle(r) {  this.r = r;  
}  
Circle.PI = 3.14159;  
Circle.prototype.area = function() {  return Circle.PI * this.r * this.r;  
}  var c = new Circle(1.0);     
alert(c.area());   
复制代码

这种写法没什么特别的,只是给函数添加一些属性。

复制代码
//第2种写法  
var Circle = function() {  var obj = new Object();  obj.PI = 3.14159;  obj.area = function( r ) {  return this.PI * r * r;  }  return obj;  
}  var c = new Circle();  
alert( c.area( 1.0 ) );  
复制代码

这种写法是声明一个变量,将一个函数当作值赋给变量。

复制代码
//第3种写法  
var Circle = new Object();  
Circle.PI = 3.14159;  
Circle.Area = function( r ) {  return this.PI * r * r;  
}  alert( Circle.Area( 1.0 ) );  
复制代码

这种方法最好理解,就是new 一个对象,然后给对象添加属性和方法。

复制代码
//第4种写法  
var Circle={  "PI":3.14159,  "area":function(r){  return this.PI * r * r;  }  
};  
alert( Circle.area(1.0) );  
复制代码

这种方法使用较多,也最为方便。var obj = {}就是声明一个空的对象。

//第5种写法  
var Circle = new Function("this.PI = 3.14159;this.area = function( r ) {return r*r*this.PI;}");  alert( (new Circle()).area(1.0) );  

说实话,这种写法我是没用过,大家可以参考一下。

总的来说,上面几种方法,第2中和第4中较为常见,大家可以根据习惯选择。

上面代码中出现了JS中常用的Prototype,那么Prototype有什么用呢?下面我们来看一下:

复制代码
    var dom = function(){};dom.Show = function(){alert("Show Message");};dom.prototype.Display = function(){alert("Property Message");};dom.Display(); //errordom.Show();  var d = new dom();d.Display();d.Show(); //error
复制代码

我们首先声明一个变量,将一个函数赋给他,因为在Javascript中每个函数都有一个Portotype属性,而对象没有。添加两个方法,分别直接添加和添加打破Prototype上面,来看下调用情况。分析结果如下:

1、不使用prototype属性定义的对象方法,是静态方法,只能直接用类名进行调用!另外,此静态方法中无法使用this变量来调用对象其他的属性!
   2、使用prototype属性定义的对象方法,是非静态方法,只有在实例化后才能使用!其方法内部可以this来引用对象自身中的其他属性!

下面我们再来看一段代码:

复制代码
var dom = function(){var Name = "Default";this.Sex = "Boy";this.success = function(){alert("Success");};};alert(dom.Name);alert(dom.Sex);
复制代码

大家先看看,会显示什么呢? 答案是两个都显示Undefined,为什么呢?这是由于在Javascript中每个function都会形成一个作用域,而这些变量声明在函数中,所以就处于这个函数的作用域中,外部是无法访问的。要想访问变量,就必须new一个实例出来。

复制代码
var html = {Name:'Object',Success:function(){this.Say = function(){alert("Hello,world");};alert("Obj Success");}};
复制代码

再来看看这种写法,其实这是Javascript的一个"语法糖",这种写法相当于:

复制代码
    var html = new Object();html.Name = 'Object';html.Success = function(){this.Say = function(){alert("Hello,world");};alert("Obj Success");
复制代码

变量html是一个对象,不是函数,所以没有Prototype属性,其方法也都是公有方法,html不能被实例化。否则会出现如下错误:

但是他可以作为值赋给其它变量,如var o = html; 我们可以这样使用它:

    alert(html.Name);html.Success();

说到这里,完了吗?细心的人会问,怎么访问Success方法中的Say方法呢?是html.Success.Say()吗?

当然不是,上面刚说过由于作用域的限制,是访问不到的。所以要用下面的方法访问:

复制代码
var s = new html.Success();
s.Say();//还可以写到外面
html.Success.prototype.Show = function(){alert("HaHa");
};
var s = new html.Success();
s.Show();
复制代码

关于Javascript作用域的问题,不是一两句能说清楚的,有兴趣的大家可以网上找些资料看看。

二、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());    得到结果如下:  undefined  
default  
abruzzi  
复制代码

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(){};//继承自PersonJack.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());
复制代码

我们定义了Person,它就像一个类,我们new一个Person对象,访问它的方法。

下面我们定义了Jack,继承Person,并添加自己的方法。

转载于:https://www.cnblogs.com/gudyu/p/9258005.html

相关文章:

【GStreamer】使用capsfilter设置x264enc中的profile级别

1、问题描述 在【GStreamer】在x264enc中设置profile级别中,通过设置x264enc的属性,只将profile由high级别切换到main,但是在切换到baseline时,失败了。 2、解决方法 这里使用capsfilter,直接指定x264enc的profile。相关代码如下: // 创建元素 GstElement *h264enc =…

一文帮你梳理清楚:奇异值分解和矩阵分解 | 技术头条

作者 | K. Delphino译者 | Linstancy编辑 | Rachel出品 | AI科技大本营&#xff08;id&#xff1a;rgznai100&#xff09;【导读】在推荐系统的相关研究中&#xff0c;我们常常用到两个相关概念&#xff1a;矩阵分解和奇异值分解。这两个概念是同一种算法吗&#xff1f;两者到底…

[转]程序员技术练级攻略

2019独角兽企业重金招聘Python工程师标准>>> 月光博客6月12日发表了《写给新手程序员的一封信》&#xff0c;翻译自《An open letter to those who want to start programming》&#xff0c;我的朋友&#xff08;他在本站的id是Mailper&#xff09;告诉我&#xff0…

聊天机器人落地及进阶实战 | 公开课速记

嘉宾 | 邵浩编辑 | suiling来源 | AI科技大本营在线公开课近年来&#xff0c;聊天机器人技术及产品得到了快速的发展。聊天机器人作为人工智能技术的杀手级应用&#xff0c;发展得如火如荼&#xff0c;各种智能硬件层出不穷。本次公开课中&#xff0c;AI科技大本营联合电子工业…

【GStreamer】官网基本教程学习(basic-tutorial)

目录 下载和编译basic-tutorial-1.c 直接创建管道播放视频basic-tutorial-2.c 创建元件-->装入管道-->连接元件0、gstreamer 函数调用顺序1、元素 videotestsrc 的 pattern 属性详解2、GST_BIN 将其它类型指针转换成 GstBin*basic-tutorial-3.c 信号触发后再连接元件0、g…

IdentityServer4关于多客户端和API的最佳实践【含多类型客户端和API资源,以及客户端分组实践】【中】...

上一篇文章中&#xff0c;我们已经完成了服务端数据库的搭建&#xff0c;本篇主要处理多【传统HTTP】【依赖CORE环境】客户端之间协同在线【SSO】以及不需要SSO的场景处理。 目标&#xff1a; 1&#xff09;实现多类型客户端接入IdentityServer 后文简称【IDSV】 2&#xff09;…

WEB SSH Ajaxterm客户端配置(1)

Ajaxterm是一款基于Web的SSH客户端软件&#xff0c;它是采用Python编写的&#xff0c;这也就保证了它能在多种Linux发行版的系统中使用&#xff0c;同时它的安装非常简单。实验环境&#xff1a;Centos 5.5 ip&#xff1a;192.168.20.165pcre-7.8.tar.gzAjaxterm-0.10.tar.gzn…

如何为回归问题选择最合适的机器学习方法?

作者 | 何从庆本文经授权转载自 AI算法之心&#xff08;id&#xff1a;AIHeartForYou&#xff09;在目前的机器学习领域中&#xff0c;最常见的三种任务就是&#xff1a;回归分析、分类分析、聚类分析。在之前的文章中&#xff0c;我曾写过一篇《15分钟带你入门sklearn与机器学…

【Qt】获取本地IP(IPv4)

1、问题描述 获取本地IP列表有“127.0.0.1”、IPv4、IPv6等,一般使用IPv4,如何从已经获取的IP列表中挑出IPv4。 2、解决方法 QString ipv4; auto ips = QNetworkInterface::allAddresses(); foreach (auto ip, ipps) {if ( (ip.

2.2元组介绍+字符串操作

元组可以理解为“一旦创建就不能再修改的列表”&#xff0c;所以也叫只读列表 语法&#xff1a;names("A","B","C","D") 他只有两个方法&#xff1a; ①count ②index 字符串操作&#xff1a; 示例&#xff1a;name"chan" 1…

医生再添新助手!深度学习诊断传染病 | 完整代码+实操

作者 | Dipanjan (DJ) Sarkar译者 | Monanfei编辑 | Rachel、Jane出品 | AI科技大本营&#xff08;id&#xff1a;rgznai100&#xff09;【导读】文本基于深度学习和迁移学习方法&#xff0c;对疟疾等传染病检测问题进行了研究。作者对疟疾的检测原理以及迁移学习理论进行了介绍…

DIV限制宽度,字符断行,避免变形

代码如下&#xff1a;<div style"width:740px;word-break:break-all;word-wrap:break-word;">参考文章怎么强制限制div宽度转载于:https://www.cnblogs.com/leftfist/archive/2012/02/07/4258078.html

【渗透】node.js经典问题

1.循环问题 当循环调用 require() 时&#xff0c;一个模块可能在未完成执行时被返回。例如以下情况:a.js: exports.done false; const b require(./b.js); console.log(在 a 中&#xff0c;b.done %j, b.done); exports.done true; console.log(a 结束); b.js: console.log…

【Qt】Ubuntu下Qt应用程序自启动设置

1、问题描述 第一步,确保手动启动Qt程序没有报错!如果报以下错误,参见博客 qt.qpa.xcb: could not connect to display qt.qpa.plugin: Could not load the Qt platform plugin "xcb" in "" even though it was found. This application failed to s…

Tarjan算法应用 (割点/桥/缩点/强连通分量/双连通分量/LCA(最近公共祖先)问题)...

转载自&#xff1a;http://hi.baidu.com/lydrainbowcat/blog/item/2194090a96bbed2db1351de8.html 基本概念&#xff1a; 1.割点&#xff1a;若删掉某点后&#xff0c;原连通图分裂为多个子图&#xff0c;则称该点为割点。 2.割点集合&#xff1a;在一个无向连通图中&#xff0…

【JavaScript】Ubuntu16.04安装vscode+npm+yarn

一、安装vscode vscode官网&#xff08;https://code.visualstudio.com/&#xff09;下载linux deb文件 下载deb后&#xff0c;使用dpkg -i 命令安装 sudo dpkg -i code_1.45.1-1589445302_amd64.deb在终端执行命令code来启动vscode 二、安装nodejs curl -sL https://deb…

C++大数加法

1 #include <iostream>2 #include<deque>3 #include<string>4 5 using namespace std;6 7 string add(string a, string b) //此函数默认a的长度大于b(可以在main函数里用if语句控制a的长度大于b)8 {9 deque<int>sum; //sum用来存储和的每…

重磅!Facebook更新PyTorch 1.1,打算跨GPU分割神经网络

时隔半年不到&#xff0c;PyTorch 已经从之前的 1.0 升级到 1.1 版本了。刚刚&#xff0c;Facebook 在年度开发者大会 F8 上宣布正式发布 PyTorch 1.1 版本&#xff0c;这是对 PyTorch 1.0 的一次大的功能升级。 作者 | 琥珀 出品 | AI科技大本营&#xff08;ID:rgznai100&…

红旗Linux认证简介

红旗Linux认证 一、课程名称&#xff1a;红旗Linux认证产品专家&#xff08;RAP&#xff09; 课程简介&#xff1a; 主要针对初次使用红旗Linux desktop的学员而编制&#xff0c;注重实用性&#xff0c;是红旗Linux的一门入门课程。 采用的教材是《红旗Linux桌面应用教程》&…

【Git】git clone时下载速度太慢的解决方法(亲测有效)

1、参考博客 https://www.jianshu.com/p/3f6477049ece2、原因 git clone特别慢是因为github.global.ssl.fastly.net域名被限制了。 只要找到这个域名对应的ip地址&#xff0c;然后在hosts文件中加上ip–>域名的映射&#xff0c;刷新DNS缓存便可。 3、解决方法 3.1 获取I…

JHipster技术简介

本文简单介绍Jhipster是什么&#xff0c;为什么用Jhipster&#xff0c;怎么用Jhipster。 WHAT - 技术栈 JHipster是什么 JHipster是一个开发平台&#xff0c;用于生成&#xff0c;开发&#xff0c;部署Spring Boot Angular/React Web Application和Spring microservices。 JHi…

如何确定最佳训练数据集规模?6 大必备“锦囊”全给你了

【导读】对于机器学习而言&#xff0c;获取数据的成本有时会非常昂贵&#xff0c;因此为模型选择一个合理的训练数据规模&#xff0c;对于机器学习是至关重要的。在本文中&#xff0c;作者针对线性回归模型和深度学习模型&#xff0c;分别介绍了确定训练数据集规模的方法。 作者…

Android实现左右滑动效果

本示例演示在Android中实现图片左右滑动效果。 关于滑动效果&#xff0c;在Android中用得比较多&#xff0c;本示例实现的滑动效果是使用ViewFlipper来实现的&#xff0c;当然也可以使用其它的View来实现。接下来就让我们开始实现这种效果。为了方便大家理解&#xff0c;我们先…

假如AI也会diss人类,他们会这样.....

1酷炫、未来感、强大、没灵气、不给力、垃圾、高深——如果有一个东西适用于以上所有这些词&#xff0c;那它一定是人工智能。人工智能的火爆一直伴随着争议和调侃。尤其是现在&#xff0c;大数据和机器学习已经融入到我们的生活&#xff0c;网上关于人工智障的吐槽却只增不减。…

[Go]在vscode中添加对模板文件tmpl的html语法自动补全的支持

1、打开设置界面 依次点击&#xff1a;“文件” --> “首选项” --> “设置” 2、打开文件配置 依次点击&#xff1a;“文本编辑器” --> “文件” --> “在settings.json中编辑” 3、添加对tmpl后缀文件的html语法自动补全支持 4、效果 html关键字高亮显示…

Docker 宿主机定时清除容器的运行日志

为什么80%的码农都做不了架构师&#xff1f;>>> docker 宿主机定时清除容器的运行日志 一般docker容器都是最小化安装&#xff0c;不仅如此系统定时器相关的服务也不存在&#xff0c;自己去安装也很麻烦&#xff0c;故此直接使用宿主机的定时器即可。 一、在容器中…

企业数据库合规的最佳实践

PCI DSS当前对于数据库要求有下述明确的控制措施&#xff1a; • 对访问任意数据库的所有用户进行认证。 • 所有用户访问任何数据库时&#xff0c;用户的查询和操作&#xff08;例如移动、拷贝和删除&#xff09;只能通过编程性事务&#xff08;例如存储过程&#xff09;。 •…

Docker网络解决方案-Flannel部署记录

Docker跨主机容器间网络通信实现的工具有Pipework、Flannel、Weave、Open vSwitch&#xff08;虚拟交换机&#xff09;、Calico实现跨主机容器间的通信。其中Pipework、Weave、Flannel&#xff0c;三者的区别是&#xff1a; Weave的思路 12在每个宿主机上布置一个特殊的route的…

【FFmpeg】警告:[hls] pkt.duration = 0, maybe the hls segment duration will not precise

1、问题描述 在使用ffmpeg编程生成m3u8文件时,报警告 [hls @ 0x7f26b4181840] pkt->duration = 0, maybe the hls segment duration will not precise2、原因分析 根据警告提示信息, AVPacket.duration的值设为了0,可能会导致hls在分段时时间不精确。 根据警告信息搜索…

反转字符串/列表、改变递归次数限制、else用法...Python 冷知识(四)

本文转载自Python编程时光&#xff08;ID:Python-Time&#xff09;冷知识系列&#xff0c;已经更新至第四篇。前三篇传送门在此&#xff0c;还没阅读的可以学习一下。谈谈 Python 那些不为人知的冷知识&#xff08;一&#xff09;谈谈 Python 那些不为人知的冷知识&#xff08;…