Js基础_var,let,const（预解析）

---

导读

// 1.
// console.log(num) // ReferenceError: num is not defined
//原因：num变量未定义

// 2.
console.log(num)//undefined
var num = 10
//原因：var 会进行声明提升，声明会提到前面，但是赋值还是会在原来的位置

// 3.
fn()//10
function fn(){
  console.log(10)
}
// 函数被调用执行

// 4.
fun()//TypeError: fun is not a function
var fun = function(){
  console.log(10)
}
// 原因，fun是一个变量，var会进行声明提升，将var fun提升之后，fun是一个空的变量，并不是一个函数

一、预解析

js解释器执行代码的时候分为两步：
1.预解析：

js引擎会把js里面的var和function提升到作用域的最前面

2.执行代码：

按书写顺序从上往下执行代码

1.预解析

声明提升

把所有var的变量声明提升到当前作用域的最前面，不提供赋值操作，具体可参考Js基础_作用域中的var，let，const区别

console.log(num)//undefined
var num = 10
//原因：var 会进行声明提升，声明会提到前面，但是赋值还是会在原来的位置

函数提升

函数提升就是把所有函数声明提升到作用域的最前面，不调用函数

2.babel编译

这是很多初学者都没有去关注的一个点

编译前：

这里我们是将会必定报错的注释了，在后面我会取消注释进行编译

//1.var定义变量的fori循环
for (var i = 0; i < 3; i++) {
  console.log(i)
}

//2.let定义变量的fori循环
for (let i = 0; i < 3; i++) {
  console.log(i)
}

//3.var
console.log(varValue)// undefined
var varValue = '我是var'
varValue = 'var'
console.log(varValue)

//4.let
// console.log(letValue)// 报错 无法在初始化之前访问
let letValue = '我是let'
letValue = 'let'
console.log(letValue)// 报错

//5.cont
// console.log(constValue)// 报错 无法在初始化之前访问
const constValue = '我是cont'
// constValue = 'cont' //报错 const声明的变量值不难被更改
console.log(constValue)

执行结果：

编译后：

这里编译的是取消注释的版本

//1.var定义变量的fori循环
for (var i = 0; i < 3; i++) {
    console.log(i);
}
//2.let定义变量的fori循环
for (var i_1 = 0; i_1 < 3; i_1++) {
    console.log(i_1);
}
//3.var
console.log(varValue); // undefined
var varValue = '我是var';
varValue = 'var';
console.log(varValue);
//4.let
console.log(letValue); // 报错 无法在初始化之前访问
var letValue = '我是let';
letValue = 'let';
console.log(letValue); // 报错
//5.cont
console.log(constValue); // 报错 无法在初始化之前访问
var constValue = '我是cont';
constValue = 'cont'; //报错 const声明的变量值不难被更改
console.log(constValue);
//# sourceMappingURL=test.js.map

执行结果：

二、案例

案例1

var num = 10
fn()
function fn(){
  console.log(num)
  var num =20
}

输出：undefined
//这个案例涉及到了作用域和预解析的知识点

案例2

var num = 10
function fn(){
  console.log(num)
  var num =20
  console.log(num)
}
fn()

输出：
undefined
20

案例3

var a = 10
function fn(){
  var b =9
  console.log(a)
  console.log(b)
  var a ='23'
}
fn()

输出：
undefined
9

案例4

fn()
console.log(c)
console.log(b)
console.log(a)
function fn() {
  // b和c是直接赋值，没有var声明，当全局变量来看
  // 只有a被声明了
  var a = b = c = 9;
  console.log(a)
  console.log(b)
  console.log(c)
}

输出：
9
9
9
9
9
ReferenceError: a is not defined
// a不是全局变量，只有在fn函数中有作用