JS作用域与预解析

   var a=10;
   var b=10;
  // var c="hello";
   console.log(window.c);//加window.，如果没有找到变量c，会undefined，不加的话，会报错
          
   function fun(){
       console.log("我是fun函数");
   }
   window.fun();//创建的函数都会作为window对象的方法保存

（2）、局部作用域（函数作用域）

在函数内部就是局部作用域。这个变量只在函数内部起作用

调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁

每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的

在函数作用域中可以访问到全局作用域的变量，在全局作用域中无法访问到函数作用域的变量

es5的环境下，在函数中如果要访问全局变量，可以使用window对象

javascript 复制代码

  var a = 10;
      function fun() {
        var a = "我是fun函数中的变量a";
        //console.log("a="+a);
        function fun2() {
          // console.log(a);
          console.log("a=" + window.a);
        }
        fun2(); //10
      }
      fun();

（3）、作用域链

只要是代码，就至少有一个作用域

写在函数内部的局部作用域

如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域

当在函数作用域中操作一个变量时，它会先在自身作用域中寻找，如果有，就直接使用，如果没有，就去它上一级作用域去寻找，如果全局作用域中依然没找到，则会报错

根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称做是作用域链

面试题：

javascript 复制代码

      //第一题
      var x = 10;
      function fn() {
        console.log(x);//10
      }
      function show(f) {
        var x = 20;
        f();
      }
      show(fn);
      
      //第二题
      /*说说它们的输出情况*/
      var fn = function () {
        console.log(fn);//输出函数本身
      };
      fn(); //函数

      var obj = {
        fn2: function () {
          // 在自己身上找，找不到fn2,然后去全局找，也找不到所以报错
          console.log(fn2); //报错
          // 通过this在自己身上找，找到了fn2
          // console.log(this.fn2)//输出函数本身
        },
      };
      obj.fn2();

二、全局执行上下文代码的流程

在执行全局代码前将window确定为全局执行上下文顶级对象

对全局数据进行预处理

var定义的全局变量==>undefined, 添加为window的属性

function声明的全局函数==>赋值(fun), 添加为window的方法

this==>赋值(window)

开始执行全局代码

三、执行上下文栈

在全局代码执行前, JS引擎就会创建一个栈来存储管理所有的执行上下文对象
在全局执行上下文(window)确定后, 将其添加到栈中(压栈)
在函数执行上下文创建后, 将其添加到栈中(压栈)
在当前函数执行完后,将栈顶的对象移除(出栈)
当所有的代码执行完后, 栈中只剩下window

预解析：

变量提升与函数提升

JS代码是由浏览器中的JS解析器来执行的，JS解析器在运行JS代码的时候分为两步：先预解析再代码执行

预解析： js引擎会把js里面所有的var 还有function提升到当前作用域的最前面

**代码执行：**按照代码书写的顺序从上往下执行

预解析分为变量预解析（变量提升）和函数预解析（函数提升）

变量提升就是把所有var的变量声明提升到当前的作用域最前面，不提升赋值操作

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

变量提升

为了理解变量提升，首先我们要将声明与赋值分开

当我们写var name="张三" ；时，JavaScript 引擎其实把这句话看成了两行代码：

var name;这是声明（告诉引擎有一个变量叫 name）
name="张三";这是赋值（把值放进去）

下面代码的输出结果是什么？

javascript 复制代码

console.log(a); 
var a = 10;

按照正常的逻辑（从上往下运行），第一行应该报错才对，因为它这时候还没遇到a的定义

但在浏览器里运行，它不会报错，而是输出 undefined

javascript 复制代码

// --- 预解析阶段（偷偷做的事）---
var a;           // 1. 把声明提到最上面，默认值是 undefined

// --- 执行阶段（真正运行的事）---
console.log(a);  // 2. 此时 a 存在，但还没赋值，所以是 undefined
a = 10;          // 3. 赋值留在了原地

结论：var 的预解析只提升了名字，把值丢在了原地。所以它不报错，但也记不住值。

函数提升

函数声明的待遇比var高级得多。它享有整体提升的特权

javascript 复制代码

sayHi(); // 我在定义之前就调用了！

function sayHi() {
    console.log("你好！");
}

这段代码是可以正常运行的！输出 "你好！"

浏览器眼中的代码长这样：

javascript 复制代码

// --- 预解析阶段 ---
function sayHi() {      // 整块都被提上来了
    console.log("你好！");
}

// --- 执行阶段 ---
sayHi();                // 所以这里能找到函数，正常执行

经典面试陷阱

这段代码是报错，还是输出我吃饱了？

javascript 复制代码

eat(); 

var eat = function() {
    console.log("我吃饱了");
};

报错，在在预解析（Hoisting）的眼里，变量声明 和赋值是被强行拆散

javascript 复制代码

// --- 1. 预解析阶段 ---
var eat;            // 变量 eat 被提升了，但默认值是 undefined
                    // 注意：后面的 function... 并没有跟着上来！

// --- 2. 执行阶段 ---
eat();              // 此时 eat 的值是 undefined。
                    // 你试图运行 undefined()，JS 引擎就会怒吼：
                    // "TypeError: eat is not a function"

eat = function() {  // 这一步才把函数赋值给 eat，但太晚了，程序上面已经挂了
    console.log("我吃饱了");
};

暂时性死区（TDZ）

var与let和const的区别：以下代码会怎样？

javascript 复制代码

console.log(name); // 这里会打印 undefined 吗？
let name = "张三";

会报错：Uncaught ReferenceError: Cannot access 'name' before initialization

（无法在初始化之前访问 'name'）

为了搞懂var和let的区别，我们需要把"预解析"拆得更细一点。一个变量的诞生其实分三步：

创建 (Creation)：在内存里登记名字"我有个变量叫 name"。
初始化 (Initialization)：给它一个默认值（比如 undefined）。
赋值 (Assignment)：真正把"张三"赋给它。

JS引擎在也会预解析对let进行创建，但不会初始化一个undefined。而是在外面加个锁（暂时性死区），在程序读到正式赋值那一行之前，谁"碰"谁"死"。

目的：ES6想要把let 设计得更安全、更规范（不像var 那样既污染全局window，又允许在声明前乱用），所以才引入了 TDZ（死区） 机制。