J27 浏览器执行代码机制

120 阅读2分钟
**一、浏览器执行代码机制**

**1. ** **执行环境栈(Exection Context Stack):**浏览器加载页面,想让代码执行,首先会形成一个栈内存(执行环境栈 ECStack);然后开始让代码准备执行;

**2. ** **全局上下文执行(Exection context Global):**最开始要执行的一定是全局下的代码,此时形成一个全局代码的执行环境(全局执行上下文 EC(G)),把EC(G)压缩到ECStack栈内存中去执行(进栈);每一个函数的执行也是这样操作的...

3. 有些上下文在代码执行完成后,会从栈内存中移除去(出栈),但是有些情况是不能移出出去的(例如:全局上下文就不能移除...)

**4.** 在**下一次有新的执行上下文进栈的时候,会把之前没有移除的都放到栈内存的底部,让最新要执行的在顶部执行**

**5.  变量提升:**在当前执行上下文中(不论是全局,还是函数执行私有的),JS代码自上而下执行之前,首先会默认把所有带VAR和FUNCTION关键字的进行声明或者定义

**     5.1 带VAR的只是提前声明**

**     5.2 带FUNCTION的会提前声明+定义**
** 二、例如(声明和定义的流程)**
  • 1.创建值100存储到栈内存中(引用数据类型首先创建堆,存完数据后,把堆的地址存放到栈中)

  • 2.创建一个变量 var n; =>变量声明(declare)

  • 3.让变量和值关联在一起 =>变量定义(defined)

  • 4.var a; 只声明变量但是没有给变量赋值(也就是未定义),所以默认值是undefined未定

    var n = 100; console.log(n);//=>100

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

**三、 例子02**
1.全局变量提升:var a; function func(){....};
```
console.log(a);
console.log(func);
var a = 10;
function func(){
console.log(b);
var b=20;
console.log(b);
}
func();
console.log(a);
console.log(func);
```![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/9/1732f472b227529e~tplv-t2oaga2asx-image.image)