let 和 var 定义变量的区别

一、变量提升

var 存在变量提升，而 let 不存在变量提升，所以用 let 定义的变量一定要在声明后再使用，否则会报错。

var

//var定义的变量存在变量提升，变量会把声明提升到整个作用域的最前面
//例子1
console.log(a);  //undefined
var c=10;

//等价于
var c;
console.log(a);  //undefined
c=10;

/*------------------------*/
//例子2
var a=100;
function func(){
    console.log(a); //undefined
    var a=10;
    console.log(a); // 10
}
func(); //调用函数

//等价于
var a=100;
function func(){
    var a;
    console.log(a); //undefined
    a=10;
    console.log(a); // 10
}
func(); //调用函数

//注意：
//对于不声明而直接赋值的变量，相当于全局变量，赋值之后才可以使用，赋值之前会报错
console.log(a); //报错：a is not defined
a=100;
console.log(a); //100

let

//let定义的变量不存在变量声明，变量在声明前使用会报错
//例子1
console.log(a);  //报错 a is not defined
let a=100;

//例子2
function func(){
    console.log(a);
    let a=100;
}
func();//调用函数

二、作用域

var：只有全局作用域和函数作用域概念，没有块级作用域的概念。

let：只有块级作用域的概念 ，由 { } 包括起来，if语句和for语句里面的{ }也属于块级作用域。

var

//全局作用域例子
//也就是除了在函数内部定义的变量，其他都是全局变量。
for(var i=0;i<100;i++){
    ;
}
console.log(i); // 100

//函数作用域例子，如下 b会输出10 ，而a会报错“a is not defined”，为什么呢？
//因为对于不声明而直接赋值的变量（b），相当于全局变量。
//而对于在函数里声明赋值的变量（a），它只在函数内部有效，外部无法访问，否则会报错

function func(){
    b=10;
    var a=100;
}
func();//调用函数
console.log(b);  //  10
console.log(a);  //报错  a is not defined

/*补知识
    函数的语法：自调用函数，也就是会定义并调用该函数
    (function(){

    })();
*/
//考一考
(function(){
    var a=b=100;
})();
console.log(b);
console.log(a); 

//问题:a和b分别会输出什么呢？

//答案：b会输出100，而a会报错“a is not defined”

//为什么呢？

//首先，将该函数分解为我们所熟悉的写法
(function(){
    var a=100;
    b=100;
})();
console.log(b); //  100
console.log(a); // 报错 a is not defined;

//由此，可以看出了吧？这是前面所说的“函数的作用域”：b相当于全局变量，而a只作用于该函数内，外部访问不了。

let

只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。在代码块中，使用let命令声明变量之前，该变量都是不可用的，这在语法上称为“暂时性死亡”

//例子1
//会报错“a is not defined”,因为在if代码块内，使用let声明变量之前，该变量都是不可用的，否则会报错
if(true){
    a=123;
    let a;
}

//例子2
//会报错“i is not defined”,因为用let定义的i只在for循环体内有效
for(let i=1;i<100;i++){
    ;
}
console.log(i)
 

三、重复声明

var：变量可以多次声明

let：变量不允许重复声明，let不允许在相同作用域内，重复声明同一个变量。不能在函数内部，重新声明同一个参数

var

var a=10;
function func(){
    console.log(a); // undefined
    var a=11;
    console.log(a); // 11
}
func();
console.log(a); // 10
var a;
console.log(a); // 10
var a =12;
console.log(a); // 12

//这个其实涉及到的是var的变量可重复声明和变量提升
//以上其实可以等价于
var a;
a=10;
function func(){
    var a;
    console.log(a); // undefined
    a=11;
    console.log(a); // 11
}
func();
console.log(a); // 10

console.log(a); // 10
a =12;
console.log(a); // 12

//这样，相信很容易得出正确的答案

let

//例子1
//会报错“Identifier ‘a‘ has already been declared”
var a=1;
let a=2;

//例子2
//不会报错，因为a可以在不同作用域内声明的。
let a=‘hello‘;
{
    let a=‘hi‘;
    console.log(a); // hi
}
console.log(a); // hello

//例子3
//会报错" Identifier ‘a‘ has already been declared"，因为var定义的变量会发生变量提升。
let a=‘hello‘;
{
    var a=‘hi‘;
    console.log(a);
}
console.log(a);

//例子4
//会报错“Identifier ‘a‘ has already been declared”，
//不能在函数内部重复声明同一个参数，因为参数变量是默认声明的，所以不能用let或const再次声明
function func(a){
    let a=‘hello‘;
    console.log(a);
}
func(‘hi‘);

转载 https://blog.csdn.net/qq_41638795/article/details/81318704

原文地址：https://www.cnblogs.com/Tanghongchang/p/11007108.html