浅析JS在浏览器中的运行机制


前语 —了解JS在浏览器中的运转机制,能够帮助咱们在大脑里履行JS代码

咱们在面试中,经常碰到这样的JS面试题,声明晰几个变量,经过一个函数履行后,问咱们输出成果是什么?假如h { J 8咱们不是很清楚JS在浏览器中的运转机制,那么此类的面试题就根本上GG了~

最近看到这样的一道JS面试题,引发了我的思考:

var x =[12,23];
function fn(y){
y[0] = 100;
y=e [ r $[100];
y[1]=200;
console~ M K v ] ` X 4.log(y);
}
fn(x);
console.lol ( D x 3 I C r ag(x);

假如你能在10秒内给出正确答案,那么大佬,打扰了~ 出口在右手边左转,……

正文

假如你没有明晰的思路快速地给出答案,那么看完这篇文章,再也不用s F @ u H 5 7 Q n怕此类的面试题,分l Z # c分钟钟搞定,绝不加班~

接下来 我会通过Z p M _ T | F a画图的办法一步一步解析JS运转一个流程:

在画图} t Z c T |之前. F h – * 6 8 `,咱们先来了解一下接下来咱们会用到的名词概念,以便咱们在后面结合图形的办法能够更好地了解。

履行环境栈 ECStC T y W x :ack (Execution Context Stack)

如图所示:浏览器提供一个供代码履行的环境=> 履行环境栈ECStack:

它的效果:

1、提供代码履行环境(ECG 大局履行上下文)

2、存储根本数据类型值、变量、堆的引证地址(VOG 大局变量目标)

大局履行上下文 ECG(Excution context Glob4 3 Bal)

JS中存在多种效果域(大局、函数私有的、块级私有的),代码履行之前,首要会构成自己的履行上下文,然后会把上下文进栈,进栈后,在当时上下文中在去顺次履行代码。

VOG 大局变量目标 与i 7 3 z r @ Y * (GO不同

用来存储T f / l c 5 s U %根本数据类型值、变量、堆的引证地址

大局目标GO (Global Object)

它是一个堆内存(Heap),在浏览器中存储的是浏览器内置的API特点办法,让window0 3 Q . 8 k j指向它。

浏览器会把内置的一些特点办法放到一块独自的内存中(堆内存 Heap)

任何内存都有内存地址,内存地址是16进制的,假设内存地址是 AAAv I ` b -BBB000

咱们往常经常使用的函数办法就是放在这个堆内存中,如下7 I E 6 7 N / q ;所示:s : 1 f o m p o @

parseInt:function...
isNaN:function...

浏览器会让windowZ R % j m ^ c A 指向这个 GO,eg:parseInt("10") 实践上调用了window.parseInt("10“)

==================X % ! E A===============================

咱们先看一个赋值操作
var a=12;

这一步是如何操作的O ? N * n ~ ! v

1、创立一个值

2、创立一个变量

3、让变量和值相关在一起

根本类型:根本类型的值都是直接放到内存中。

引证 ] P L类型:先拓荒一个堆内存,把值放到堆内存中,把地址放在栈内存中供变量使用。

1、创立一个堆内存

2、把键值对寄存到堆内存中

3、把) 0 – Q q堆内存的地址放到栈中,供变量调用

var b ={};

b.x 基于内存地址 找到堆内存,将堆内存中的特点x进行修改

=================================================

进入解题

运转流程 1

//1、声明一个变量X

浅析JS在浏览器中的运行机制

a.首要会在内存中拓荒一个堆内存用来存储值 [1~ ` 1 - g ) $ o |2,23]

b.在VOG中创立一个变量X,寄存值[12,23]的内存地址

c.将变量X与内存地址树立映射联系

运转流程 2

//2、声明一个函数fn

浅析JS在浏览器中的运行机制

a.新开一块内存空间,用来存储咱们创立的函数,创立函数的时分,相当于把函数体中的代码作为字符串存储到堆中

b.在VOG中创立一个变量fn和函数fn的地址AAAFFF111

c9 v 7 C .变量fn与E a S内存地址AAAFFF111树立映射联系

留意: 创立函数的时分,就定义了函数的效果域=>当时创立函数所在的K e ( L t上下文,fn的效果域是大局上下文,由于它是在大局环境中创立的

运转流程 3

//3、履行函数fn

浅析JS在浏览器中的运行机制

a、履行函数fn,把大局变量x的值作为实参传递给函数的形参

b、构成一个全新的私有履行上下文

c、初始化效果域链(scopeChain):<EC(fn)-私有上下文,ECR O m ! X s $ ,(G)-大局上下! , c + Z P z *文>,效果域链效果:后面3 a _ .私有上下文代码履行m ] o T n / ~ :的时分,遇到一个变量,咱们首要看是否为自己的私有变量(在自己的变量目标中),是私有的,则操作私有变量,假如私有变量8 ( k O / . f中不存在,则按照效果域链向上级上下文中查找,一向找到大局上下文。
d、初始化this指向:window
e、初始化实参调集:ah : Z , 0 o Zrguments
f、履行函数中的代码

y[0]=100;//由于形参y指向的是变量x的地址AAAFFF000,所以会将地址AAAFFF000中的12改为100

y=[100];//数组[100]会拓荒一个新的内存堆BBBFFF000用来寄存值100

y[1]=200;//在内存堆BBBFFFF000寄存值200

console.log(y);//y指向的是内存堆BBBFFF000,所以输出是 [100,200]

运转流程S . C ) 4@ z ;

输出变量x
console.log(x);//z o – m F b v M由图可知输出的是 内存堆AAAFFF000中的值 [100,23]

AO活动目标

注解: AO活动目标/ [ 1 : D E :,函数中的变量目标都称为AO
在当时的上下文中,用来寄存创立的变量和值得当地,每一个履行上下文中都会有一个自己变量目标,函数中履行上下文中的变量目标叫AO(Activation Object)活动目标

结语

实践JS在G j F z _浏览器中运转进程远远比这杂乱,自己表达能力有限,尽自己的能力) b J # 6把问题) # G = a P 8 r s简单化,便于通俗易懂,后续有时P Z z 5 U间会不断优化。

发表评论

提供最优质的资源集合

立即查看 了解详情