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学习之闭包分析
Dec 02 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 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
第二节 对象模型 [2]
2006/10/09 PHP
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
python统计多维数组的行数和列数实例
2018/06/23 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
用Python解数独的方法示例
2019/10/24 Python
python跨文件使用全局变量的实现
2020/11/17 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
节约用水标语
2014/06/11 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
植树节新闻稿
2015/07/17 职场文书
教师节主题班会方案
2015/08/17 职场文书
环保建议书作文300字
2015/09/14 职场文书
MySQL 数据 data 基本操作
2022/05/04 MySQL
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android