JavaScript - varlet和const介绍

Posted 2021-06-17 WHOVENLY

目录

• 1.var
• 2.let
• 3.const

1.var

1.用var定义的是全局变量，只有个函数作用域，所以会造成变量污染。

//只有在函数中定义的变量，才有作用域，如下在函数foo中定义的e变量只能在foo函数中使用，在foo函数以外使用会找不到该变量
function foo (){
  var e = 6;
  console.log(e)//6
}
console.log(e)// e is not defined

//例如下所示，如果我们在循环内部使用var声明一个变量的话，当循环结束后，该变量并没有被回收。
let arr = [1, 2, 3];
//使用var定义j
for (var j = 0; j < arr.length; j++) {
  console.log(arr[j])
}
console.log(j);//3

2.var的特性之变量提升：

①用var定义的变量会发生变量提升

②变量提升：它会将当前作用域的所有变量的声明提升到程序的顶部

③为什么会有变量提升：js和其他语言一样，都要经历编译和执行阶段。而js在编译阶段的时候，会搜集所有的变量声明并且提前声明变量，而其他的语句都不会改变他们的顺序，因此，在编译阶段的时候，第一步就已经执行了，而第二步则是在执行阶段执行到该语句的时候才执行。

④var定义的变量声明和函数的变量声明都有变量提升的效果，且函数声明高于一切，毕竟函数是js的第一公民。多个函数声明的时候，是由最后面的函数声明来替代前面的。

⑤当变量声明和变量赋值合在一起写时，会把这两个部分拆开，然后将变量声明提升，赋值部分依旧在原地。

//例1
console.log(a);
var a = 10;
// 编译步骤
// var a;
// console.log(a)// undefined
// a = 10


// 例2
foo();
function foo() {
    console.log('foo')
};
var foo = 2;
// 编译步骤
// function foo() {
//     console.log('foo')//foo
// }
// var foo;
// foo();
// foo = 2;

// 例3
foo();
function foo() {
    console.log('1')
}
function foo() {
    console.log('2')
}
// 编译步骤
// function foo() {
//     console.log('1')
// }
// function foo() {
//     console.log('2')
// }
// foo();//2


// 例4
foo();
var foo = function () {
    console.log('foo')
};
// 编译步骤
// var foo;
// foo(); //foo is not a function
// foo = function () {
//     console.log('foo')
// };

2.let

1.由来及作用：let它的出现，我认为主要是解决了块级作用域的需求。因为js以前本身是没有什么块级作用域的概念的(顶多就算上一个函数作用域),因此这也导致了很多变量污染的问题，很多时候由于你没有处理好作用域的影响，导致了奇怪的问题。因此我们一般都采取函数作用域的方式来防止变量的污染。不过既然有了let的出现，我们就可以很方便的解决这个问题.

2.let之临时性死区

①定义：在块的开始部分到该变量的声明语句之间，我们称之为临时性死区，你不可以在这个区域内使用该变量，直到遇到其let语句为止。

②作用：比较安全可靠:对var或者是直接声明全局变量来说，变量都可以未声明或者在声明语句之前就使用，而使用了let之后，该变量必须在其声明语句后，才能使用，否则就会报错。这就在一定程度上避免了变量滥用的情况。

//由于var它具有变量提升的功能，所以该声明语句会移到最上面执行；
(function hh() {
  console.log(i); //undefined
  var i = 10;
})();
//由于let它具有临时性死区的现象，所以会报错
(function hhh() {
  console.log(j); //Uncaught ReferenceError: Cannot access 'j' before initialization
  let j = 77;
})();

3.const

1.const用于定义一些常量（变量的地址不发生改变），const无论是作用于基本类型还是引用类型，它都是为了保证变量的地址不发生改变(因为你对基本类型而言，你给它赋一个新值,其实也就意味着修改了该变量的地址)

2对基本类型而言

对于基本的类型而言的话，比如number,string,boolean等来说，确实它就是声明一个不会变的常量，只要你修改了它，就会报错

const a = 1;
a = 2;//Uncaught TypeError: Assignment to constant variable.
const b = 'Karry'
b = 'Karry'//Uncaught TypeError: Assignment to constant variable.
const c = true;
c = false//Uncaught TypeError: Assignment to constant variable.

不过，对于引用类型而言的话，它指的并不会对象的内容不变，而是对象的地址不变。也就是说，你可以修改对象的内部成员，但是你不可以修改该变量的地址。

const obj = {
    name:'Karry'
}
obj.school = 'ctsz';
console.log(obj)//{name: "Karry", school: "ctsz"}
obj = {};//Uncaught TypeError: Assignment to constant variable.