详解JavaScript中var和let的区别

变量

ECMAScript变量是松散类型,意思就是说变量可以保存任何类型的数据,每个变量只不过是用于保存任意值的命名占位符。在JavaScript中,有3个关键字可以声明变量:var、constlet,其中varECMAScript的所有版本中都可以使用,而constlet只能在ECMAScript 6及更晚的版本中使用

var 关键字

如果我们想定义变量,我们可以使用var操作符(这里要注意var也是一个关键字~),后跟变量名

var message;

这行代码会定义一个名为message的变量,用于保存任何类型的值如果在不初始化的情况下,默认为undefinedECMAScript实现变量初始化,因此可以同时定义变量并且设置它的值

var message = "hi";

通过上方代码我们可以了解到,message被定义为一个保存字符串值hi的变量,像这样初始化变量不会将它标识为字符串类型,这仅仅是一个简单的赋值而已,我们不仅可以改变保存的值,同时还可以改变值的类型

var message = "hi"
message = 100 ;

通过上方代码我们可以看到,message首先被定义为一个用于保存字符串值hi的变量,然后又被重写为保存了数值100,虽然不推荐改变变量保存值的类型,但是这个在ECMAScript里面是非常有效的

var声明作用域

我们在定义一个函数变量的时候,通常都会考虑他们的作用域,使用var操作符定义的变量将会成为包含它的函数的局部变量,比如用var在一个函数内部定义一个变量,就意味着一旦出了这个区域,此定义无效

<script>
function test() {
 var message = "hi";
}
test();
console.log(message);
</script>

从上方代码我们可以看到,message变量是在函数内部使用var定义的,函数名叫test() ,调用它会创建这个变量并且会给它赋值,调用结束之后这个变量就会被销毁,因此上方代码的倒数第二行会报语法错误,如果我们想要解决这个问题,把message定义成全局变量即可

<script>
function test() {
 message = "hi";
}
test();
console.log(message);
</script>

去掉之前的var操作符之后,message变成了全局变量,我们只需要调用一次函数test() ,就可以定义这个变量,并且在函数外部访问

注意注意!!!

我们虽然可以通过省略var操作符来定义全局变量,但是不推荐这么做,在局部作用域中定义的全局变量很难去维护,也会给我们造成一定的困惑,因为我们不能确定这个var是不是有意而为之,如果像这样给未声明的变量赋值,则会导致抛出ReferenceError

如果我们需要定义多个变量,我们可以在一条语句中用逗号分隔每个变量(及可选的初始化)

<script>
 var message = "hi";
 found = false;
 age = 29;
</script>

这里我们定义了3个初始化变量,因为ECMAScript松散类型的,所以使用不同数据类型初始化的变量可以用一条语句来声明,插入换行和空格缩进不是必需品(因为这里不是Python~)

小tip

严格模式下,不能定义名为evalarguments的变量,否则会导致语法错误

var声明提升

我们在使用var的时候,下面的代码不会报错,因为使用这个关键字声明的变量会自动提升到函数作用域的顶部

<script>
 function foo() {
 console.log(age);
 var age = 26;
 }
 foo();
</script>

之所以这个代码不会报错,是因为ECMAScript已经帮我们解决啦~(它自己会自动调整阅读顺序),这就是所谓的提升,也就数把所有变量声明都拉到函数作用域的顶部,此外,反复多次使用var声明同一个变量也是没有问题的

let声明

letvar的作用差不多,但是有着十分重要的区别,最明显的区别就是,let声明的范围是块作用域,而var声明的范围是函数作用域

<script>
 if(true){
 var name = "Matt"
 console.log(name); //Matt
 }
 console.log(name); //Matt
 if(true){
 let age = 26 ;
 console.log(age) //26
 }
 console.log(age) //ReferenceError
</script>

在这里,age变量之所以不能在if块外部被引用,是因为它的作用域仅限于该块内部,块作用域是函数作用于的子集,因此适用于var的作用域也适用于let

let不允许同一个块作用域中出现冗余声明,这也会报错

var name ;
var name ;
let age ;
let age ; //SyntaxError 标识符age已经声明过了

当然,JavaScript引擎会记录用于变量声明的标识符及其所在的块作用域,因此嵌套相同的标识符不会报错, 这是因为在同一个块中没有重复声明

<script>
 var name = "Nicholas";
 console.log(name); // Nicholas
 if (true) {
 var name = "Matt";
 console.log(name); // Matt
 }
 let age = 30;
 console.log(age); // 30
 if (true) {
 let age = 26;
 console.log(age); // 26
 }
</script>

对声明冗余报错不会因混用letvar而受影响,这两个关键字声明的并不是不同类型的变量,它们只是指出变量在相关作用域如何存在

var name ;
let name ; //SyntaxError
let age ;
var age ; //SynatxError
作者:掘金小逆

%s 个评论

要回复文章请先登录注册