执行上下文

变量提升与函数提升

变量声明提升

  • 通过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动态插入脚本和引用外部链接脚本是 Web 开发中常用的技术,可以使页面具有动态性和互动性。下面是详细的攻略。 动态插入脚本的方法 动态插入脚本可用于在 Web 页面中动态地加载并执行 JavaScript 代码。一般来说,动态插入脚本的步骤如下: 创建 script 标签并设置其 type 属性为 text/javascript。 将 JavaScrip…

    JavaScript 2023年5月27日
    00
  • javascript电子书

    JavaScript电子书完整攻略 作为一名 web 开发人员,掌握 JavaScript 是必不可少的一项技能。而电子书的形式给我们提供了更加方便、高效的学习方式。本文将为你详细讲解,如何通过使用 JavaScript 电子书,来进行学习和巩固 JavaScript 技能。 什么是 JavaScript 电子书? JavaScript 电子书是一种使用 M…

    JavaScript 2023年5月18日
    00
  • javascript 获取所有id中包含某关键字的控件的实现代码

    获取所有id中包含某关键字的控件,可以使用JavaScript DOM中的document.querySelectorAll()方法。该方法可以选择所有匹配指定选择器的元素,并以NodeList对象返回它们。 实现步骤: 获取页面中所有元素的ID 遍历所有ID,如果该ID包含目标关键字,则将该元素存入结果数组中 返回结果数组 以下是实现代码示例1,假设我们要…

    JavaScript 2023年6月10日
    00
  • 悟透JavaScript整理版

    悟透JavaScript整理版攻略 什么是悟透JavaScript整理版? 悟透JavaScript整理版是一份面试必备的JavaScript知识点总结,全面覆盖JavaScript的核心概念、基础语法、面向对象编程、异步编程、浏览器API、正则表达式等知识点。 如何学习悟透JavaScript整理版? 第一步:了解JavaScript基础概念 什么是变量?…

    JavaScript 2023年5月18日
    00
  • js、jquery图片动画、动态切换示例代码

    下面是关于 “js、jquery图片动画、动态切换示例代码” 的详细攻略。 1. 简介 首先,图片动画是网页设计中非常重要的一部分,能够为网页提供更加生动、具有吸引力的效果。而 JavaScript 和 jQuery 是实现图片动画的最好选择。 2. 实现图片动画的具体代码 下面我们以两个示例代码的形式,帮助你快速学习如何使用 JavaScript 和 jQ…

    JavaScript 2023年6月10日
    00
  • javascript设计模式之Adapter模式【适配器模式】实现方法示例

    下面我会详细讲解“Javascript设计模式之Adapter模式【适配器模式】实现方法示例”的完整攻略,包括如何使用适配器模式以及示例的具体实现。 什么是适配器模式? 适配器模式是一种行为型设计模式,用于将一个类的接口转换成另一个客户端所期望的接口。通俗来讲,就是使得一个类能够应对多种不同的接口。 适配器模式的应用场景 在实际的编程中,适配器模式的应用场景…

    JavaScript 2023年6月10日
    00
  • JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别

    JavaScript使用forEach()与jQuery使用each遍历数组时return false的区别,可以从以下几个方面进行说明: 区别一:遍历方式 JavaScript使用forEach()进行遍历时,是通过回调函数的方式进行遍历的,其中回调函数支持传递3个参数,分别表示当前元素、当前元素索引、当前元素所在的数组。 例如,下面的代码中,使用forE…

    JavaScript 2023年5月27日
    00
  • js只执行1次的函数示例

    当我们在编写JavaScript代码的时候,有时候我们需要保证某个函数只被执行一次。下面我会详细介绍两种方法来实现这个功能。 方法一:自执行函数 自执行函数(IIFE,立即执行函数表达式)是函数式编程中的一种技术,它可以让我们在声明函数时立即调用它一次,保证函数只被执行一次,并且函数内部的变量不会污染全局作用域。 以下是一个例子: (function() {…

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