JavaScript中用let语句声明作用域的用法讲解


Posted in Javascript onMay 20, 2016

语法

let variable1 = value1

参数
variable1
要声明的变量的名称。
value1
赋给变量的初始值。

备注
使用 let 语句声明一个变量,该变量的范围限于声明它的块中。  可以在声明变量时为变量赋值,也可以稍后在脚本中给变量赋值。 
使用 let 声明的变量,在声明前无法使用,否则将会导致错误。
如果未在 let 语句中初始化您的变量,则将自动为其分配 JavaScript 值 undefined。

示例:

var l = 10;
{
  let l = 2;
  // At this point, l = 2.
}
// At this point, l = 10.

// Additional ways to declare a variable using let.
let index;
let name = "Thomas Jefferson";
let answer = 42, counter, numpages = 10;
let myarray = new Array();

块级作用域

for(var i = 0; i < 10; i++){}
console.log(i); //10

for(let j = 0; j < 10; j++){}
console.log(j); //"ReferenceError: j is not defined

不存在变量提升

console.log(a); // 输出undefined
console.log(b); // 报错ReferenceError
console.log(c); // 报错ReferenceError
var a = 2;
let b = 2;

注意区别undefined和ReferenceError

暂时性死区(TDZ)
只要进入当前块级作用域,所使用的变量已经存在了,但在声明之前都属于死区,不可进行操作。
注意: typeof不再是100%安全的操作

typeof x; // ReferenceError
typeof y // undefined
let x;

不允许重复声明

let x = 1;
let x; // "SyntaxError: Identifier 'x' has already been declared

var y = 2;
var y = 3; // y = 3

块级作用域

// 匿名函数写法
(function () {
 var tmp = ...;
 ...
}());

// 块级作用域写法
{
 let tmp = ...;
 ...
}

ES5的严格模式规定,函数只能在顶层作用域和函数内声明,其他情况(比如if代码块、循环代码块)的声明都会报错。

// ES5
'use strict';
if (true) {
 function f() {} // 报错
}

ES6由于引入了块级作用域,这种情况可以理解成函数在块级作用域内声明,因此不报错,但是构成区块的大括号不能少

// 报错
'use strict';
if (true)
 function f() {}

声明的全局变量不再是window的属性

"use strict";
var a = 1;
console.log(window.a) // 1

let b = 1;
console.log(window.b) // undefined
Javascript 相关文章推荐
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
js运动框架_包括图片的淡入淡出效果
May 11 Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
详解Vue单元测试case写法
May 24 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
如何用JavaScript实现动态修改CSS样式表
May 20 #Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 #Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 #Javascript
详解JavaScript中的事件流和事件处理程序
May 20 #Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 #Javascript
JavaScript中的Object对象学习教程
May 20 #Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 #Javascript
You might like
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
python datetime中strptime用法详解
2019/08/29 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
学生自我评语
2015/01/04 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
运动会新闻报道稿
2015/07/22 职场文书
六一儿童节致辞
2015/07/31 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server