js进阶之 声明提升和 var & const & let

声明提升

函数的声明提升到最上面，函数执行位置取决于调用的位置
变量的声明提升到仅次于函数的下面

说到这里看段代码来引入下一个话题

<script type="text/javascript">
fn(); //  undefined
var variables= 'Global variables';
fn(); // Global variables
function fn() {
  console.log(variables);
}
</script>

上面这段代码可以执行的原因在于生命提升，他正常的执行顺序并不是书写顺序，但是他们之间有关联，上面这段执行顺序如下

function fn() {
  console.log(variables);
}
var variables;
fn(); //   undefined
variables= 'Global variables';
fn(); // Global variables

看完这段代码再来看下一段

var variables= 'Global variables';
function fn() {
  console.log(variables);// undefined
  var variables= 'Local variables';
  console.log(variables);// 'Local variables
}
fn(); 

看着这段的输出的顺序应该是 Global variables 和 Local variables
这段代码第一个console.log输出 undefined 的原因也是声明提升，他的执行顺序是：

function fn() {
  var variables;
  console.log(variables);// undefined
  variables= 'Local variables';
  console.log(variables);// 'Local variables
}
var variables;
variables= 'Global variables';
fn(); 

说到这里就用不得不说 const 和 let了

var & let & count

const 和let 和var 都是用于声明，但又有不同；
var 有声明提升的特性，可以修改随意修改值
let & conut 块级作用域，不具备声明提升，拥有暂时性死区（下面解释）的特性
let 值可以随意修改
const 默认的情况下 值必须初始化，栈里面的值不可以修改，堆的值可以修改（个人理解）

块级作用域： 不存在声明提升

console.log(variables); // 报错： Uncaught ReferenceError: variables is not defined
const variables = '块级作用域';

块级作用域： 暂时性死区

暂时性死区（个人理解）: 块级作用域声明的变量 在未实例化之前，不能出现同名的变量，否则则抛出错误；由此可以看出const和let其实也具备一种提升的本质

var variables = '暂时性死区';  // 报错 Uncaught SyntaxError: Identifier 'variables' has already been declared
console.log(variables);
const variables = '块级作用域';

const 值必须初始化

const variables ； // 报错 Uncaught SyntaxError: Missing initializer in const declaration

const 修改(多个合并说)

// 栈值不可修改
const variables = '块级作用域';
variables = '想改你'; // 报错 Missing initializer in const declaration
// 堆值默认可以修改 
const variables = {text: '块级作用域'};
variables.text = '想改你';
console.log(variables.text); // 想改你
// 添加 volatile 修饰之后 不能修改
volatile const variables = {text: '块级作用域'};
variables.text = '想改你'; // 报错 Uncaught SyntaxError: Unexpected token const
console.log(variables.text);

块级作用域 和 var 的区别，举一个典型的面试题来说明

for(var i =0; i<5; i++) {
  setTimeout(()=>console.log(i));
}
console.log("你是第二个console");

/*  这段代码会输出什么？为什么？
先是  你是第二个console  再之后  五个5
（个人理解，错误望指正）
因为for循环体里面是个异步函数，还没有等这个输出完主程序就先执行了console.log ，
再之后 异步执行完去查找 i 因为 i 的声明是var，作用域在全局 而且已经加到了5,所以输出5个5
*/

如果我想for循环里输出0-4怎么办？

// 方法一
for(var i =0; i<5; i++) {
  (function(i){
    setTimeout(()=>console.log(i))
  })(i)
}
// 方法二
for(leti =0; i<5; i++) {
  setTimeout(()=>console.log(i));
}