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 个人笔记(没有整理,很乱)
Jul 07 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
vue使用自定义指令实现拖拽
Jan 29 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基础知识:类与对象(5) static
2006/12/13 PHP
PHP缓存技术的使用说明
2011/08/06 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
javascript判断office版本示例
2014/04/11 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
js实现表格单列按字母排序
2020/08/12 Javascript
Python线性回归实战分析
2018/02/01 Python
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
Python笔记之facade模式
2019/11/20 Python
python 实现控制鼠标键盘
2020/11/27 Python
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
学生会竞选演讲稿学习部
2014/08/25 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
python_tkinter弹出对话框创建
2022/03/20 Python
Spring Boot 实现 WebSocket
2022/04/30 Java/Android