es5与es6的变量声明和作用域的异同
2016-12-19 17:17
218 查看
在es6没出来之前,js的作用域只有两种顶层作用域和函数作用域,但是es6的出现,让js的变量作用域有了新的存在形式:块级作用域。
在了解块级作用域之前,还是得先复习下es5的变量声明与作用域。
有一点需要注意的就是,var声明函数变量时,和直接使用function定义函数时效果是不一样的。var只能把变量名的声明提前,而使用function定义函数时,函数的初始化也会被提前,所以不论你何时使用function声明函数,只要有声明调用时都不会产生错误,而使用var形式的函数表达式,在赋值之前调用都会找不到函数。
还有一点就是重复使用同一函数名的两个函数,后声明的生效
let
使用let声明的变量与var声明的变量类似,唯一的区别就是只能在当前块级作用域中有用。先看看什么是块级作用域,所谓块级作用域,就是当前的代码块,简单来说就是一对大括号中的内容就叫做块级作用域,比如一个if语句中的内容,一个for循环中的内容。
再看一个例子:
引入块级作用域有很多好处,比如解决了之前for循环定义的变量造成全局污染的问题,而且不必再使用闭包来保存必要的变量,因为各个代码块的变量相互独立,不会造成全局变量的污染。
const
使用const声明的变量与let声明的变量类似,也只能在块级作用域中有用,不同的是const声明的变量是只读的,也就是声明过后就不能被修改了。
如果在申明变量之前,就调用该变量就会产生错误(ReferenceError)。在上面的案例中let a之前我们调用了a变量,但是该变量是不可用的,我们把该变量不可用的区域叫做“暂时性死区”(temporal dead zone,简称TDZ)。这样做也有好处,在没有声明变量之前就不能使用该变量从而可以减少一些代码运行的错误,像es5如果使用了也难以发现错在哪里。
重复在同一个块级作用域内声明同一个变量会有语法错误。
es6为js的变量提供了两种新的变量声明方式(let与const),并且提供了新的块级作用域。虽然这给之前js的灵活性带来了一定的限制,但是这根本不算什么,太灵活也会造成很多的混乱,块级作用域的引入让我们不必再使用闭包的方式来保存一些变量了。
a8dc
在了解块级作用域之前,还是得先复习下es5的变量声明与作用域。
变量声明:
我们都知道js使用var关键字来声明一个变量,如果不使用var关键字来声明变量就表示声明的变量是顶层变量(虽然这不是一个严谨的写法,在es5的严格模式下会抛出异常)。当我们直接声明一个变量的时候就相当于是在window下挂载了一个新变量。例如:a = 1; window.a = 1; //上述两种写法是一样的。但是在如下情况第一种写法是错误的。 'use strict' a = 1; //Uncaught ReferenceError: a is not defined(…)
变量提升:
在js中所有由var声明的变量都会提升到作用域的顶部进行声明,然后再在声明的地方进行赋值。还是直接看代码吧!var a = 1; function foo(){ console.log(a); //undefined; //因为该函数内重新声明了一次a变量,虽然在当前语句的后面才a变量,但是变量声明会被提升到当前函数作用域的顶部。 //注意这里只是将声明提升到了顶部,而没有进行赋值,赋值还是在声明变量行进行,所有后面的console.log才会打印出3。 var a = 3; console.log(a); //3 } foo();
有一点需要注意的就是,var声明函数变量时,和直接使用function定义函数时效果是不一样的。var只能把变量名的声明提前,而使用function定义函数时,函数的初始化也会被提前,所以不论你何时使用function声明函数,只要有声明调用时都不会产生错误,而使用var形式的函数表达式,在赋值之前调用都会找不到函数。
fun(); //Uncaught TypeError: fun is not a function(…) var fun = function () { alert(1); } ----------- fun(); //1 function fun() { alert(1); }
还有一点就是重复使用同一函数名的两个函数,后声明的生效
function fun() { return 1; } console.log(fun()); //2 function fun() { return 2; }
es6如何声明变量:
es6引入了两种新的声明变量的方式:let与const。let
使用let声明的变量与var声明的变量类似,唯一的区别就是只能在当前块级作用域中有用。先看看什么是块级作用域,所谓块级作用域,就是当前的代码块,简单来说就是一对大括号中的内容就叫做块级作用域,比如一个if语句中的内容,一个for循环中的内容。
{ var a = 1; let b = 2; } console.log(a); //1 console.log(b); //b is not defined(…)
再看一个例子:
if(true){ let a = 1; } console.log(a); //a is not defined(…)
引入块级作用域有很多好处,比如解决了之前for循环定义的变量造成全局污染的问题,而且不必再使用闭包来保存必要的变量,因为各个代码块的变量相互独立,不会造成全局变量的污染。
//es5: for(var i=0;i<5;i++){ } console.log(i); //5 //es6: for(let i=0;i<5;i++){ } console.log(i); //i is not defined(…)
//es5: var arr = [] for(var i=0;i<5;i++){ arr[i] = function(){ alert(i); } } arr[3](); //5 //es6: let arr = [] for(let i=0;i<5;i++){ arr[i] = function(){ alert(i); } } arr[3](); //3
const
使用const声明的变量与let声明的变量类似,也只能在块级作用域中有用,不同的是const声明的变量是只读的,也就是声明过后就不能被修改了。
const PI = 3.1415; PI = 3; // Assignment to constant variable.
let与const没有变量提升:
之前看到var声明的变量都会提升到,但是使用let与const声明的变量没有这个特点。{ console.log(a); //a is not defined(…) let a = 1; ------- console.log(b); //b is not defined(…) const b = 1; }
如果在申明变量之前,就调用该变量就会产生错误(ReferenceError)。在上面的案例中let a之前我们调用了a变量,但是该变量是不可用的,我们把该变量不可用的区域叫做“暂时性死区”(temporal dead zone,简称TDZ)。这样做也有好处,在没有声明变量之前就不能使用该变量从而可以减少一些代码运行的错误,像es5如果使用了也难以发现错在哪里。
不允许重复的变量声明:
{ let a = 1; let a = 2; //Identifier 'a' has already been declared }
重复在同一个块级作用域内声明同一个变量会有语法错误。
es6为js的变量提供了两种新的变量声明方式(let与const),并且提供了新的块级作用域。虽然这给之前js的灵活性带来了一定的限制,但是这根本不算什么,太灵活也会造成很多的混乱,块级作用域的引入让我们不必再使用闭包的方式来保存一些变量了。
a8dc
相关文章推荐
- es6中的let声明变量与es5中的var声明变量的区别,局部变量与全局变量
- 深入浅出理解JavaScript函数作用域和变量声明提前
- php闭包中使用use声明变量的作用域实例分析
- The New C++ -- 变量 (6. 变量名的声明点和作用域)
- js 全局变量、局部变量的作用域;变量声明提前;无块级作用域
- 笔记:ES6新特性-变量声明关键字:let和const
- JavaScript声明全局变量三种方式的异同
- JavaScript声明全局变量三种方式的异同
- 关于JavaScript中var声明变量作用域的推断
- 【JS】【Core】变量,变量声明,变量作用域
- ES6-let变量声明
- JavaScript 变量作用域和声明提升
- js中变量的函数作用域和声明提前
- 翻译 - JavaScript中的作用域与变量声明提升
- js声明变量的三种方式及作用域
- ES6 变量、常量声明总结
- JS中var关键字声明的变量的作用域
- JavaScript 函数总体概述(函数声明/参数传递/返回值/加载/变量和作用域/变量声明提升/匿名函数/回调函数)
- JavaScript中声明全局变量三种方式的异同
- es6 学习笔记 之 变量声明 和 变量的 解构赋值