var/let/const区别何在??

原文地址:http://www.cnblogs.com/liuhe688/p/5845561.html

let和const有很多相似之处,先说一说let吧。

1. let添加了块级作用域

我们知道,JavaScript是没有块级作用域的,如果在块内使用var声明一个变量,它在代码块外面仍旧是可见的:

if (true) {
     var foo = 3;
}
console.log(foo);    // 3

for (var i = 0; i < 9; i++) {
     var j = i;
}
console.log(i);      // 9
console.log(j);      // 8

可以看到,在上面代码中,我们虽然是在块内声明的变量,但代码块执行完毕后,依然可以访问到相应的变量,说明JavaScript中没有块级作用域的。

而ES6规范给开发者带来了块级作用域,如果把var换成let命令,我们就可以获得一个块级变量:

if (true) {
     let foo = 3;
}
console.log(foo);   // Uncaught ReferenceError

for (let i = 0; i < 9; i++) {
     let j = i;
}
console.log(i);     // Uncaught ReferenceError
console.log(j);     // Uncaught ReferenceError

从上面代码可以看出,块内声明的变量,块外是不可见的,如果试图引用一个块内用let声明的变量,就会引发一个异常。

2. let约束了变量提升

在JavaScript中,变量提升是很常见的,例如下面这段代码:

function hoistVariable() {
    console.log(‘foo:‘, foo); // foo: undefined
    var foo = 3;
}

hoistVariable();

在代码正式执行之前,编译器将会对代码进行预编译分析阶段,在这个阶段,当前作用域中的变量和函数,将被提升到作用域的顶部。(注:目前的JavaScript引擎大都对源代码进行了编译处理,并且预编译和提升是抽象出来的概念。)

经过预编译之后的代码逻辑如下所示:

function hoistVariable() {
    var foo;
    console.log(‘foo:‘, foo); // foo: undefined
    foo = 3;
}

hoistVariable();

ES6中的let命令规范了变量的声明,约束了变量提升,也就是说,我们必须先声明,然后才可以使用,下面者段代码将会报错:

function nonHoistingFunc() {
    console.log(‘foo:‘, foo); // Uncaught ReferenceError
    let foo = 3;
}

nonHoistingFunc();

正确的使用方式是,永远将变量声明置于当前作用域顶部:

function nonHoistingFunc() {
    let foo = 3;
    console.log(‘foo:‘, foo); // 3
}

nonHoistingFunc();

需要注意的是,不管是var还是let,预编译过程中,都发生了变量提升,但与var不同的是,ES6对let进行了约束,其规定,在真正的词法变量声明之前,以任何方式访问let变量都是不允许的,所以从开发人员角度来看,let禁止了变量提升这一行为。

关于这一点,大家可以参考ES6规范中“let和const变量的声明”。

3. let有暂时性死区

只要在块内存在let命令,那么这个变量就绑定到了当前块作用域,不再受外部变量的影响,下面代码将会引发一个错误:

var foo = 3;

if (true) {
    foo = 5; // Uncaught ReferenceError
    let foo;
}

ES6规定如果块内存在let命令,那么这个块就会成为一个封闭的作用域,并要求let变量先声明才能使用,如果在声明之前就开始使用,它并不会引用外部的变量。

如果把这里的let替换成var,由于不会形成块级作用域,变量的声明其实是与第一行重复了,相当于下面这段代码:

var foo;

foo= 3;

if (true) {
    foo = 5;
}

4. let禁止重复声明变量

如上面所述,使用var可以重复声明变量,但let不允许在相同作用域内重复声明同一个变量,下面的代码会引发错误:

// SyntaxError
function func() {
    let foo = 3;
    var foo = 5;
}

// SyntaxError
function func() {
    let foo = 3;
    let foo = 5;
}

// SyntaxError
function func(arg) {
    let arg;
}

5. let不会成为全局对象的属性

我们在全局范围内使用var声明一个变量时,这个变量会自动成为全局对象的属性(在浏览器和Node.js环境下,这个全局对象分别是window和global),但let是独立存在的变量,不会成为全局对象的属性:

var a = 3;
console.log(window.a); // 3

let b = 5;
console.log(window.b); // undefined

6. 最后:const命令

以上let所介绍的规则均适用于const命令,不同的是,const声明的变量不能重新赋值,也是由于这个规则,const变量声明时必须初始化,不能留到以后赋值,所以下面的代码是不合法的:

const a = 3;

a = 5;   // Uncaught TypeError: Assignment to constant variable

const b; // Uncaught SyntaxError: Missing initializer in const declaration

以上就是let和const的内容,可以看出,let和const大大改进了ES5的变量机制,使得JS更严谨和规范,随着ES6支持程度的提高,我们应该开始习惯let和const的使用了。

时间: 2024-10-01 07:26:49

var/let/const区别何在??的相关文章

var, let ,const区别

es6新增了let和const新命令,用于变量的声明,这两个和es5的var存在着差异,而且let和const也有着一些区别,既然他两是es6新增的方法那就有他们的独特之处,让我们来看看一看吧. 首先我们得先了解var的作用,var声明的变量可以改变,而且需要初始值否则会报undefined,这里存在着变量提升 ``js var a = 1; console.log(a)//a:1 function outPut(){ var a= 4; console.log(a)//a:4 } outPut

jacript var let const 区别

代码片段1: var xx = 1 var xx = 2 console.log(xx) output: 2 代码片段2: let xx = 3; let xx = 4; console.log(xx) output:报错,提示重复定义 xx 正确: let xx = 3; xx = 4; console.log(xx) 第二个let 去掉,也就是说 代码片段3: const xx = 5; const xx = 6 或者 const xx = 5 xx = 6; 都报错: 正确的只能定义且赋值

var let const 的区别

Var let const 的区别 1.Var 定义的变量存在变量提升,而了let和const不存在变量提升.即在定义的变量代码上使用该变量,var的会输出undefined,而let的会报错. 2.var不存在暂时性死区,而let存在,只要块级作用域内存在let,它所声明的变量就绑定了这个区域,不在受外部的影响 例如:var tem=123: if(true){ tem='abc';   //报错 ReferenceError,因为在if里声明了let,形成了自己的作用域,外部的访问不到,所以

javascript精雕细琢(一):var let const function声明的区别

目录 引言 一.var 二.let 三.const 四.function 五.总结 引言 在学习javascript的过程中,变量是无时无刻不在使用的.那么相对应的,变量声明方法也如是.变量是由自己决定,但变量声明方法是早已经定义好的.那么在使用变量之前,了解变量声明方法,就变得尤为重要.在ES6推出之前,最常用的声明变量方法就是var.但是由于var自身的缺陷,ES6推出了let和const替代var.虽然修正了var的缺陷,但不能改变的,是之前已经用var写了多少年的项目,这些项目是无法随着

var、const、let 的区别

定义变量的三种方式 var.const.let 都可以用来定义变量,但三者之间存在区别. var var 声明变量的时候无需初始化. var 声明的变量可在后面进行修改. var 声明的全局变量可以被函数修改. <!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript">

ES6和ES5变量声明的区别(var let const)

// es5的语法与es6的语法区别 // var let const console.log(name);//undefine,不会报错,因为变量声明会提到作用域的最前面 var name="aa"; for(var i=1;i<7;i++){ console.log(i); } console.log(i);//8,不会报错因为var声明的变量没有块级作用域 /** * 总结 var 声明的变量,声明语句会提到作用域的最前面,并且没有块级作用域 */ console.log(

JavaScript 中const、var、let 区别和使用

前言 我们对JS并不陌生,在使用JS的过程中.我们常常会使用var.const.Let声明变量. 以下总结这三者的区别以及使用的场景. 1.Const const定义的变量是不可以修改的,并且需要注意的是必须初始化.示例代码如下: const a = 1; console.log('函数外const定义a:'+a);//输出有值 a = 2 console.log('函数外修改const定义a:'+a);//输出报错 2.var var 定义的变量是可以修改的,如果不初始化会输出undefine

ES6中var/let/const的区别

最近无聊看了一下前端面试题,看到不少地方要求列出var/let/const的异同,自己整理一下,算加深一下记忆. 1.作用域 var为全局作用域,而let和const为局部作用域(仅作用在大括号内),举个简单例子: 1 if(true){ 2 var a = 1 3 let b = 2 4 const c = 3 5 } 6 console.log(a) //a打印出来为 1 7 console.log(b) //b is not defined 8 console.log(c) //c is

let、var、const的区别

先看let和var: 1. console.log(a); // undefined var a = 3; console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization let a = 3; 在当前代码执行之前,首先会把所有带var关键字的进行声明(带function关键字的也会提前声明并且定义),即所谓的变量提升,let则不存在这种情况. ps:项目中创建函数,一般都是基于函数表达式来实现