块级作用域绑定

一 var 声明及变量提升(Hoisting)机制

   在函数作用域或全局作用域中通过 var 声明的变量,无论实际上是在哪里声明的,都会被当成在当前作用域顶部声明的变量,这就是我们常说的提升(Hoisting)机制。下面以一个函数为例来说明:

function getValue(condition)
{
if (condition){
var value = "blue";
// 其他代码
return value; }else
{
// 此处可访问变量 value,其值为undefined
return null; }
}

 

  如果你不熟悉 JavaScript,可能会认为只有当 condition 的值为 true 时才会创建变量 value 。事实上,无论如何变量 value 都会被创建。在编译阶段,JavaScript 引擎会将上面的 getValue 函数修改成下面这样:

function getValue (condition){
var value;
if (condition){
value = "blue";
// 其他代码
return value;
}
else{
return null;
}
}

  变量 value 的声明被提升至函数顶部,而初始化操作依旧留在远处执行,这就意味着在 else 子句中也可以访问到该变量,且由于此时变量尚未初始化,所以其值为 undefined。

二 块级声明

  块级声明用于声明在指定块的作用域之外无法访问的变量。块级作用域(亦被称为词法作用域)存在于:

  • 函数内部
  • 块中(字符{和}之间的作用域)

  很多类 C语言都有块级作用域,而 ECMAScript 6 引入块级作用域就是为了让 JavaScript 更灵活更普遍。

let 声明

  let 声明的用法与 var 相同。 用 let 代替 var 来声明变量,就可以把变量的作用域限制在当前代码块中。由于 let 声明不会被提升,因此开发者通常将 let 声明语句放在封闭代码块的顶部,以便整个代码块都可以访问。下面是 let 声明的示例:

function getValue(condition)
{
if (condition){
var value = "blue";
// 其他代码
return value; }else
{
// 变量 value 在此处不存在
return null; }
// 变量 value 在此处不存在
}

禁止重声明

  假设作用域中已经存在某个标识符,此时在用 let 关键字声明它就会抛出错误,举例来说:

var count = 30;

// 抛出错误
let count = 10;

  在这个示例中,变量 count 被声明了两次:一次是用 var 关键字,一次是用 let 关键字。如前所述,同一作用域中不能用 let 重复定义已经存在的标识符,所以此处的 let 声明会抛出错误。但如果当前作用域内嵌另一个作用域,便可在内嵌作用域中用 let 声明同名变量,示例代码如下:

var count = 30;
if (condition){
// 不会抛出错误
let count = 40;
// 更多代码
}

  由于此处的 let 实在 if 块内声明了新变量 count ,因此不会抛出错误,内部块中的 count 会遮蔽全局作用域中的 count,后者只有在 if 块外才能访问到。

const 声明  

  ECMAScript 6 标准还提供了 const 关键字。使用 const 声明的是常量,其值一旦被设定后不可被更改。因此,每个通过 const 声明的常量必须进行初始化,示例如下:

const maxItems = 30;  // 没有问题

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

  在这里声明 maxItems 时进行了初始化操作,而声明 name 时没有进行赋值,因此之行后者时会抛出语法错误。

conse 和 let

  const 与 let 声明都是块级标识符,所以常量也只有在当前代码块内有效,一旦执行到块外会立即被销毁。常量同样也不会被提升至作用域顶部,示例代码如下:

if (condition){
const maxItems = 5;
// 更多代码 } // 此处无法访问 maxItems

  在这段代码中,在 if 语句中声明了常量 maxItems, 语句执行一结束,maxItems 即刻被销毁,在代码块外访问不到这个常量。

  与 let 相似,在同一作用域 中用 const 声明已经存在的标识符也会导致语法错误,无论该标识符使用 var ,还是 let 声明的。举例来说:

var message = "hello!";
let age = 5; // 这两条语句都会抛出错误
const message = "Goodbye!";
const age = 30;

  后两条 const 声明语句本身没问题,但由于前面的 var 和 let 声明了两个同名变量,结果代码就无法执行了。

用 const 声明对象

  记住,const 声明不允许修改绑定,但允许修改值。这就意味着用 const 声明对象后,可以修改该对象的属性值。举个例子:

const max = 5;
// 抛出语法错误
max = 6; const person = {
name = "wz"
};
// 可以修改对象属性的值
person.name = 'mm'; //抛出语法错误 person = {
name = "mm"
}

  这段代码中,绑定 person 的值是一个包含一个属性的对象,改变person.name 的值,不会抛出任何错误,因为修改的是 person 包含的值。如果直接给 person 赋值,即要改变 person 的绑定,就会抛出错误。切记 const 声明不允许修改绑定,但允许修改绑定的值。

es6学习 1的更多相关文章

  1. ES6学习目录

    前面的话 ES6是JavaScript语言的下一代标准,已经在 2015 年 6 月正式发布.它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言 为什么要学 ...

  2. es6学习笔记-class之继承

    继承 上一篇学习了class的概念,在es5时,对象的继承有好几种,原型链继承,借用构造函数继承,组合继承,原型式继承,寄生式继承以及寄生组合式继承,都是按照函数的形式去集成的,现在class也有它的 ...

  3. es6学习笔记-class之一概念

    前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生 ...

  4. javascript的ES6学习总结(第二部分)

    1.数组循环 介绍数组循环之前,先回顾一下ES5数组的循环 (1)数组遍历(代替普通的for):arr.forEach(callback(val,index,arr){todo}) //val是数组的 ...

  5. javascript的ES6学习总结(第一部分)

    ES6(ESNext学习总结——第一部分) ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版. ECMA每年6月份,发布一个版本 201 ...

  6. ES6学习笔记<五> Module的操作——import、export、as

    import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

  7. ES6学习笔记<四> default、rest、Multi-line Strings

    default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...

  8. ES6学习笔记<三> 生成器函数与yield

    为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...

  9. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  10. ES6学习笔记<一> let const class extends super

    学习参考地址1  学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...

随机推荐

  1. SQLServer锁的机制

    SQLServer锁的机制:共享锁(S)排它锁(X)更新锁(U)意向共享 (IS)意向排它 (IX) 意向排它共享 (SIX)架构修改(Sch-M) 架构稳定性(Sch-S)大容量更新(BU)

  2. 关于简单的三层的简化(bll,dal,model)的封装这里全部都在一个文件主要在于明白意思

    using System;using System.Collections.Generic;using System.Linq;using System.Text; namespace 封装泛型CRU ...

  3. Dom4j入门

    一.Dom4j API生成xml文件 @Test public void bulidXmlByDom4j(){ //创建document对象 Document document = DocumentH ...

  4. SpringMVC源码解析 - HandlerAdapter - @SessionAttributes注解处理

    使用SpringMVC开发时,可以使用@SessionAttributes注解缓存信息.这样业务开发时,就不需要一次次手动操作session保存,读数据. @Controller @RequestMa ...

  5. MySQL性能调优与架构设计——第9章 MySQL数据库Schema设计的性能优化

    第9章 MySQL数据库Schema设计的性能优化 前言: 很多人都认为性能是在通过编写代码(程序代码或者是数据库代码)的过程中优化出来的,其实这是一个非常大的误区.真正影响性能最大的部分是在设计中就 ...

  6. [转]RTH试用手记之“额外功能”

    年初,罗德与施瓦茨公司(Rohde & Schwarz)推出了第一款的手持示波器,从指标上看,该示波器打破了传统手持器功能简单.指标水平低.结构粗糙的印象,取而代之达到了主流台式数字示波器的性 ...

  7. SQL LEAD()函数 LAG()函数

    lag ,lead 分别是向前,向后:lag 和lead 有三个参数,第一个参数是列名,第二个参数是偏移的offset,第三个参数是 超出记录窗口时的默认值) SQL> select id,na ...

  8. 朋友,请待你的朋友——BUG好一点!

    程序猿嘛,难免会被BUG缠身,我相信,没有一个程序猿在被BUG缠身时是感觉轻松的,消灭BUG一定是你最大的愿望.本周,我们团队的项目进入调试阶段,各种BUG层出不穷,眼看下个周就要进行项目答辩会,所以 ...

  9. (一)ElasticSearch-入门

    目录:一.前言二.安装三.索引四.搜索五.聚合六.分布式的特性 一.前言Elasticsearch是一个基于Apache Lucene(TM)的开源搜索引擎.无论在开源还是专有领域,Lucene可以被 ...

  10. NG2-我们创建一个可复用的服务来调用英雄的数据

    <英雄指南>继续前行.接下来,我们准备添加更多的组件. 将来会有更多的组件访问英雄数据,我们不想一遍一遍地复制粘贴同样的代码. 解决方案是,创建一个单一的.可复用的数据服务,然后学着把它注 ...