关于前端:JS中var和let有什么区别详解

JS 中 let 和 var 的区别和分割

前言：置信很多人和我一样，应用 js 也有一段时间了，然而仍然将不明确在 js 中 var 申明的变量和 let 申明的变量到底有什么区别。本文就给各位介绍分明。

一，弄清楚共同点

要想理分明 2 者之间的区别，先搞明确它们之间的共同点

1. JS 中的变量是弱类型能够保留所有类型的数据，即变量没有类型而值有类型。let 和 var 与变量类型无关。
2. var/let/const 共同点是全局作用域中定义的变量，能够在函数中应用

var name = 'xiaoming';
function show() {return name;}
console.log(show());

3. 函数中申明的变量，只能在函数及其子函数中应用

function abc() {
  var name = "xiaoming";

  function def() {console.log(name);
  }
  def(); // 子函数后果: xiaoming
  console.log(name); // 函数后果: xiaoming
}
abc();
console.log(name); // 全局拜访: name is not defined

函数外部定义的变量，在内部无奈失常拜访

var name = "lulu";
function hd() {
  var name= "goudan";
  console.log(name); //goudan
}
hd();
console.log(name); //lulu

当初来通过例子感触区别

先运行以下 2 局部代码：
代码 1：

console.log(a); //undefined
var a = 1;
console.log(a);  //1

代码 2：

console.log(a); 
let a = 1;
console.log(a);

能够发现，代码 1 运行不会报错，在没有申明 var a 之前就应用变量 a，输入 undefined，然而代码 2 运行会间接报错’Cannot access ‘a’ before initialization‘; 这个就是 var 和 let 之间的区别所造成的，为什么呢？
这里牵扯到“变量晋升 ”，解析器会先解析代码，而后把申明的变量的申明晋升到最前，这就叫做变量晋升
代码 1 其实会被解析器解析为：

var a;
console.log(a); //undefined
a = 1;
console.log(a);  //1

应用 var 定义的代码，申明会被晋升到后面，赋值还在原地位

坚固一下常识，上面代码你认为输入的后果是什么？

var name = "Trump";
function Chairman() {if (false) {var name = "Biden";}
  console.log(name);
}
Chairman();

咱们剖析一下，首先定义全局变量 name 是 Trump，函数中的赋值语句 var name = “Biden”; 没有执行，那么 name 的值还是全局变量的 Trump！不好意思，最终的后果是 undefined。
函数外部的确是能够拜访到全局定义的变量，然而当你在函数外部定义变量和全局变量并不抵触！你会想 var name = “Biden”; 压根没有执行啊？而且就算不输入 Biden 也会输入 Trump 啊，怎么会输入 undefined？这就是 var 变量给咱们带来的麻烦；代码被解析器主动晋升了！以上代码会被解析器解析为：

var name = "Trump";
function Chairman() {
var name;
  if (false) {name = "Biden";}
  console.log(name);
}
Chairman();

这样一来，即便没有走到赋值语句处，在函数外部仍然开拓了新的内存地址来保留局部变量 name，所以最终输入的是 undefined。
这其实算是 js 语言晚期倒退的一个 bug。在 es6 的时候 js 推出了 ”暂时性死区 “ 这个概念，也就是TDZ; 它存在的目标就是规定变量必须申明先申明后应用；让程序更稳固。具体来说，当程序执行到蕴含 let 或 const 申明的代码块时，会创立一个称为暂时性死区的区域，该区域从申明开始直到块完结。在这个区域内，变量尽管曾经被申明，然而在申明之前拜访该变量会导致引擎抛出一个谬误。
这个个性能够让咱们的代码更加的强壮，说到减少 js 代码的健壮性，我举荐大家在编码过程中应用 js 的“严格模式 ”：
严格模式能够让咱们及早发现错误，使代码更平安标准，支流框架都采纳严格模式，严格模式也是将来 JS 规范
变量必须应用关键词申明，未声明的变量不容许赋值

'use strict'
age = 100;
console.log(age);

关键词不容许做变量应用

"use strict";
var public = 'houdunren.com';

变量参数不容许反复定义

"use strict";
function abc(name,name){console.log(name);
}

独自为函数设置严格模式

function strict(){
  "use strict";
  return "严格模式";
}
function notStrict() {return "失常模式";}

那么上面介绍除了 let 有 TDZ 爱护这个长处外的其它与 var 的不同之处

1. let 存在块作用域个性，变量只在块域中无效

{
    let name= 'lulu',age= 18;
    console.log(name); //lulu
}
console.log(name); //name is not defined

能够看到将代码放在大括号中，那么这个变量只在块内失效
然而块外部能够拜访到下层作用域的变量

let age =19;
{
    let name= 'lulu';
    console.log(age); //19
}
console.log(age); //19

2. let 定义的全局变量不会被保留在 window 对象中

在 JavaScript 中，一个浏览器窗口就是一个 window 对象。会保留一些和窗口无关的信息
比方分辨率其实就是在 window 中保留，如果是 var 申明的全局变量，也被保留在 window 中

console.log('显示屏宽度'+screen.width);
console.log('显示屏宽度'+window.screen.width);// 值雷同
var name = "lulu";
console.log('name'+name);
console.log('name'+window.name);// 值雷同

var 这个个性其实也没什么卵用，反而会造成歧义

总结

let 和 var 的区别：

1. ES6 引入 let 和 const，减少 ”TDZ” 个性，规定必须先申明后应用。
2. let 存在块作用域个性，变量只在块域中无效。
3. let 全局变量与 window 中的变量分来到。

我集体在捋分明 let 和 var 的区别和分割之后。当前决定当前放弃应用 var！，因为 let 齐全能够取代它，而且还要做的更好。