深入理解ES6学习笔记之块级作用域绑定

众所周知,js中的var声明存在变量提升机制,因此ESMAScript 6引用了块级作用域来强化对变量生命周期的控制
let const 声明不会被提升,有几个需要注意的点

1、不能被重复声明

假设作用域中已经存在某个标识符(无论该标识符是通过var声明还是let、const变量声明),此时再使用let或const关键定声明会抛错

var count=10
let count=20// 此处则会抛出错误,因为同一作用域内不能重复声明

如果当前作用域内嵌另一个作用域,便可在内嵌的作用域中用let声明同名变量

var count=10
if(true){
  let count=20
}

2、const声明的常量必须进行初始化

像下面这样声明就会报错

const name;//语法错误,常量未初始化

3、不可以为const定义的常量再赋值,真正的本质是const声明不允许修改绑定,但允许修改值(也就是说const声明对象后,可以修改该对象的属性值)

const person={
 name:'angela'
}
//可以修改对象属性的值
person.name='yun'
// 修改绑定则会抛出语法错误
person={
 'name':'Shining'
}

4、临时性死区(Temporal Dead Zone)

JavaScript引擎在扫描代码发现变量声明时,要么将它们提升至作用域顶部(遇到var声明),要么将声明放到TDZ中(遇到let和const声明),访问TDZ中的变量会触发运行时错误,只有执行过变量声明语句后,变量才会从TDZ中移出,才能正常访问
如下代码就因为在if块级作用域内执行console.log时value已经在TDZ中了,以前typeof是一个相对不易出错的操作符,但其实也无法阻挡引擎抛出错误

在声明前访问块级绑定会导致错误,因为绑定在临时死区中

if (true) {
 console.log(typeof value)//引用错误
 let value = 'blue'
}

而在let声明的作用域外对该变量使用typeof则不会报错

console.log(typeof value)
if (true) {
 let value = 'blue'
}

5、块级作用域绑定

之前在循环中创建函数都有些不可言状

var funcs = []
for (var i = 0; i < 10; i++) {
 funcs.push(function () {
  console.log(i)
 })
}
funcs.forEach(function (func) {
 func()
})

因为循环内部创建的函数全部都保留了对相同变量的引用,循环结束时变量i的值为10,所以结果会输出10次10

于是大家会在循环中使用立即调用函数表达式,以强制生成计数器变量的副本,以便输出1、2、3......

var funcs = []
for (var i = 0; i < 10; i++) {

 funcs.push((function (value) {
  return function () {
   console.log(value)
  }
 })(i))

}
funcs.forEach(function (func) {
 func()
})

有了let,立即调用函数表达式则可以简化,其实每次迭代循环都会创建一个新变量,并以之前迭代中同名变量的值将其初始化

var funcs = []
for (let i = 0; i < 10; i++) {
//其实是每次循环的时候let声明都会创建一个新变量i并将其初始化为i的当前值,所以在循环内部创建的每个函数都能得到属于它们自己的i的副本
 funcs.push(function () {
  console.log(i)
 })
}
funcs.forEach(function (func) {
 func()//这里输出是0 然后是1、2....9
})

这个特性同样适用于for in中,举例来说

var funcs = [],
 obj = {
  a: true,
  b: true,
  c: true
 }
for (let key in obj) {
 funcs.push(function () {
  console.log(key)
 })
}
funcs.forEach(function (func) {
 func()//输出的是a b c
})

6、循环中的let声明特性同样适用于const声明,唯一的区别是const不能更改绑定

上面的例子中把let换成const同样输出a b c

var funcs = [],
 obj = {
  a: true,
  b: true,
  c: true
 }
//之所以可以运用for in 和for of循环中,是因为每次迭代不会修改已有绑定,而是会创建一个新绑定
for (const key in obj) {
 funcs.push(function () {
  console.log(key)// 同样输出a b c 唯一的区别是循环内不能更改key的值
 })
}
funcs.forEach(function (func) {
 func()
})

下面的这个例子则会报错,因为在for循环中更改了i的绑定而const常量不能更改绑定

var funcs = []
for (const i = 0; i < 10; i++) {
 funcs.push(function () {
  console.log(i)
 })
}
funcs.forEach(function (func) {
 func()
})

7、全局作用域绑定

当var被作用于全局作用域时,它会创建一个新的全局变量作用全局对象(浏览器环境中的window对象)的属性,这意味着用var很可能会无意中覆盖一个已经存在的全局变量

从上图代码中看出即便是全局对象RegExp Array都会被覆盖

但是let或const会在全局作用域下创建一个新的绑定,但该绑定不会添加为全局对象的属性,换句话说用let或const不能覆盖全局变量,而只能遮蔽它

这个时候的RegExp和window.RegExp是不相同的

let RegExp='hello'
console.log(RegExp) //hello
console.log(window.RegExp===RegExp)//false

const ncz='hi'
console.log(ncz)
console.log("ncz" in window)

最佳实践:

默认使用let而不是var

默认使用const,只有确实需要改变变量的值时使用let

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 为什么JavaScript没有块级作用域

    最近在看ES2015 实战,里面有句话是这么说的 JavaScript 中没有块级作用域 可能会对这个问题大家可能有点不理解,先看个例子 var a = [] for(var i = 0; i < 10; i++){ a[i] = function(){ console.log(i); } } a[6](); 我想很多人会觉得这个问题的结果是6,然而很不幸,答案是10.在试试别的呢.a[7]().a[8]().a[8]()结果都是10!! 由于JS在处理primitive的变量的时候,很多时候会

  • ES6学习教程之块级作用域详解

    前言 众所周知ES5之前javascript语言只有函数作用域和全局作用域,使用var来声明变量,var声明的变量还存在变量提升使人困惑不已.我们先来复习一下ES5的var声明,再对比学习let和const . var var声明之函数作用域和全局作用域. 来段代码体会一下: function getName() { if (1 + 1 === 2) { var name = 'xixi'; } console.log(name); } getName();//xixi 在c或java语言中na

  • ES6使用let命令更简单的实现块级作用域实例分析

    本文实例讲述了ES6使用let命令更简单的实现块级作用域.分享给大家供大家参考,具体如下: let 带来了更简单的块级作用域 1. ES6新增了let命令,用于声明变量.其与var的不同在于,用let声明的变量只在 { } 内有效.这使得我们可以很方便的实现块级作用域,不再使用立即实行函数. { let a=1; var b=2; } console.log(a); //undefined console.log(b); //2 在for循环中使用let可以有效避免全局变量污染. 2. let不

  • JavaScript的作用域和块级作用域概念理解

    作用域永远都是任何一门编程语言中的重中之重,因为它控制着变量与参数的可见性与生命周期.讲到这里,首先理解两个概念:块级作用域与函数作用域. 什么是块级作用域呢? 任何一对花括号({和})中的语句集都属于一个块,在这之中定义的所有变量在代码块外都是不可见的,我们称之为块级作用域. 函数作用域就好理解了(*^__^*) ,定义在函数中的参数和变量在函数外部是不可见的. 大多数类C语言都拥有块级作用域,JS却没有.请看下文demo: //C语言 #include <stdio.h> void mai

  • 深入理解ES6学习笔记之块级作用域绑定

    众所周知,js中的var声明存在变量提升机制,因此ESMAScript 6引用了块级作用域来强化对变量生命周期的控制 let const 声明不会被提升,有几个需要注意的点 1.不能被重复声明 假设作用域中已经存在某个标识符(无论该标识符是通过var声明还是let.const变量声明),此时再使用let或const关键定声明会抛错 var count=10 let count=20// 此处则会抛出错误,因为同一作用域内不能重复声明 如果当前作用域内嵌另一个作用域,便可在内嵌的作用域中用let声

  • JavaScript块级作用域绑定以及状态提升详解

    目录 前言 作用域/执行上下文 var声明 块级声明 不声明的变量 1.不使用关键字声明变量 2.使用var声明的变量 var声明和块级声明的区别 全局作用域绑定 状态提升 块级绑定的最佳实践 函数声明提升 总结 前言 在ES6之前,JavaScript只有经典的var声明,这给开发者带来了很多的困扰.在ES6出现后,又增加了let和const关键字的声明方式.这里会讲有关变量声明,作用域,状态提升相关知识. 作用域/执行上下文 在JavaScript的世界里,作用域可以分为三种,分别是全局作用

  • 深入理解es6块级作用域的使用

    一.var 声明与变量提升机制 在JavaScript中使用var定义一个变量,无论是定义在全局作用域函数函数的局部作用域中,都会被提升到其作用域的顶部,这也是JavaScript定义变量的一个令人困惑的地方.由于es5没有像其它类C语言一样的块级作用域,因此es6增加了let定义变量,用来创建块级作用域. 我们来看一个var定义变量的示例: function setName(){ if(condition){ var name = 'loho'; console.log(name); }els

  • Javascript中的作用域及块级作用域

    一.块级作用域的说明 在学习JavaScript的变量作用域之前,我们应当明确几点: a.JavaScript的变量作用域是基于其特有的作用域链的. b.JavaScript没有块级作用域. c.函数中声明的变量在整个函数中都有定义. javascript的变量作用域,与平时使用的类C语言不同,例如C#中的代码: static void Main(string[] args) { if(true) { int number=10; } Console.WriteLine(number); } 这

  • ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析

    本文实例讲述了ES6学习笔记之字符串.数组.对象.函数新增知识点.分享给大家供大家参考,具体如下: 1.模板字符串 反引号`` 内用于输入格式化的字符串文本,在``内可以将表达式用${}包含起来 let str=` <!DOCTYPE html> <html lang="en"> <body> <div> <p class="pClass">格式化字符串</p> </div> <

  • ES6学习笔记之let与const用法实例分析

    本文实例讲述了ES6学习笔记之let与const用法.分享给大家供大家参考,具体如下: 在ES6中不是var,而是通过let来声明变量,用const来声明常量,有如下一些不同: 1.let与const作用域只限于当前代码块{},而var则没有这种限制. 2.使用let.const申明的变量作用域不会被提升.例如: console.log(str); var str="var declare"; 控制台输出undefined:因为变量申明是在任意代码执行前处理的,在代码区中任意地方声明变

  • 深入理解JavaScript中的块级作用域、私有变量与模块模式

    本文详细的介绍了JavaScript中的块级作用域.私有变量与模块模式,废话就不多说了,具体如下: 1.块级作用域(私有作用域),经常在全局作用域中被用在函数外部,从而限制向全局作用域中添加过多的变量和函数. (function(count){ for(var i=0;i<count;i++){ console.log(i);//=>0.1.2.3.4 } console.log(i);//=>5 })(5); (function(){ var now=new Date(); if(no

  • ES6学习笔记之Set和Map数据结构详解

    本文实例讲述了ES6学习笔记之Set和Map数据结构.分享给大家供大家参考,具体如下: 一.Set ES6提供了新的数据结构Set.类似于数组,只不过其成员值都是唯一的,没有重复的值. Set本身是一个构造函数,用来生成Set数据结构. 1 . Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化. var s = new Set(); var set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4] var items =

随机推荐