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 相关文章推荐
javascript fullscreen全屏实现代码
Apr 09 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 Javascript
如何用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 多维数组排序(usort,uasort)
2010/06/30 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
Python实现的多线程端口扫描工具分享
2015/01/21 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
浅析python协程相关概念
2018/01/20 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
个人简历自我评价八例
2013/10/31 职场文书
后勤部长岗位职责
2013/12/14 职场文书
中专生自我鉴定
2013/12/17 职场文书
应届生自荐书
2014/06/23 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
大学毕业论文致谢词
2015/05/14 职场文书