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

迷南。 2022-12-18 05:55 112阅读 0赞

## 函数的底层处理机制 ##

> 本节内容将涉及到如下几个知识点：执行上下文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\}\}

*一图解真相*  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70_pic_center]

#### 函数的底层处理机制 ####

> 在前面我们学习数据类型时，我们知道在引用类型中，除了对象之外还有函数（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的值。这些代码都会在全局上下文区域中执行。
>  *  跟前面所讲的不同的是，这道题中多了创建函数和执行函数的步骤
>  *  创建函数
>     
>     1.  创建函数也需要开辟一块堆内存，堆内存中存储的是函数的代码，而代码是以字符串的形式存储的，与对象不同，对象是以键值对的形式存储
>     2.  函数在创建的时候就声明了它的作用域scope：值是当前创建函数时所处的上下文（函数在哪个作用域中创建的，它的作用域就是谁）针对本题它的作用域就是全局上下文
>     3.  创建函数和创建一个变量类似：都是声明一个变量再存储值，函数名也算是变量
>  *  执行函数，传递实参x的值
>     
>     1.  在JS的上下文中，每个函数都会形成一个自己独立的私有上下文EC(FN1)
>     2.  在函数的私有上下文中会产生一个AO（Active Object）私有变量对象，用来存储当前私有上下文中的变量，然后进栈执行
>     3.  在代码执行前需要先初始化作用域链（SCOPE-CHAIN）。作用域链的特点：<当前自己的私有上下文，函数的作用域（创建函数时所处的上下文）>，作用域链的右侧是当前上下文的上级上下文。接下来继续初始化this、初始化arguentns、形参赋值、变量提升
>     4.  代码执行（把之前创建函数在堆内存中存储的字符串转换成代码一行行执行）
>     5.  执行完出栈释放
>  *  函数执行完输出私有变量y的值\[100,200\]
>  *  最后执行全局作用域中的console.log(x)，输出值\[100, 23\]

*一图解真相*  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70_pic_center 1]

#### 作用域链的查找机制 ####

> 私有上下文代码执行，如果遇到一个变量，首先看是否是自己的私有变量，如果是私有的，则操作自己，和外界没有直接关系；如果不是自己私有的则基于作用域链向其上级上下文中查找，看是否是上级上下文的私有变量，如果还不是则继续向上查找，直到全局上下文为止，我们把这种查找过程称为作用域链查找机制。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/662b887a00dc40baa54f83f0eb9f3a0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeGlhb3Nlbmxpbg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221122/525ca5756a854a7d899a97bffb9127f9.png