ES6块级作用域及新变量声明(let)

很多语言中都有块级作用域,但JS没有,它使用var声明变量,以function来划分作用域,大括号“{}” 却限定不了var的作用域。用var声明的变量具有变量提升(declaration hoisting)的效果。

ES6里增加了一个let,可以在{}, if, for里声明。用法同var,但作用域限定在块级,let声明的变量不存在变量提升。

示例1: 块级作用域 if

function getVal(boo) {

    if (boo) {

        var val = ‘red‘

        // ...

        return val

    else {

        // 这里可以访问 val

        return null

    }

    // 这里也可以访问 val

}

变量val在if块里声明的,但在else块和if外都可以访问到val。

把var换成let,就变成这样了

function getVal(boo) {

    if (boo) {

        let val = ‘red‘

        // ...

        return val

    else {

        // 这里访问不到 val

        return null

    }

    // 这里也访问不到 val

}

  

示例2: 块级作用域 for


1

2

3

4

5

6

function func(arr) {

    for (var i = 0; i < arr.length; i++) {

        // i ...

    }

    // 这里也可以访问到i

}

变量i在for块里声明的,但在for外也能访问到。

把var换成let,for外就访问不了i


1

2

3

4

5

6

function func(arr) {

    for (let i = 0; i < arr.length; i++) {

        // i ...

    }

    // 这里访问不到i

}

  

示例3: 变量提升(先使用后声明)


1

2

3

4

5

function func() {

    // val先使用后声明,不报错

    alert(val) // undefined

    var val;

}

变量val先使用后声明,输出undefined,也不报错。

把var换成let,就报错了


1

2

3

4

5

function func() {

    // val先使用后声明,报语法错

    alert(val)

    let val;

}

  

示例4: 变量提升(先判断后声明)


1

2

3

4

5

6

function func() {

    if (typeof val == ‘undefined‘) {

        // ...

    }

    var val = ‘‘

}

使用typeof判断时也可以再var语句的前面

但把var换成let,if处报语法错


1

2

3

4

5

6

function func() {

    if (typeof val == ‘undefined‘) {

        // ...

    }

    let val = ‘‘;

}

ES6规定,如果代码块中存在let,这个区块从一开始就形成了封闭作用域。凡是在声明之前就使用,就会报错。即在代码块内,在let声明之前使用变量都是不可用的。语法上有个术语叫“暂时性死区”(temporal dead zone),简称TDZ。当然TDZ并没有出现在ES规范里,它只是用来形象的描述。

let的注意事项

1. 不能重复声明


1

2

3

4

5

6

7

// var和let重复声明

var name = ‘Jack‘;

let  name = ‘John‘;

// 两个let重复声明

let age = 24;

let age = 30;

执行时报语法错

2. 有了let后,匿名函数自执行就可以去掉了


1

2

3

4

5

6

7

8

9

10

11

12

13

// 匿名函数写法

(function () {

  var jQuery = function() {};

  // ...

  window.$ = jQuery

})();

// 块级作用域写法

{

  let jQuery = function() {};

  // ...

  window.$ = jQuery;

}

时间: 2024-10-05 02:36:00

ES6块级作用域及新变量声明(let)的相关文章

let和ES6块级作用域

es6中的块级作用域 之前在看360的培训课程时,知道了{...}是个块级作用域,错误的认为{...}中声明的函数变量都不会被外界访问到,在看了你不知道的JS之后,发现并不是这样的.在块级作用域中使用let声明的变量外界无法访问到. eg: var foo = true; if (foo) { let bar = foo * 2; bar = something( bar ); console.log( bar ); } c onsole.log( bar ); // ReferenceErro

javascript中的闭包、模仿块级作用域和私有变量

闭包是指有权访问另一个函数作用域中的变量的函数.创建闭包的常见方式为:在一个函数内部创建另一个函数. "当某个函数被调用时,会创建一个执行环境(execution context)及相应的作用域链.然后,使用arguments和其他命名参数的值来初始化函数的活动对象(activation object).但在作用域链中,外部函数的活动对象始终处于第二位,外部函数的外部函数的活动对象出于第三位.....直至作用域链终点的全局执行环境." function creawteCompariso

ES6——块级作用域

前面的话 过去,javascript缺乏块级作用域,var声明时的声明提升.属性变量等行为让人困惑.ES6的新语法可以帮助我们更好地控制作用域.本文将详细介绍ES6新引入的块级作用域绑定机制.let和const声明机制及最佳实践 var声明 [变量提升] var声明会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined function getValue(condition){ if(condition){ var value = 'blue'; return value; }

ES6 块级作用域

块级作用域 // (function(){})();//这个是命名空间->立刻执行函数,代码在{}中写着 // 在es6中可以可以直接使用{} // { // let a = 1; // console.log(a); // } // 块级作用域写在for循环中 { let aLi = document.querySelectorAll("li"); for(let i = 0;i<aLi.length;i++){ aLi[i].onclick = function(){

js没有块级作用域

今天看一篇介绍ECMAscript6的博文时,看到let命令的时候突然有点蒙逼....... let命令:let用于变量声明,与var用法类似,但是let是一个局部变量,只在声明的代码块中有效. { let a = 10; var b = 20; } a // not defined b // 20 看到这我觉得这个块级作用域是函数作用域,但是块级作用域和函数作用域是不一样的,比如: function demo(){ var a=1; } console.log(a); a//not defin

JS-闭包(Closures)和let声明块级作用域变量

闭包: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures 闭包是函数和声明该函数的词法环境的组合. let: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let let 语句声明一个块级作用域的本地变量,并且可选的将其初始化为一个值. 例:闭包和let修正匿名函数访问的变量 function foo(){ v

ES6标准入门 第二章:块级作用域 以及 let和const命令

一.块级作用域 1.为什么需要块级作用域? ES5中只有全局作用域和函数作用域,带来很多不合理的场景. (1)内层变量可能会覆盖外层变量: var tem = new Date(); function f(){ console.log(tmp); if(false) { var tmp = "hello world"; } } f(); //undefined 变量提升导致了外层的内层的tmp变量覆盖了外层的tmp变量. (2)用来计数的循环变量泄露为全局变量: var s = &qu

ES6之块级作用域

一.前言 在ECMAScript6(以下简称ES6)之前,ECMAScript的作用域只有两种: 1.  全局作用域: 2.  函数作用域. 正是因为有这两种作用域,所以在JavaScript中出现一术语--“变量提升(hoisting)”. 如下: function func(){ console.log(test); var test = 1; }; func(); 在node环境执行上述代码,结果为: 之所以为’undefined’,原因就在于‘变量提升’,在进入func函数时,将所有通过

ES6 之 let和const、块级作用域

let let 声明的变量只在其所在的代码块内有用 不存在变量提升 只要在会计作用域中存在let命令,它所声明的变量就绑定这个区域 不允许重复声明 ES6块级作用域 外层代码不受内存代码块的影响 ES6规定,在块级作用域之中,函数声明类似于let 允许在块级作用域内声明函数 函数声明会提升到所在块级作用域的头部 const const声明一个只读常量,一旦声明,常量的值就不能改变 只在声明所在的块级作用域内有效 const声明的常量与let命令相同,只在声明所在的块级作用域内有效 const不存