JavaScript 变量

Var Let Const 变量区别

var 全局变量 ，有预解析，存在变量提升 属于window，函数中定义的var仅可在局部使用

const 局部变量，定义好后不能改变

let 局部变量，没有预解析，不存在变量提升

代码全局/局部体现：

 //var 可以alert 
 //const 与 let 报错未定义
    if (true) {
        //var a=12;  
        // const a=12
        let a = 12;
     }
  alert(a); // a is not defined

代码变量提升体现：

1.alert将会弹出undefined var a=5 变量默认在alert前面会定义一个var a

2.如将let a=12 改成 var a=12 alert依旧会弹出 undefined 优先内部

   let a = 12;
     function fn() {
         alert(a); 
         var a = 5;
      }
   fn()

3.function与var一样具有变量提升

fn()//6
function fn() { console.log(1) }
function fn() { console.log(2) }
var fn = function () {
    console.log(3)
}
fn()//3
function fn() { console.log(4) }
function fn() { console.log(5) }
function fn() { console.log(6) }
fn()//3
​
​
//实际运行 function具有变量提升  先将所有funcion 在顶层定义好了  输出633
function fn() { console.log(1) }
function fn() { console.log(2) }
function fn() { console.log(4) }
function fn() { console.log(5) }
function fn() { console.log(6) }
fn()//6
var fn = function () {
    console.log(3)
}
fn()//3
fn()//3

函数中定义的var仅可在局部使用1:

 function test() {
         if (false) {
             var testval = 'aaa'
         }
    }
    test()
    console.log(testval)//testval is not defined

函数中定义的var仅可在局部使用2:

   function test() {
        console.log(text) //aa
    }
    function test2() {
        var text = 'bb'
        console.log(text)  //bb
        test()
    }
    var text = 'aa'
    test2()

for是一个作用域 let i=''abc' 也是一个作用域

  for(let i = 0; i<3; i++){
       let i = 'abc';
       console.log(i);//打印将三次abc
   }
​

作用域问题：

   for (let i = 0; i < 10; i++) {
       console.log(i); //1~9
   }
    console.log(i); //i is not defined
​
   for (var i = 0; i < 10; i++) {
       console.log(i); //1~9
   }
    console.log(i); //10

var ：for循环中var 是全局范围内都有效，所以全局就一个i.每次循环i都发生变化，console的i指向的是全局的i

let：当前i只在每次循环的时候有效，所以每次循环都是一个新的变量

var arr = [];
      for (let i = 0; i < 3; i++) {
         arr[i] = function () {
            console.log(i); //2
          }
      }
 arr[2]();
​
var arr2 = [];
      for (var i = 0; i < 3; i++) {
         arr2[i] = function () {
            console.log(i); //3
          }
      }
 arr2[2]();
​
for (var i = 0; i < 2; i++) {
    setTimeout(() => {
        console.log(i)  // 2 , 2
    }, 10)
}
​
for (var i = 0; i < 2; i++) {
    ~function (i) {
        setTimeout(() => {
            console.log(i) // 0, 1
        }, 10)
    }(i)
}
​

不允许重复声明：

//报错
function(){
  let a=1;
  var a=2
}
//报错
function(){
    let a=1;
    let a=2
}
//报错
function func(arg){
    let arg
}
//不报错
function func(arg){
  {  
     let arg
   }
}

const 无法更改，例如：

 const a = 12;
       a = 5;
 console.log(a); //Assignment to constant variable.

const 可以使用push之类的，例如：

  const arr =['a','b'];
  arr.push('c');
  console.log(arr);//['a','b','c'] 

const 如果什么都不能进行操作 可以使用 Object.freeze ，例子：

 const arr = Object.freeze(['a','b']);
 arr.push('c');
 console.log(arr);// Cannot add property 2, object is not extensible

块级作用域原因：

1.内部变量可能会覆盖外部变量

var a='abc'
function func(){
    console.log(a)
    if(true){
      var a='bcd'
    }
}
func()//'undefined'

2.计数泄露

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

顶层对象的属性 浏览器中顶层对象是winodw ,ebworker与node没有winodw ,web worker顶层是self，node也没有self，node顶层是global

var a=1
window.a //1
let b=1
window.b //undefined