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 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
JS 文字符串转换unicode编码函数
May 30 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
JS去除iframe滚动条的方法
Apr 01 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 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
在JavaScript中调用php程序
2009/03/09 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
php jsonp单引号转义
2014/11/23 PHP
PHP内核探索之变量
2015/12/22 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
Python实现数据库编程方法详解
2015/06/09 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
wxpython绘制圆角窗体
2019/11/18 Python
浅析Python __name__ 是什么
2020/07/07 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
python 实现aes256加密
2020/11/27 Python
会计自荐信范文
2014/03/09 职场文书
社区平安建设方案
2014/05/25 职场文书
作风转变心得体会
2014/09/02 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
世界地球日活动总结
2015/02/09 职场文书
上课迟到检讨书
2015/05/06 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python
Java版 单机五子棋
2022/05/04 Java/Android