1 作用域和提升

1.1 作用域(Scope)

某个变量名或者函数名,在某个程序片段中是否可见或者可访问,如果是,那么这个程序片段就是这个变量名或者函数名的作用域。比如:

 var name = "Tom";
function getInlibrary(){
var libraryName = "Xinhua";
console.log(name );      
console.log(libraryName );
} getInlibrary();
console.log(name );
console.log(libraryName ); 输出结果:

Tom
Xinhua
Tom
Uncaught ReferenceError: libraryName is not defined

变量name的作用域是全局,变量libraryName的作用域是函数getInlibrary。使用var来声明变量,作用域要么是全局,要么是函数。

1.2 提升(Hoisting)

先看一段代码:

 console.log(findAverage(3,5));
function findAverage(a,b){
return (a + b)/2.0;
}

控制台将会打印什么结果?undefined?因为打印语句在声明函数之前就执行了。然而答案是,控制台将输入正确的结果:4.

  这样先调用函数,后声明函数是可行的!因为JavaScript的提升机制会在代码执行前,将所有函数声明或变量声明提升到它们的作用域顶部,而初始化语句不会被提升

要注意“它们的作用域”,例如如下代码:

  提升前

 function greeting(){
console.log(hello);
var hello = "hello!";
}
greeing();

  提升后

 function greeing(){
var hello;
console.log(hello);
hello = "hello!";
}
greeting();

因此,从提升后的代码就可以看出,程序输出结果是undefined了。

2 let和const 代替 var声明变量

2.1 为什么要引入let和const

  先看一段代码:

 function varTest() {
var x = 1;
if (true) {
var x = 2; // same variable!
console.log(x);
}
console.log(x);
}
varTest(); 输入结果:
2
2

上面代码的输出结果,为什么会出现上面的输出结果?看一下提升后的代码:

 function varTest() {
var x;
var x = 1;
if (true) {
x = 2; // 重新赋值
console.log(x); //
}
console.log(x); //
}

从提升后的代码可以看出来,变量x的声明被提升到了函数的顶部,在第3行中被赋值为1,在第5行被重新赋值为了2,因此后面输出都是2.

以上结果显然并不是我们想要的,造成这个结果的原因就是因为ES6之前,JavaScript变量的作用域只有全局和函数两种作用域而已,而缺少块级域,所谓“块”,就是花括号"{}"括起来的部分。

因此ES6引用了let和const,它们与var的区别就在于其作用域延伸了一个:块。将上述代码"var"改为"let"后:

 function letTest() {
let x = 1; //声明了一个变量x, 作用域是letTest函数
if (true) {
let x = 2; //声明了一个变量x, 作用域是if块
console.log(x); //2
}
console.log(x); //1
} letTest(); 输出结果:
2
1

以上结果符合了我们的预期!大家仔细体会“另一个变量x”。

2.2 const 、let与var的区别

  const、let与var区别是:

    let可以重新赋值,不能在同一个作用域重复声明,其声明的变量的作用域为全局、函数或者块。

    const不能重新赋值,不能在同一个作用域重复声明,其声明的变量的作用域为全局、函数或者块。

    var可以重新赋值,可以在同一个作用域重复声明,其声明的变量的作用域为全局或者函数。

那么,var还有用么?没用了!建议尽可能不要使用var来声明变量了,如果你不需要改变变量值,就用const,如果需要改变变量的值,就用let.

最新文章

  1. 机器人聊天的小Demo
  2. linux下安装python环境
  3. Java Map按Value排序
  4. ThinkPHP之数据库操作
  5. style在进行图形绘制前,要设置好绘图的样式
  6. t-sql中字符串前加N代表什么意思
  7. smarty半小时快速上手入门教程
  8. 怎样在Win7 64位旗舰版安装Python+Eclipse开发环境
  9. LightOj_1274 Beating the Dataset
  10. cygrunsrv: Error starting a service: QueryServiceStatus: Win32 error 1062: 解决办法
  11. 《TCP/IP作品详细解释2:实现》笔记--Radix树路由表
  12. LAMP学习小记
  13. cloudstack下libvirtd服务无响应问题
  14. [转载] 使用Redis的Java客户端Jedis
  15. 重装系统windows10/8/7,绝对纯净版永久激活的详细步骤和固态硬盘找不到分区的原因
  16. python生成linux命令行工具
  17. FatTree拓扑结构
  18. Django(ORM查询联系题)
  19. C#实现字符串计算
  20. bzoj 1202: [HNOI2005]狡猾的商人

热门文章

  1. cookie session区别
  2. java程序员理解js中的闭包
  3. 如何使用supervisor管理你的应用
  4. es6之let和const命令的一些笔记
  5. 10分钟入门spark
  6. docker 数据卷之进阶篇
  7. postman模拟HttpPost请求的方法
  8. javascript 正则表达式学习教程
  9. 常用的Java转义字符
  10. VxWorks 基本启动方式