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 相关文章推荐
jquery动态添加删除div 具体实现
Jul 20 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 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
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
Python切片用法实例教程
2014/09/08 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
pandas数据处理之绘图的实现
2020/06/15 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
高考自主招生自荐信
2013/10/20 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
写给医生的感谢信
2015/01/22 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python
Java中使用Filter过滤器的方法
2021/06/28 Java/Android
python中redis包操作数据库的教程
2022/04/19 Python