web前端高级JavaScript - 函数的底层处理机制

最新推荐文章于 2023-07-19 21:22:05 发布

一笑程序猴

最新推荐文章于 2023-07-19 21:22:05 发布

阅读量5.5k

点赞数 1

分类专栏： WEB前端高级教程文章标签：作用域链函数底层处理机制私有上下文私有变量 AO

本文链接：https://blog.csdn.net/lixiaosenlin/article/details/109278964

版权

WEB前端高级教程专栏收录该内容

35 篇文章 6 订阅

订阅专栏

函数的底层处理机制

本节内容将涉及到如下几个知识点：执行上下文EC（Execution Context）、AO（Active Object）、作用域SCOPE和作用域链SCOPE-CHAIN

课程回顾

上一节中我们讲述了堆栈内存的处理机制。代码之所以能在浏览器中运行，是因为浏览器开辟了一块内存空间，我们把它叫做执行环境栈ECStack也叫栈内存，专门用来执行代码和存储基本数据类型。
还讲到了EC（G）全局执行上下文，VO（G）全局变量对象。
值类型存储在栈内存，引用类型存储在堆内存中
最后还留了一道思考题

var a = {n: 1};
var b = a;
a.x = a = {n: 2};
console.log(a.x);
console.log(b);

这道题涉及到一个新知识点：连续等号赋值。比如上述代码中的“ a.x = a = {n: 2}”。

在一般情况下（例如“var a = b = 10”），正常的计算都是从右向左进行处理（当然第一步还是先创建值），那么从右到左就是：b = 10, var a = b 或var a = 10。

但是也有特殊情况，例如“ a.x = b = 10或 b = a.x = 10”，这种情况无论是b在前还是b在后面，都要优先计算a.x=10,，因为它是成员访问，而成员访问的优先级比较高（成员访问的优先级是19，仅次于小括号，关于成员访问优先级的问题请参考MDN）

因此在我们的思考题中的a.x = a = {n: 2}可以转换为a,x = {n: 2}, a = {n: 2}。然后再按照我们昨天讲的思路去理解就不难得到正确答案了。

本题的正确答案是：undefined和{n: 1, x: {n: 2}}

一图解真相
在这里插入图片描述

函数的底层处理机制

在前面我们学习数据类型时，我们知道在引用类型中，除了对象之外还有函数（function）也属于引用类型，接下来就来看下，函数的底层处理机制是怎样的。还是以一个题开始：

var x = [10, 23];
function fn(y){
	y[0] =  100;
	y = [100];
	y[1] = 200
	console.log(y);
}
fn(x);
console.log(x)

首先还是先开辟一块栈内存（执行环境栈ECStack）来供代码执行
然后会形成一个全局上下文EC(G)，用来执行一些全局的代码，比如：这个题目中的，创建x变量、创建函数、调用函数和输出变量x的值。这些代码都会在全局上下文区域中执行。
跟前面所讲的不同的是，这道题中多了创建函数和执行函数的步骤
创建函数
创建函数也需要开辟一块堆内存，堆内存中存储的是函数的代码，而代码是以字符串的形式存储的，与对象不同，对象是以键值对的形式存储
函数在创建的时候就声明了它的作用域scope：值是当前创建函数时所处的上下文（函数在哪个作用域中创建的，它的作用域就是谁）针对本题它的作用域就是全局上下文
创建函数和创建一个变量类似：都是声明一个变量再存储值，函数名也算是变量

执行函数，传递实参x的值
在JS的上下文中，每个函数都会形成一个自己独立的私有上下文EC(FN1)
在函数的私有上下文中会产生一个AO（Active Object）私有变量对象，用来存储当前私有上下文中的变量，然后进栈执行
在代码执行前需要先初始化作用域链（SCOPE-CHAIN）。作用域链的特点：<当前自己的私有上下文，函数的作用域（创建函数时所处的上下文）>，作用域链的右侧是当前上下文的上级上下文。接下来继续初始化this、初始化arguentns、形参赋值、变量提升
代码执行（把之前创建函数在堆内存中存储的字符串转换成代码一行行执行）
执行完出栈释放

函数执行完输出私有变量y的值[100,200]
最后执行全局作用域中的console.log(x)，输出值[100, 23]