ES6里关于作用域的拓展：块级作用域

　　过去，javascript缺乏块级作用域，var声明时的声明提升、属性变量等行为让人困惑。ES6的新语法可以帮助我们更好地控制作用域。

一、var声明

1、变量提升：var声明会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined

function getValue(condition){
    if(condition){
        var value = ‘blue‘;
        return value;
    }else{
　　　　 //此处可访问变量value，值为undefined
        return null;
    }
　　　　//此处可访问变量value，值为undefined
}

　　如果没有javascript开发经验，可能会认为只有condition为true时，才会创建变量value

　　但实际上，在预编译阶段，javascript引擎会将上面的函数修改成下面这样

function getValue(condition){
    var value;
    if(condition){
        value = ‘blue‘;
        return value;
    }else{
        return null;
    }
}

　　变量value的声明被提升到函数顶部，而初始化操作依然留在原处。如果不注意，很可能引起错误。为些，ES6引入了块级作用域来强化对变量生命周期的控制

2、块级声明

　　块级声明用于声明在指定块的作用域之外无法访问的变量，它存在于

　　（1）函数内部

　　（2）{}之间的块区域内

二、let声明

　　let声明的用法与var声明相同。用let代替var来声明变量，就可以把变量的作用域限制在当前代码块中

function getValue(condition){
    if(condition){
        let value = ‘blue‘;
        return value;
    }else{
         //变量value在此处不存在
        return null;
    }
    //变量value在此处不存在
}

　　变量value改由关键字let进行声明后，不再被提升到函数顶部。执行流离开if块时，value立刻被销毁。如果condition的值为false，就永远不会声明并初始化value

1、禁止重声明

　　假设作用域中已经存在某个标识符，此时再使用let关键字声明它就会抛出错误

var count = 30;
//抛出语法错误
//Uncaught SyntaxError: Identifier ‘count‘ has already been declared
let count = 40;

三、const声明

　　使用const声明的是常量，其值一旦被设定后不可更改。因此，每个通过const声明的常量必须进行初始化

const num = 30;
//抛出语法错误
//Uncaught SyntaxError: Missing initializer in const declaration
const name;

　　const与let声明均是块级标识符，所以常量也只在当前代码块中有效，一旦执行到块外会立即被销毁。常量同样也不会被提升到作用域顶部

1、禁止重声明

　　与let类似，在同一作用域内用const声明已经存在的标识符也会导致语法错误，无论该标识符是使用var，还是let声明的

var message = ‘hello‘;
let num = 10;

//这两条语句都会抛出错误
const message = "goobye";
const num = 30;

2、无法再赋值

　　const与let声明最大的不同之处在于，const声明的常量无法再赋值

let num1 = 10;
num1= 20;

const num2 = 10;
//Uncaught TypeError: Assignment to constant variable.
num2 = 20;

3、可修改对象属性

　　const声明不允许修改绑定，但允许修改值。这也就意味着用const声明对象后，可以修改该对象的属性值

const person = {
    name: ‘huochai‘
};
//可以修改对象属性的值
person.name = ‘match‘;
//Object {name: "match"}
console.log(person);

//抛出语法错误
//Uncaught TypeError: Assignment to constant variable.
person = {
    name: ‘match‘
}

四、临时死区

　　与var不同，let和const声明的变量不会被提升到作用域顶部，如果在声明之前访问这些变量，会引发错误。而从作用域顶部到声明变量语句之前的这个区域，被称为临时死区(temporal dead zone)，简称为TDZ

if(true){
    //undefined
    console.log(typeof value);
    var value = "blue";
}

if(true){
    //Uncaught ReferenceError: value is not defined
    console.log(typeof value);
    let value = "blue";
}

　　但是，在let或const声明的作用域之外使用该变量就不会报错

//undefined
console.log(typeof value);
if(true){
    let value = "blue";
}

五、循环绑定

1、var声明

　　长久以来，var声明使得在循环中创建函数异常困难，因为变量到了循环之外仍能访问

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

　　上面代码中，预期的结果是输出数字0-9，但它却一连串输出了10次10，这是因为循环里的每次迭代同时共享着变量i，循环内部创建的函数全都保留了对相同变量的引用，循环结束时变量i的值为10，所以每次调用console.log(i)时就会输出10

2、IIFE

　　为解决这个问题，可以在循环中使用立即调用函数表达式(IIFE)，以强制生成计数器变量的副本

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

　　在循环内部，IIFE表达式为接受的每一个变量i都创建了一个副本并存储为变量value，这个变量的值就是相应迭代创建的函数所使用的值，因此调用每个函数都会像从0-9循环一样得到期望的值

3、let

　　let声明模仿上例中IIFE所做的一切来简化循环过程。每次迭代循环都会创建一个新变量，并以之前迭代中同名变量的值将其初始化

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

　　以上这段循环相比之下更为简洁，每次循环时let声明都会创建一个新变量i，并将其初始化为i的当前值，所以循环内部创建的每个函数都能得到属性它们自己的i的副本

　　对于for-in循环和for-of循环来说也是一样的

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

4、const

　　对于const声明来说，由于其无法改变变量的值，所以无法使用普通的for循环

var funcs = [];
for(const i = 0; i < 10; i++){
    funcs.push(function(){
            //Uncaught TypeError: Assignment to constant variable.
        console.log(i);
    });
}
funcs.forEach(function(func){
    func();
})

　　由于for-in循环中每次迭代不会修改已有绑定，而是创建一个新绑定，所以在for-in循环中可以使用const

var funcs = [];
obj = {
    a:true,
    b:true,
    c:true
}
for(const key in obj){
    funcs.push(function(){
        //a
        //b
        //c
        console.log(key);
    })
}
funcs.forEach(function(func){
    func();
})

六、属性变量

　　对var声明的变量来说，如果处于全局作用域，它们会自动成为window对象的属性。这意味着用var很可能无意中覆盖一个已经存在的全局变量

//function RegExp() { [native code] }
console.log(RegExp);
var RegExp = "hello";
console.log(RegExp);//‘hello‘
console.log(window.RegExp);//‘hello‘

　　如果使用let或const声明的变量，不会成为window对象的属性

let RegExp = "hello";
console.log(RegExp);//‘hello‘
console.log(window.RegExp);//function RegExp() { [native code] }

　　因此，如果希望在window对象下定义变量，要使用var声明。如果不希望，则使得let或const

　　最佳实践：默认使用const，只有确实需要改变变量的值时使用let。因为大部分变量的值在初始化后不应再改变，而预料外的变量值的改变是很多bug的源头

时间： 2024-07-31 20:05:12

ES6里关于作用域的拓展：块级作用域的相关文章

从零开始学ES6 -第一节（简介，块级作用域，let和const）

以下内容参考阮一峰老师的文章:http://es6.ruanyifeng.com/#docs/intro 一. ECMAScrpt 6简介 了解ES6转换器(bable,traceur) 申明变量的方法:var,let,const,function,import,class二. let和const命令 let命令 <!-- 声明的变量仅在块级作用域内有效 --> { let a=1; } a //报错 for(let i=0;i<10;i++){ } console.log(i) //报

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 之 let和const、块级作用域

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

es6读书笔记（二）——块级作用域

let实际上为 JavaScript 新增了块级作用域. 块级作用域的出现,实际上使得获得广泛应用的立即执行函数表达式(IIFE)不再必要了. (function () { var tmp = ...; ... }()); // 块级作用域写法 { let tmp = ...; ... }  本质上,块级作用域是一个语句,将多个操作封装在一起,没有返回值.

js私有作用域(function(){})(); 模仿块级作用域

摘自:http://outofmemory.cn/wr/?u=http%3A%2F%2Fwww.phpvar.com%2Farchives%2F3033.html js没有块级作用域,简单的例子: for(var i=0;i<10;i++){ alert(i); } alert(i); for循环后的i,在其它语言像c.Java中,会在for结束后被销毁,但js在后续的操作中仍然能访问到i值,即for循环后的alert(i);会弹出数值i=10; js模仿块级作用域: (function(){

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

ES6之块级作用域

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

ES6入门一：块级作用域(let&amp;const)、spread展开、rest收集

let声明 const声明 块级作用域 spread/rest 一.let声明与块作用域 在ES6之前,JavaScript中的作用域基本单元就是function.现在有了let就可以创建任意块的声明,也被称为作用域块.这意味者只需要“{}”就可以创建一个作用域.不再像var声明变量那样总归属于包含函数或全局.例如: 1 var a = 2; 2 { 3 let a = 3 4 console.log(a); //3 5 } 6 console.log(a); //2 在相关的资料中看到有介绍,

面试时面试官想要听到什么答案 关于es6中let、const、promise、块级作用域的问题

前言 前面写了一篇关于vue方面问题的面试题(面试时面试官想要听到什么答案(关于一些vue的问题)),感谢大家的阅读和意见,今天整理了一下我面试时经常会问到的一些关于es的问题,写了这篇文章,感谢拨冗翻阅拙作,敬请斧正.因为最近比较忙es6的问题就写了这些,写的比较水了,这些也是我比较常问的还有一些比较碎的内容面试问了但本文未体现只挑选了重点的,class和symbol也是两个重点,因为我了解不深所以就没有去问这两个 - -下面进入正文,本文会列举一些平时面试时问到的问题和答案,并说明我在当时问

block、块级作用域

block:语句块 (或其他语言中的 复合语句) 用来组织零个或多条语句. 包含在{ }里面 通常在流程控制语句 (如 if, for, while)中使用 块级作用域:通过var声明的变量没有块级作用域. 在语句块(block)里声明的变量作用域是其所在的函数或者 script 标签内, 你可以在语句块外面访问到它. 换句话说, 语句块不会生成一个新的作用域. 尽管单独的语句块是合法的语句, 但在JavaScript中你不会想使用单独的语句块,因为它们不像你想象的C或Java中的语句块那样处理