• 函数和执行上下文


    一.变量提升与函数提升

    变量提升:通过var关键字定义(声明)的变量,在定义语句之前就可以访问到,只不过其值是undefined

    函数提升:通过function声明的函数,在之前就可以调用,值是函数对象

    1. var a=3
    2. function fn(){
    3. console.log(a);
    4. var a=4;
    5. };
    6. fn();//undefined;
    7. //使用var关键字变量提升了
    8. //相当于 function fn(){
    9. var a;
    10. console.log(a);
    11. a=4;
    12. };
    13. //在函数作用域本身含有a,则不会去全局作用域查找
    1. //变量提升
    2. console.log(b);//undefined
    3. var b=3;
    4. //函数提升
    5. fun2();//可调用
    6. function fun2(){
    7. console.log("fun2()");
    8. };
    1. fn3();//不能,这里使用了var关键字,所以重点是变量提升,而不是函数提升
    2. var fn3=function(){
    3. console.log(3);
    4. };

    函数提升必须使用函数生命的方式

    二.执行上下文

    1.代码分类

    全局代码、函数(局部代码)

    2.全局执行上下文

    (1)在执行全局代码前将window确定为全局执行上下文

    (2)对全局数据进行预处理

    • var定义的全局变量==>undefined,添加为window的属性
    • function声明的全局函数==>赋值(fun),添加为window的方法
    • this==>赋值window

    (3)开始执行全局代码

    3.函数执行上下文

    (1)在调用函数,准备执行函数体之前,创建对应的函数执行上下文对象(虚拟的,存于栈中)

    (2)对局部数据进行预处理

    • 形参变量==>赋值(实参)==>添加为执行上下文的属性
    • arguments==>赋值(实参列表),添加为执行上下文的属性
    • var定义的局部变量==>undefined,添加为执行上下文的属性
    • function声明的函数==>赋值(fun),添加为执行上下文的方法
    • this==>赋值(调用函数的对象)

    (3)开始执行函数体代码

    4.流程分析

    (1)在全局代码执行前,JS引擎就会创建一个栈来存储管理所有的执行上下文对象

    (2)在全局执行上下文(window)确定后,将其添加到栈中(压栈)

    (3)在函数执行上下文创建后,将其添加到栈中(压栈)

    (4)在当前函数执行完后,将栈顶的对象移栈(出栈)

    (5)当所有的代码执行完后,栈中只剩下window

    tip:::

    执行栈,也就是在其他编程语言中所说的“调用栈”,是一种拥有LIFO(后进先出)数据结构的栈,被用来存储代码运行时创建的所有执行上下文

    引擎会执行那些执行上下文位于栈顶的函数。当该函数执行结束时,执行上下文从栈中弹出,控制流程到达当前栈中的一个上下文

    1. let a = 'Hello World!';
    2. function first() {
    3. console.log('Inside first function');
    4. second();
    5. console.log('Again inside first function');
    6. }
    7. function second() {
    8. console.log('Inside second function');
    9. }
    10. first();
    11. console.log('Inside Global Execution Context');

    三.作用域

    1.分类:

    全局作用域、函数作用域、没有块作用域(ES6有了)

    2.作用:隔离变量,不同作用域下同名变量不会有冲突

  • 相关阅读:
    森林野火故事2.0:一眼看穿!使用 Panel 和 hvPlot 可视化 ⛵
    PHP 安装64位oracle客户端
    Java中常见锁的分类及概念分析
    Ajax&Axios 服务器渲染&异步的基本使用
    一天吃透MySQL面试八股文
    【Python】 使用Apache Tika和Python实现zip、csv、xls等多格式文件文本内容提取
    R语言利用openxlsx包输出EXCEL报告
    WEB安全 HTML基础
    webpack(四)plugin
    C++ Reference: Standard C++ Library reference: C Library: cwchar: mbsinit
  • 原文地址:https://blog.csdn.net/m0_61478092/article/details/133971769