执行上下文

变量提升与函数提升

变量声明提升

  • 通过var定义(声明)的变量--在定义语句之前就可以访问到
  • 值为undefined
console.log(a);	//undefined
var a = 1;
//执行顺序
var a;
console.log(a);
a = 1;

函数声明提升

  • 通过function声明的函数--在之前就可以直接调用
  • 值为函数定义(对象)
fn();//可调用
function fn(){
    conse.log('哈哈');
}

执行上下文

代码分类--位置

全局代码

函数(局部)代码

全局执行上下文

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

    • 对全局数据进行预处理
    • var定义的全局变量-->undefined--添加为window的属性
    • function声明的全局函数-->赋值--添加为window的方法
    • this-->赋值window
    • 开始执行全局代码
    //全局执行上下文
    console.log(a1, window.a1);  //undefined undefined
    a2();   //a2();
    console.log(this);  //window
    var a1 = 3;
    function a2() {
        console.log('a2()');
    }
    console.log(a1);
    

函数执行上下文

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

    • 对局部数据进行预处理
    • 形参变量-->赋值(实参)--添加为执行上下文的属性
    • arguments-->赋值(实参列表)--添加为执行上下文的属性
    • var定义的局部变量-->underfined--添加为执行上下文的属性
    • this-->赋值(调用函数的对象)
    • 开始执行函数体代码
    //函数执行上下文
    function fn(a1) {
        console.log(a1);    //2
        console.log(a2);    //undefined
        a3();   //a3
        console.log(this);  //window
        console.log(arguments); //2,3
        var a2 = 4;
        function a3() {
            console.log('a3');
        }
    }
    fn(2, 3);
    

执行上下文栈

  • 在全局代码执行前--JS引擎会创建一个栈来存储管理所有的执行上下文对象
  • 在全局执行上下文(window)确定后--将其添加到栈中(压栈)
  • 在函数执行上下文创建后--将其添加到栈中(压栈)
  • 在当前函数执行完后--将栈顶的对象移除(出栈)
  • 当所有代码执行完成后--栈中只剩下window
<script>
    //执行全局上下文
	var a = 10;
	var bar = function (x) {
   		var b = 5;
    	foo(x + b); //进入foo执行上下文
	}
	var foo = function (y) {
    	var c = 5;
    	console.log(a + c + y);
	}
	bar(10);    //进入bar函数执行上下文
</script>

执行上下文

面试题

console.log('gb:' + i);
var i = 1;
foo(1);
function foo(i) {
    if (i == 4) {
        return;
    };
    console.log('fb:' + i);
    foo(i + 1);
    console.log('fe:' + i);
}
console.log('ge:' + i);

执行上下文

function a(){};
var a;
console.log(a); //f a(){}--变量先被提升--函数覆盖变量后提升
if(!(b in window)){
    var b = 1;
}
console.log(b); //undefined--变量先被提升为全局变量
var c = 1;
function c(c){
    var c = 3;
}
c(2);   //报错--变量先被提升--函数后被提升--变量最后被赋值--因此不是函数,不能被调用

原文链接:https://www.cnblogs.com/Liu-h/p/17337906.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:执行上下文 - Python技术站

(0)
上一篇 2023年4月22日
下一篇 2023年4月22日

相关文章

  • 详解JS中的立即执行函数

    详解JS中的立即执行函数 在JS中,立即执行函数(Immediately Invoked Function Expression,IIFE)是一种常见的函数调用方式。IIFE有许多不同的应用场景,例如定义模块、创建私有作用域等。本文将详细讲解IIFE的语法和使用场景,并提供两个示例说明。 语法 IIFE的基本语法如下: (function () { // 这…

    JavaScript 2023年5月28日
    00
  • 原生JS获取元素的位置与尺寸实现方法

    获取元素位置和尺寸信息是web开发中经常需要面对的问题。下面是一些原生JS获取元素位置和尺寸的方法。在示例中,我们将使用一个html文档和一个div元素作为示例。 获取元素位置 offsetTop和offsetLeft属性 在HTML文档中,每个元素都有offsetTop和offsetLeft属性,它们表示元素相对于其offsetParent(父元素)的顶部…

    JavaScript 2023年6月11日
    00
  • vue.js实现会动的简历(包含底部导航功能,编辑功能)

    下面是“vue.js实现会动的简历(包含底部导航功能,编辑功能)”的完整攻略: 1. 确定需求和技术栈 首先,我们需要明确实现的需求,包括会动简历、底部导航、编辑功能等。然后确定使用的技术栈为Vue.js,同时需要用到CSS动画和一些基础的HTML、CSS知识。 2. 设计简历样式和布局 在Vue.js中,可以使用组件来实现页面的设计和布局。因此,我们需要先…

    JavaScript 2023年6月11日
    00
  • 脚本分析、压缩、混淆工具 JSA新版本发布,压缩效率提高大约10%

    标题:脚本分析、压缩、混淆工具JSA新版本发布 JSA是一款用于脚本分析、压缩和混淆的工具。该工具的新版本发布,压缩效率提高了大约10%。下面详细讲解这款工具的使用攻略。 1. 下载和安装 首先,需要在官网下载JSA工具的可执行文件,根据操作系统的不同选择对应版本。将下载好的文件解压缩后,即可安装并打开该工具。 2. 分析脚本 在JSA工具中,可以使用jsa…

    JavaScript 2023年5月19日
    00
  • asp.net GridView的删除对话框的两种方法

    下面开始详细介绍“ASP.NET GridView的删除对话框的两种方法”。 方法一:使用自定义模态窗口 在GridView中完成删除操作时,我们需要弹出确认对话框来告知用户所选数据即将被删除。为此,我们可以使用自定义的模态窗口。 1. 创建一个新的Web窗体 在项目中添加一个新的Web窗体,为该窗体添加一个Div元素和两个按钮:一个用于绑定GridView…

    JavaScript 2023年6月10日
    00
  • HTML最新标准HTML5总结(必看)

    HTML最新标准HTML5总结(必看) 1. 什么是HTML5? HTML5标准是HTML的第五个版本,它引入了新的语义元素、表单控件、音视频标签、Canvas绘图、Geolocation地理位置、Web Storage、Web Worker等新特性,能够更好地应对现代Web应用的需求。 HTML5相对于早期的HTML版本来说,更加简单易学,语义化更强,可编…

    JavaScript 2023年5月28日
    00
  • Javascript获取当前日期的农历日期代码

    获取当前日期的农历日期是一个常见的操作,下面是使用JavaScript实现的简要攻略: 步骤一:引入相关的JavaScript库 为了实现农历日期的获取,需要使用一些现成的JavaScript库,比如:lunar-calendar-js。通过在HTML中引入这个库,可以在JavaScript中使用它提供的方法来进行日期的转换。 代码示例: <!DOCT…

    JavaScript 2023年5月27日
    00
  • window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法

    实现网页跳转一般有两种方式:使用链接元素(<a>)或通过JavaScript修改window.location属性。但有时候,这两种方式都可能失败,如当链接元素的href属性值是JavaScript时,点击该链接时,页面不会发生跳转。或是在使用JavaScript的window.location.href属性跳转的过程中,我们想要弹出提示框或者执…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部