JS 几段代码 底层执行解析

!(()=>{
  z = 9;
})()

console.log(z);//9

立即执行函数 => 没有let或var声明 

        =>   z=9;   不声明直接赋值   =>  变量提升,相当于全局声明 var z=9;

        => 输出z   =>   9

!(()=>{
   var y = 9;
})()
console.log(y);//ReferenceError: y is not defined

立即执行函数 => var  y=9;  声明局部变量y,赋值9,然后啥也没做,直接全部销毁了

        => 输出y   =>   什么都找不到,直接报错:y没有定义

console.log(x);//ReferenceError: x is not defined
!(()=>{
    x =9;
})()

输出x   =>   什么都找不到,直接报错:x没有定义

立即函数在输出语句下面,就没机会执行,如果立即函数在上面,就能得到x,和最上面一样。

let d=10;
function foo(){
    console.log(d);
}
!(()=>{
    let d =9;
    foo();
})()

//10

 定义变量d(全局)

  创建函数foo

立即执行函数=> 定义变量d(局部)

      => 调用foo函数    函数执行的位置在上面,只看到全局的d 所以得到d=10

      => 输出10

let d=10;
!(()=>{
    let d =9;
    function foo(){
        console.log(d);
    }
    foo();
})()
//得到9
-----------------------
!(()=>{
    let d =9;
    foo();
})()
function foo(){
    console.log(d);
}//d is not defined
----------------------
let d=10;
function foo(d){
    console.log(d);
}
!(()=>{
    let d =9;
    foo(d);
})()
//得到9
console.log(a);//报错 不能在初始化之前使用a  Cannot access 'a' before initialization
console.log(b);//报错 b没有声明  b is not defined
let a=b=c=8;
function fool(){
    let a=b=c=10;
}
console.log(a,b,c);//8 8 8
fool();
console.log(a,b,c);//8 10 10
let a=b=c=8;
=> let a(全局); 等待右边计算(b=c=8)
=> var b(全局); 等待计算(c=8)
=> var c(全局); c赋值8,即 c=8,得到表达式c=8的值,8
=> b赋值8,即 b=8,得到表达式b=c=8的值,8
=> a赋值8,即 a=8;
所以
console.log(a,b,c);//8 8 8
调用fool();
函数里let a=b=c=10;

=> let a(局部); 等待右边计算(b=c=8)
=> 已经有了全局b; 等待计算(c=8)
=> 已经有了全局c,c重新赋值10,即c=10,得到表达式c=10的值,10
=> b赋值10,即 b=10,得到表达式b=c=10的值,10
=> a(局部)赋值10,即 a=10;
所以最后一次
console.log(a,b,c);//8 10 10 局部的变量a和全局的变量a不是一回事
console.log(fool);//[Function: fool]
var f = fool;
var fool = 13;
function fool() {
    console.log(fool);
    var fool = 4;
}
f(f=8);//undefined
console.log(fool);//13
console.log(f);//8
fool(f = 6);//TypeError: fool is not a function

 预编译=>  fool 等于一个函数

console.log(fool) => 输出一个函数

var f = fool;  把fool函数赋值给 变量 f  ,f 指向函数

var fool = 13;  重新声明fool,并赋值为13,不再指向函数

f(f=8);  调用函数=> 计算 f=8 表达式

       => f被赋值为8,不再指向函数,但是函数已经被调用,所以开始执行函数

       => 传递8进去函数,没任何意义,

       => console.log(fool); 得不到外面的fool,因为函数体内有局部的fool声明,但是又在使用后才声明,所以得不到值,只拿到一个undefined

console.log(fool);//13
console.log(f);//8

fool(f = 6);//TypeError: fool is not a function 此时fool就是一个数值 13
原文地址:https://www.cnblogs.com/jiayouba/p/11944562.html