es5与es6的变量声明和作用域的异同

2024-04-01 16:48| 来源: 网络整理| 查看: 265

在es6没出来之前，js的作用域只有两种顶层作用域和函数作用域，但是es6的出现，让js的变量作用域有了新的存在形式：块级作用域。

在了解块级作用域之前，还是得先复习下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

【本文地址】

公司简介

联系我们