其基本原理就是JavaScript的作用域链,下面以对比的方式来展示一下函数级作用域和块级作用域。

函数级作用域

var fns = [];
for (var i = 0; i < 5 ; i++){
//fns.push(() => {console.log(i)});
fns.push(function(){
console.log(i)
})
}
fns.forEach(fn => fn());

运行结果是

5
5
5
5
5

块级作用域

var fns = [];
for (let i = 0; i < 5 ; i++){
//fns.push(() => {console.log(i)});
fns.push(function(){
console.log(i)
})
}
fns.forEach(fn => fn());

运行结果是

0
1
2
3
4

004.ES2015和ES2016新特性--块级作用域变量的更多相关文章

  1. 003.ES2015和ES2016新特性--类.md

    JavaScript使用的是基于原型的OO模型,用对象字面量或者函数来实例化对象,用原型链来实现继承. 这样对于数据传统C++.Java的OO范式的开发者来说,会感到比较困惑,于是从ES2015开始逐 ...

  2. 002.ES2015和ES2016新特性--箭头函数.md

    1. ES2015中的箭头函数 JavaScript有一级函数的特性,也就是说,函数像其他值一样可以当成参数传来传去. var result = [1,2,3].reduce(function(tot ...

  3. JS-闭包(Closures)和let声明块级作用域变量

    闭包: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures 闭包是函数和声明该函数的词法环境的组合. let: https ...

  4. ES6块级作用域及新变量声明(let)

    很多语言中都有块级作用域,但JS没有,它使用var声明变量,以function来划分作用域,大括号“{}” 却限定不了var的作用域.用var声明的变量具有变量提升(declaration hoist ...

  5. ECMAScript 6学习笔记(二):let和块级作用域

    同步发布于:https://mingjiezhang.github.io/(转载请说明此出处). ES6中加入了let,也让JavaScript拥有了块级作用域. 没有块级作用域的JavaScript ...

  6. ES6的 let const 以及块级作用域

    let声明变量 用法类似于var,但是所声明的变量只在let所在的代码块内有效. 1 . 在ES6环境下,let声明的变量不能在声明之前调用. 例: console.log(i); //会报错,这叫做 ...

  7. 你不知道的JS之作用域和闭包(三)函数 vs. 块级作用域

      原文:你不知道的js系列 在第(二)节中提到的,标识符在作用域中声明,这些作用域就像是一个容器,一个嵌套一个,这个嵌套关系是在代码编写时定义的. 那么到底是什么产生了一个新的作用域,只有函数能做到 ...

  8. ES6系列之let/const及块级作用域

    本系列是在平时阅读.学习.实际项目中有关于es6中的新特性.用发的简单总结,目的是记录以备日后温习:本系列预计包含let/const.箭头函数.解构.常用新增方法.Symbol.Set&Map ...

  9. ES6-let、const和块级作用域

    1.介绍 总的来说,ES6是在ES2015的基础上改变了一些书写方式,开放了更多API,这样做的目的最终还是为了贴合实际开发的需要.如果说一门编程语言的诞生是天才的构思和实现,那它的发展无疑就是不断填 ...

随机推荐

  1. 迭代Iterator的用法

    迭代→遍历: 一个标准化遍历各类容器里面的所有对象的方法类(典型的设计模式) 把访问逻辑从不同类型的集合类中抽象出来,从而避免向客户端暴露集合的内部结构 迭代(Iterator)与枚举(Enumera ...

  2. HTML-虚线框3例

    第一例: 代码 <HR style=> 第二例: 代码 <DIV style="BORDER-TOP: #00686b 1px dashed; OVERFLOW: hidd ...

  3. 通过配置host,自定义域名让本地访问

    最近服务器这块一直由我来维护,我们开发的项目很多域名根本没有解析,而是仅仅配置了host,就可以本地访问服务器了.感觉很有意思,于是乎,打算试一试.结果弄了许久,最后第二天才解决了.把这个艰辛的旅程记 ...

  4. Java 系列之spring学习--springmvc搭建(四)

    一.建立java web 项目 二.添加jar包 spring jar包下载地址http://repo.spring.io/release/org/springframework/spring/ 2. ...

  5. Ztree自动触发第一个节点的点击事件

    1.代码 $(function () { var setting = { //check属性放在data属性之后,复选框不起作用 //check: { // enable: true //}, dat ...

  6. 卡片式大学综合英语词汇(Windows Phone 8.1 RT app)

    简易卡片式记单词app.词库是原滋原味的大学综合英语词汇,包含语音,使用卡片式设计.离线词库,随时随地记单词. 商店:http://www.windowsphone.com/zh-cn/store/a ...

  7. Debian下的内核编译

    如果你装了一台linux的机器,自己没有重新编译内核,那这台机器的效率就大打折扣了,因为默认安装的机器会生成许多不需要的东西,在启动的时候也会比较慢,而你要用的有些东西可能不能工作,比如,现在都把IP ...

  8. jQuery优化性能的十种方法

    1,总是从ID选择器开始继承 例如: <div id="content"> <form method="post" action=" ...

  9. js实现新闻滚动实例

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  10. WampServer更改或重置数据库密码

    WampServer安装后密码是空的, 修改一般有两种方式: 一是通过phpMyAdmin直接修改: 二是使用WAMP的MySql控制台修改. 第一种: ①在phpMyAdmin界面中点击[用户],将 ...