js中let能否完全替代IIFE



代码如下:

^[\s\S   ]*\n

^[\s\S ]*\n

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

前言

最近，我写了一篇关于syntax of Java's IIFE pattern的文章，来解释为什么我们用现在的方式来写立即执行函数表达式。少数的读者批评文章过时了，都在争论在ECMA 2015中介绍的块级作用域变量使IIFE变得过时了。

恰恰相反，立即执行函数表达式一点也没有过时！因为这个理由，我决定写这篇后续文章来介绍一些立即执行函数表达式的常见用法。注意以下的列表是不完整的，所以如果你喜欢的用法没有在文章出现，希望你不要有什么不好的感觉。

函数作用域 VS 块级作用域

通过var关键字声明的本地变量仅作用于当前闭包域，如果不存在这样的一个闭包函数，那么将会创建一个污染全局作用域的全局变量。为了防止这种情况出现，我们可以使用IIFE来创建一个包含有这个本地变量的函数。

(function(){
varfoo= "bar";
console.log(foo);
})();
foo;// ReferenceError: foo is not defined

目前的争论是，我们可以使用在ECMA 2015介绍的块级作用域变量来代替IIFE，以达到相同的效果。相比于函数级作用域，let和const关键字声明的本地变量仅作用于当前所处的”块”级域。

{
let foo= "bar";
console.log(foo);
}
foo;// ReferenceError: foo is not defined

然而，块级作用域变量不是立即函数执行表达式的替代品。确实，如果支持ECMA 2015，let和const能够用来限制本地变量只在包含它的块级作用域内使用。

如果，你在不支持ECMA 2015的环境(例如一些旧的浏览器)中执行你的Java代码。你就不能使用let和const关键字来创建块级作用域变量。你将不得不求助于以前经典的函数级作用域方法。

闭包和私有数据

IIFE的另一个用法是为局部变量提供一个封装的作用域，在IIFE返回的函数中能够访问该变量。这种方式即_a closure is created_允许函数访问这个本地变量,即使这个函数在IIFE的词法范围之外执行时。

假设我们要创建一个uniqueId函数，每次调用该函数时就会返回一个唯一的id（比如 “id_1”，“id_2”等）。在下面的IIFE中，记录了一个私有的计数变量（count)，每次调用计数函数uniqueId的时候，就会将count加一。我们在IIFE中返回的另一个函数，这个函数在调用时会返回一个新的标识符字符串。

constuniqueId= (function(){
let count= 0;
returnfunction(){
++count;
returnid_${count};
};
})();
console.log(uniqueId());// "id_1"
console.log(uniqueId());// "id_2"
console.log(uniqueId());// "id_3"

注意，在IIEF之外无法访问这个计数变量count。除了从IIEF中返回的函数，别人无法读写该变量。这样就能创建真正的私有状态，它只能以受控的方式进行修改。revealing module pattern非常依赖于这种机制。

constcounter= (function(){
let counterValue= 0;
return{
increment(){
++counterValue;
},
get value(){
 代码如下:

^[\s\S   ]*\n

当使用IIFE来返回一个”封闭”一些本地变量来管理私有数据的函数时，let和const都不能替代它。

变量重命名

有时，你可能碰到一种情况，你正在使用的两个不同的库暴露的全局变量名是相同的。例如，考虑一下你正在使用jQuery同时另一个库也指定了一个为$的全局变量。

为了解决命名冲突问题，可以将一段代码封装在一个IIEF中，将一个全局变量（比如，jQuery）作为参数传入IIFE。在函数内部，就可以以一个任意的参数名（比如，$）来访问该参数值：

 代码如下:

^[\s\S   ]*\n

不管在外部作用域有什么值指定给$，在IIFE中，这些值都会被”屏蔽”，$参数一直指向jQuery方法。

捕获全局对象

Java代码在不同环境执行时，你所使用的全局对象是不同的。当代码在浏览器运行时，全局对象是windows。但是在Node.js中，全局对象是global。由于在写通用的Java代码时，你肯定不想硬编码这两个名字其中的任何一个，这时你就可以使用一种”包装”的方式就像下面这样：

(
 代码如下:

^[\s\S   ]*\n

不管是浏览器还是Node.js的环境，global参数将会指定到对的全局对象上。如果想了解更多关于使用这种技巧来捕获全局对象的细节内容，请移步this post by Todd Motto。

压缩方面的优化

混叠变量名的方法也可以用来优化代码，这种方式使代码能够被更有效的压缩。举例如下：

 代码如下:

^[\s\S   ]*\n

更短标识符名会使文件的体积变得更小。然而，如果HTTP的返回内容通过Gzip或者Deflate进行压缩，文件的大小已经被很有效的压缩了。因此，如果结合压缩算法，压缩技术的边际收益会变得更小。所以自己权衡和比较返回内容的大小，较短的名字可能仍然是有作用的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解js中let与var声明变量的区别

    ES6 新增了let命令,用来声明局部变量,所声明的变量,只在let命令所在的代码块内有效,而且有暂时性死区的约束. 1.ES6可以用let定义块级作用域变量 代码如下: function f1(){ { var a = 10; let b = 20; } console.log(a); // 10 console.log(b); // Uncaught ReferenceError: b is not defined } f1(); 说明:在ES6之前只有全局作用域和函数作用域,在ES6中新增

  • javascript中let和var以及const关键字的区别

    1.声明后未赋值,表现相同 //一个例子 'use strict'; (function() { var varTest; let letTest; console.log(varTest); //输出undefined console.log(letTest); //输出undefined }()); 2.使用未声明的变量,表现不同 //一个例子 (function() { console.log(varTest); //输出undefined(注意要注释掉下面一行才能运行) console.

  • 了解JavaScript中let语句

    了解JavaScript中let语句

    使用let语句,允许你在JavaScript中创建块范围局部变量.let语句是在JavaScript的ECMAScript 6标准中引入的. 在你往下了解let语句之前,我建议你先查看基于Infragistics jQuery库的Ignite UI,它可以帮助你更快地编写和运行Web应用程序.你可以使用JavaScript库的Ignite UI来快速解决HTML5,jQuery,Angular,React或ASP.NET MVC中复杂的LOB需求.(你可以在这里下载Ignite UI的免费试用版

  • 基于Eclipse 的JSP/Servlet的开发环境的搭建(图文)

    基于Eclipse 的JSP的开发环境的搭建 说明:顺利地开发.测试和运行JSP程序少不了规范而安全的开发环境,本文将会详细地展示如何搭建JSP的开发环境. 内容详尽,适合零基础学者作为学习参考 . 一.JSP介绍: 1.JSP全称Java Server Pages,是一种动态网页开发技术.它使用JSP标签(通常以<%开头以%>结束)在HTML网页中插入Java代码. 2.JSP是一种Java servlet,主要用于实现Java web应用程序的用户界面部分.网页开发者们通过结合HTML代码

  • JavaScript中var、let、const区别浅析

    下面通过代码给大家介绍JavaScript中var.let.const区别,具体代码如下所述: //1.var定义的变量可以修改,如果不初始化会输出undefined,不会报错. var a; console.log(a); //undefined //2.let是块级作用域,函数内部使用let定义后,对函数外部无影响. let c = 3; console.log(c) function change(){ let c = 6; console.log(c) } change(); (1)只要

  • servlet+jsp实现过滤器 防止用户未登录访问

    我们可能经常会用到这一功能,比如有时,我们不希望用户没有进行登录访问后台的操作页面,而且这样的非法访问会让系统极为的不安全,所以我们常常需要进行登录才授权访问其它页面,否则只会出现登录页面,当然我的思路: 一种是在jsp页面进行session的判断,如果不存在该用户的session,就跳转到登录页面,否则执行jsp页面代码,但是你会发现这样做逻辑也简单,但是非常麻烦,如果有很多个jsp,那么就要写多个判断. 另一种则是利用过滤器,访问页面时都进行过滤验证,如果存在该用户session,则访问该页

  • 5分钟快速掌握JS中var、let和const的异同

    前言 首先,一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系? ECMAScript是一个国际通过的标准化脚本语言.JavaScript由ECMAScript和DOM.BOM三者组成.可以简单理解为:ECMAScript是JavaScript的语言规范,JavaScript是ECMAScript的实现和扩展. 2011 年,ECMAScript 5.1 版发布.之前我们大部分人用的也就是ES5 2015 年 6 月,ECMAScript 6 正式通过,成为国际标准

  • js中let能否完全替代IIFE

    复制代码 代码如下: ^[\s\S   ]*\n ^[\s\S ]*\n [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 前言 最近,我写了一篇关于syntax of Java's IIFE pattern的文章,来解释为什么我们用现在的方式来写立即执行函数表达式.少数的读者批评文章过时了,都在争论在ECMA 2015中介绍的块级作用域变量使IIFE变得过时了. 恰恰相反,立即执行函数表达式一点也没有过时!因为这个理由,我决定写这篇后续文章来介绍一些立即执行函数表达式的常见用法.注意

  • JS中关于事件处理函数名后面是否带括号的问题

    今天总结一个关于事件处理程序的小细节.首先回顾一下事件处理的一些概念. JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动.有两种常见的形式,分别是DOM Level 0 和DOM Level 2.这两种方式最大的区别就在于DOM 0级事件处理只能用于事件冒泡,而DOM 2级事件处理却可以通过设置第三个参数来分别支持事件冒泡和事件捕获. DOM 0级事件处理一般是直接把一个函数分配给一个事件处理程序,既可以在元素中直接分配一个事件处理程序,如方式一所示;也可以在脚本中把函数分配给事件处

  • 详解Node.js中的事件机制

    前言 在前端编程中,事件的应用十分广泛,DOM上的各种事件.在Ajax大规模应用之后,异步请求更得到广泛的认同,而Ajax亦是基于事件机制的. 通常js给我们的第一印象就是运行在客户端浏览器上面的脚本,通过node.js我们可以在服务端运行javascript. node.js是基于单线程无阻塞异步式的I/O,异步式的I/O指的是当遇到I/O操作的时候,线程不阻塞而是进行下面的操作,那么I/O操作完成之后,线程时如何知道该操作完成的呢? 当操作完成耗时的I/O操作之后,会以事件的形式通知I/O操

  • js中递归函数的使用介绍

    下面我们就做一个10以内的阶乘试试看吧: js中递归函数的使用 function f(num){ if(num alert("10!的结果为:"+f(10)); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 递归函数的调用就说这么多了 js递归函数调用自身时的保险方式. 来自js高级程序设计 一个典型阶乘递归函数: 复制代码 代码如下: function fact(num){ if (num<=1){ return 1; }else{ return num*fact

  • JS中的Replace()传入函数时的用法详解

    replace方法的语法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string),reExp可以是正则表达式对象(RegExp)也可以是字符串(string),replaceText是替代查找到的字符串.. 废话不多说了,直接给大家贴代码了,具体代码如下所示: <script> var str = "a1ba2b"; var reg = /a.b/g; str = str.replace(reg,func

  • JS中的正则表达式及pattern的注意事项

    RegExp对象的创建: 常规的正则表达式的创建可用直接量,即斜杠 "/" 括起来的字符.但在要求参数变化的环境下,RegExp()构造函数是更好的选择: var reg1 = /'\w+'/g; var reg2 = new RegExp('\'\\w+\'','g'); 对比两种创建方式,RegExp中的第一个参数为要创建的正则字符串,一方面注意,因为不是直接量的表示形式,因此不用斜杠" / "括起来了:而是字符串中必须要对引号" ' "和转

  • JS中Location使用详解

    javascript中location地址对象描述的是某一个窗口对象所打开的地址.要表示当前窗口的地址,只需要使用"location"就行了:若要表示某一个窗口的地址,就使用"<窗口对象>.location". 一.JS中Location的含义 1.Location 对象存储在 Window 对象的 Location 属性中,表示那个窗口中当前显示的文档的 Web 地址.它的 href 属性存放的是文档的完整 URL,其他属性则分别描述了 URL 的各个

  • escape函数解决js中ajax传递中文出现乱码问题

    本文实例讲述了escape函数解决js中ajax传递中文出现乱码问题,分享给大家供大家参考.具体方法如下: 一.问题描述: 本来网页特效中的escape()是将中文按iso-8859-1字符集进行url编码的,那样通过 request.getparameter()是能直接获取到请求参数的,但后来的javascript将escape()换成了unicode字符集编 码,如此一来,在jsp教程和servlet中就没法直接拿到请求参数了,具体原因我也不知道. 二.解决办法: 1.首先对中文字符进行两次

  • 原生JS中slice()方法和splice()区别

    slice()方法和splice()方法都是原生js中对数组操作的方法.那么他两种有什么区别呢?今天通过本文教程给大家简单介绍下. slice(),返回一个新的数组,该方法可从已有的数组中返回选定的元素.例如:arrObject(start,end),start是必选的.规定从何处开始选取,如果是负数,则是从数组元素尾部选取,也就是说-1指最后一个元素,-2指倒数第二个元素:end是可选元素.规定从何处结束选取.该参数没有,表示从开始位置截取到数组末尾,如果是负数,表示从数组末尾向前截取元素.该

  • import与export在node.js中的使用详解

    import与export在node.js中的使用详解

    简述 import与export是es6中模块化的导入与导出,node.js现阶段不支持,需要通过babel进行编译,使其变成node.js的模块化代码.(关于node.js模块,可参考其他node.js模块化的文章) export 曝露 使用export可以曝露出方法.对象.字符串等等,如下代码 //写法1 export var foo=function(){ console.log(1); } //写法2 var bar ={a:"1",b:2}; export {bar}; //

随机推荐