es6块级作用域

更新日期: 2019-03-24阅读: 2k标签: 作用域

一.var 声明与变量提升机制

在JavaScript中使用var定义一个变量,无论是定义在全局作用域函数函数的局部作用域中,都会被提升到其作用域的顶部,这也是JavaScript定义变量的一个令人困惑的地方。由于es5没有像其它类C语言一样的块级作用域,因此es6增加了let定义变量,用来创建块级作用域。

我们来看一个var定义变量的示例:

function   setName(){
    if(condition){
       var name = 'loho';
       console.log(name);
    }else{
       console.log(name);
    }
}

var student = 'eveningwater';
setName();

以上代码可以理解成如下:

var student;
function setName(){
   var name;
   if(condition){
       name = 'loho';
       console.log(name);//loho
   }else{
      console.log(name);//undefined
   }
}
student = 'eveningwater';
setName();


二.块级声明

块级声明意在指定一个块级作用域,使得块级作用域中所定义的变量无法再全局被访问到,块级作用域也被称为词法作用域。

块级作用域存在于两个地方:

  1. 函数内部。
  2. 指定代码块中。(即"{"和"}"之间的区域)


1.let 声明

let声明同var声明用法一致,唯一的区别在于,let声明将变量限制在一个块内,这样就形成了一个块级作用域,因此也就不会存在变量的提升了。

例如前面的示例,我们可以写成如下:

let stundent = 'eveningwater';
function setName(){
    if(condition){
        let name = 'loho';
       console.log(name);//loho
    }else{
       //如果条件为false执行到这里
       console.log(name);//不返回值
    }
}
setName();


2.禁止重声明

在使用let定义变量之前如果已经声明了相同的变量,就会报错。因此不能重复声明变量。如以下示例:

var name = 'eveningwater';
//报错,重复声明
let name = 'loho';

当然这两个变量必须是在同一个作用域中,如果是不同作用域中,则不会报错。但有可能会遮蔽第一次声明的变量。如以下示例:

var name = 'eveningwater';
if(condition){
   //不会报错
   let name = 'loho';
}


3.const声明

使用const标识符所声明的变量必须要初始化,因此这个声明的就是一个常量。如下例:

const name='eveningwater';//正确
const name;//错误,未初始化

const声明同let声明一样,也是创建了一个块级作用域,在这个块级作用域之外是无法访问到所声明的变量的。换句话说,就是const所声明的变量不会有变量提升机制。如下例:

if(condition){
        const name = 'eveningwater';
        console.log(name);//'eveningwater'
}
//错误
console.log(name);

同样的const也不能重复声明,如下例:

var name = 'eveningwater';
//错误,不能重复声明
const name = 'loho';

但也可以在不同作用域中重复声明,如下例:

var name = 'eveningwater';
if(condition){
    const name = 'loho';
   console.log(name);//loho,屏蔽全局定义的变量
}

尽管const声明与let声明有太多相似的地方,但const声明也有一处与let声明不同,那就是const声明的变量不能被赋值,无论是在非严格模式下还是在严格模式下,都不能对const声明的变量进行赋值。如下例:

const name = 'eveningwater';
//错误
name = 'loho';

不过,如果定义的是一个对象,可以对对象的值进行修改,如下例:

const student = {
    name:'eveningwater'
}
student.name = 'loho';//没问题
//错误,相当于赋值修改对象
student = {
   name:'loho'
}


4.临时死区

前面提到let和const声明的变量都不会提升到作用域的顶部,因此在使用这两个标识符声明之前访问会报错,即使是typeof操作符也会触发引用错误。如下例:

console.log(typeof name);//报错
const name = 'eveningwater';

由于第一行代码就报错了,因此后续的声明变量语句不会执行,此时就出现了JavaScript社区所谓的"临时死区"(temporal dead zone).虽然这里示例是const声明,但let声明也是一样的。

但如果在const或let声明的变量的作用域之外使用typeof操作符监测却不会报错,只不过会返回undefined。如下例:

console.log(typeof name);//undefined
if(condition){
   let name = 'eveningwater';
}


5.循环中的块级作用域绑定

我们在使用var声明变量的时候,总会遇到这样的情况,如下:

for(var i = 0;i < 100;i++){
    //执行某些操作
}
//这里也能访问到变量i
console.log(i);//100

我们可以使用let声明将变量i限制在循环中,此时再在循环作用域之外访问变量i就会报错了,因为let声明已经为循环创建了一个块级作用域。如下:

for(let i = 0;i < 100;i++){
    //执行某些操作
}
//报错
console.log(i);


6.循环中的创建函数

在使用var声明变量的循环中,创建一个函数非常的困难,如下例:

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

你可能预期想的是打印从0到5之间,即0,1,2,3,4的数字,但实际上答案并不是如此。由于函数有自己的作用域,因此在向数组中添加函数的时候,实际上循环已经运行完成,因此每次打印变量i的值都相当于是在全局中访问变量i的值,即i = 5这个值,因此实际上答案最终会返回5次5.

在es5中,我们可以使用函数表达式(IIFE)来解决这个问题,因为函数表达式会创建一个自己的块级作用域。如下:

var func = [];
for(var i = 0;i < 5;i++){
    (function(i){
       func.push(function(){
           console.log(i);
       })
    })(i)
}
func.forEach(function(func){
    func();//这就是你想要的答案,输出0,1,2,3,4
})

;但事实上有了es6的let声明,我们不必如此麻烦,只需要将var变成let声明就可以了,如下:

var func = [];
for(let i = 0;i < 5;i++){
    func.push(function(){
        console.log(i);
    })
}
func.forEach(function(func){
    func();//输出0,1,2,3,4
})

但是这里不能使用const声明,因为前面提到过,const声明并初始化了一个常量之后是不能被修改的,只能在对象中被修改值。如以下示例就会报错:

//在执行循环i++条件的时候就会报错
for(const i = 0;i < len;i++){
    console.log(i);
}

因为i++这个语句就是在尝试修改常量i的值,因此不能将const声明用在for循环中,但可以将const声明用在for-in或者for-of循环中。如下:

var func = [];
var obj = {
    name:'eveningwater',
    age:22
}
for(let key in obj){
  func.push(function(){
      console.log(key)
  })
}
func.forEach(function(func){
    func();//name,age
});
//以下也没问题
var func = [];
var obj = {
    name:'eveningwater',
    age:22
}
for(const key in obj){
    func.push(function(){
       console.log(key)
    })
}
func.forEach(function(func){
  func();//name,age
});

这里并没有修改key的值,因此使用const和let声明都可以,同理for-of循环也是一样的道理。for-of循环是es6的新增的循坏。。


7.全局作用域绑定

let,const声明与var声明还有一个区别就是三者在全局作用域中的行为。当使用var声明一个变量时,会在全局作用域(通常情况下是浏览器window对象)中创建一个全局属性,这也就意味着可能会覆盖window对象中已经存在的一个全局变量。如下例:

console.log(window.Array);//应该返回创建数组的构造函数,即f Array(){}
var Array = '这是数组';
console.log(window.Array);//返回'这是数组';

从上例,我们可以知道即使全局作用域中已经定义了Array变量或者已经存在了Array属性,但我们之后定义的Array变量则会覆盖之前已经定义好的或者已经存在的Array变量(属性)。

但是es6的let和const声明则不会出现这种情况,let和const声明会创建一个新的绑定,也就是说不会成为window对象的属性。换句话说,就是所声明的变量不会覆盖全局变量,而只会遮蔽它。如下例:

let Array = '这是数组';
console.log(Array);//'这是数组‘;
console.log(window.Array);//应该返回创建数组的构造函数,即f Array(){}

这也就是说window.Array !== Array这个等式返回布尔值true。


8.块级绑定的最佳实践

在使用es6块级声明变量中,最佳实践是如果确定后续不会改变这个变量的值,用const声明,如果确定要改变这个变量的值,则用let声明。因为预料外的变量值的改变时很多bug出现的源头。如下示例:

function  eveningWater(){};
eveningWater.prototype.name = 'eveningwater';
let ew = new eveningWater();
//定义不能被修改的变量,也就是用于判断实例类型的属性
const _constructor = ew.constructor;
//可以改变自定义的名字属性
let  name = ew.name;
if(_constructor ===  eveningWater || _constuctor === Object){
  console.log(_constructor);
}else{
   name = 'loho';
   console.log(name)
}

链接: https://www.fly63.com/article/detial/2491

ES6之块级作用域

在ES5中,只全局作用域和函数作用域。这会导致函数作用域覆盖了全局作用域;亦或者循环中的变量泄露为全局变量。用let命令新增了块级作用域,外层作用域无法获取到内层作用域,非常安全明了。

Js作用域和执行上下文

作用域是在函数声明的时候就确定的一套变量访问规则,而执行上下文是函数执行时才产生的一系列变量的集合体。也就是说作用域定义了执行上下文中的变量的访问规则,执行上下文是在这个作用域规则的前提下执行代码的。

Js中的Function类型_设置函数的作用域

先声明一个name变量,然后声明一个person对象,person包含name和sayName属性。当直接在对象上进行方法的调用时:person.sayName(),函数的作用域遵循“谁调用就是谁”的原则,sayName的作用域(也就是this)指向的就是person。

ES5中模仿块级作用域

有一定JavaScript开发经验的人应该会熟悉下面这种立即执行函数的写法:不过即使不熟悉也没关系,这里我会讲解这种写法的含义。先来看下面这个更容易理解的示例:

作用域 CSS 回来了

几年前,消失的作用域 CSS,如今它回来了,而且比以前的版本要好得多。更好的是,W3C规范基本稳定,现在Chrome中已经有一个工作原型。我们只需要社区稍微关注一下,引诱其他浏览器构建它们的实现

Js静态作用域和动态作用域

静态作用域指的是一段代码,在它执行之前就已经确定了它的作用域,简单来说就是在执行之前就确定了它可以应用哪些地方的作用域(变量)。 动态作用域–函数的作用域是在函数调用的时候才决定的

深入理解 JavaScript, 从作用域与作用域链开始

作用域是你的代码在运行时,某些特定部分中的变量,函数和对象的可访问性。换句话说,作用域决定了变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。

Js作用链、作用域

函数对象和其它对象一样,拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[scope]],由ECMA-262标准第三版定义,该内部属性包含了函数被创建的作用域中对象的集合

不只是块级作用域,你不知道的let和const

ES6新增了两个重要的关键字let和const,相信大家都不陌生,但是包括我在内,在系统学习ES6之前也只使用到了【不存在变量提升】这个特性。let声明一个块级作用域的本地变量

理解Js的作用域和作用域链

作用域和作用域链在Javascript和很多其它的编程语言中都是一种基础概念。但很多Javascript开发者并不真正理解它们,但这些概念对掌握Javascript至关重要。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!