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 学习笔记(八)javascript对象
Apr 12 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
javascript控制台详解
Jun 25 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
Vue模板语法中数据绑定的实例代码
May 17 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
模仿OSO的论坛(三)
2006/10/09 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
深入理解javascript中defer的作用
2013/12/11 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
解读Python编程中的命名空间与作用域
2015/10/16 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
高校毕业生登记表自我鉴定
2013/11/03 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
2014年店长工作总结
2014/11/17 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
2016公司新年问候语
2015/11/11 职场文书
小学英语课教学反思
2016/02/15 职场文书
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python
redis实现共同好友的思路详解
2021/05/26 Redis
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript