js中的块级作用域
概述
函数是js中最常见的作用域单元, 声明在一个函数内部的变量或函数会在所处的作用域中隐藏起来, 这是有意为之的非常好的设计原则.
但是随着js的发展, 我们有了某个代码块(通常指{..}内部)隐藏变量或函数的需求, 这就是块级作用域的由来.
下面是不用es6实现块级作用域的三种方法, 供以后开发时参考, 相信对其他人也有用.
IIFE
IIFE, 即立即执行函数, 用一个函数作用域(闭包)来模拟块级作用域.示例如下:
//es6中的块级作用域
{let a = 1;
console.log(a);}
console.log(a); //ReferenceError
//IIFE实现
(function() {
var a = 1;
console.log(a);
})();
console.log(a); //Undefined
可以看到, 由于变量提升, a不再是未初始化, 而是未定义. 这是使用IIFE不好的一方面, 但还可以接受. 另一方面由于闭包拥有很多不好的特性, 比如this指向改变啊, return,break和continue发生变化啊, 内存泄漏问题啊等等, 所以IIFE并不是一个普适的方案.
throw
从es3开始, js中就已经定义了一种块级作用域, 它就是throw函数. 示例如下:
//es6中的块级作用域
{let a = 1;
console.log(a);}
console.log(a); //ReferenceError
//throw函数实现
{
try {
throw undefined;
} catch(a) {
a = 2;
console.log(a);
}
}
console.log(a); //ReferenceError
之前我在看别人的代码的时候觉得用throw好像很高级, 可能是为了实现块级作用域吧.
当有多个变量时, 我们一般不用a, 而是用err123456等.
优雅的方案
如果用babel编译一下如上代码, 会发现编译出来的es5与上面的方案都不同, 它是这么编译的.
//es6中的块级作用域1
{let a = 1;
console.log(a);}
console.log(a); //ReferenceError
//babel编译1
"use strict";
{
var _a = 1;
console.log(_a);
}
console.log(a); //ReferenceError
//es6中的块级作用域2
{let a = 1;
console.log(a);
let _a = 2;
console.log(_a);
}
console.log(a);
console.log(_a);
//babel编译2
"use strict";
{
var _a2 = 1;
console.log(_a2);
var _a3 = 2;
console.log(_a3);
}
console.log(a);
console.log(_a);
哈哈, 是不是很优雅? 虽然会在全局初始化_a等变量, 但是没有太大的问题.
js中的块级作用域的更多相关文章
- 一个经典的js中关于块级作用域和声明提升的问题
function functions(flag) { if (flag) { function getValue() { return 'a'; } } else { function getValu ...
- JS中的块级作用域,var、let、const三者的区别
1. 块作用域{ } <script type="text/javascript"> { var a = 1; console.log(a); // 1 } conso ...
- 可怜的js居然没有块级作用域
js中在一个函数中定义一个for循环:for(var i=0;i<5;i++) 其中的i并不会随着for循环的结束就销毁,i会一直存在该函数中,这就是js和其他语言的区别,也就是js没有块级作用 ...
- javascript中模仿块级作用域
学过 javascript 的都知道 javascript 里面没有块级作用域的概念,这就意味着在块语句中定义的变量,实际上是在包含函数中而非语句中创建的,看下面的例子: function outPu ...
- es6中添加块级作用域的目的
原本只有函数作用域和全局作用域两种,这就导致出现很多不方便的地方: 1)for循环问题:在看js高程的时候,纠结在第七章好久,就是一个这样的实例 function createFunctions(){ ...
- Javascript中没有块级作用域(模仿)
在C/C++中,由花括号封闭的代码块都有自己的作用域,也就是块级作用域(私有作用域).而在javascript中则没有块级作用域,首先来看一段代码: function test(){ for(var ...
- JavaScript的作用;JS常见的三种对话框;==和===的区别;函数内部参数数组arguments在函数内部打印实参;JS的误区:没有块级作用域
JS:客户端(浏览器)脚本语言 弱类型 基于原型 事件驱动 不需要编译(直接运行) JS的作用:表单验证,减轻服务端的压力 添加页面动画效果 动态更改页面内容 Ajax网络请求 (一)常见的对 ...
- Javascript高级编程学习笔记(25)—— 函数表达式(3)模仿块级作用域
昨天写了闭包 今天就来聊聊块级作用域的事情 在绝大多数编程语言中,都有块级作用域这个概念 什么是块级作用域呢? 前面我们在刚开始讲的时候说过,JS中的大括号(不在赋值运算符的后面)表示代码块 块级作用 ...
- 你不知道的JS之作用域和闭包(三)函数 vs. 块级作用域
原文:你不知道的js系列 在第(二)节中提到的,标识符在作用域中声明,这些作用域就像是一个容器,一个嵌套一个,这个嵌套关系是在代码编写时定义的. 那么到底是什么产生了一个新的作用域,只有函数能做到 ...
随机推荐
- unable to auto-detect email address
git错误:unable to auto-detect email address 2017年11月14日 08:51:08 陈君豪 阅读数:7914 idea 用git更新的时候报错,详细错误信 ...
- 在阿里云Ubuntu 14.04 Linux服务器上安装docker
参考 How To Install and Use Docker: Getting Started 这篇最靠谱的文档在阿里云 Ubuntu 14.04 服务器上成功安装 docker . ---- ...
- 最小费用最大流 HDU1533
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1533 #include<bits/stdc++.h> #define fi first ...
- Selenium WebDriver 对Cookie进行处理绕过登录验证码
首先需要手动登录一次你的测试网站,去Chrome的F12中获取这个网站的cookie信息,找到对应的保存登录信息的cookie,接下来在代码中将上述的cookie信息通过webdriver写入的自动化 ...
- django admin 模块添加 static
目前路径是在 /var/www/jastme/static 但是admin的静态文件不在这个位置,那么怎么办呢? 首先到项目下,就是有manage.py的这个目录 编辑项目下的setting.py 首 ...
- mybatis的基础Dao
话不多说,直接贴代码吧,因为很多博客都需要用到这个基础dao,怕大家不好查询. 这个基类主要是使用了泛型,这样我就不必为每一个实体都写一个dao,大大节省了时间.其中sqlSessionTemplat ...
- 442. Find All Duplicates in an Array找出数组中所有重复了两次的元素
[抄题]: Given an array of integers, 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and o ...
- Head First Servlets & JSP 学习笔记 第十三章 —— 过滤器的威力
过滤器可能是最强大的Web应用开发工具了! 与Servlet非常类似,过滤器就是Java组件,请求发送到Servlet之前,可以用过滤器截获和处理请求:另外Servlet结束工作之后,但在响应发回给客 ...
- javascript 新建实例对象
在main js里面new 这样一个实例算怎么回事,如果不这么new, ToolBar里就会报错: Portal.gbl = { constants : new Portal.common.Const ...
- tiny4412 --Uboot移植(3) 时钟
开发环境:win10 64位 + VMware12 + Ubuntu14.04 32位 工具链:linaro提供的gcc-linaro-6.1.1-2016.08-x86_64_arm-linux-g ...