JavaScript——作用域和预解析,深度理解代码执行程序

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: JavaScript——作用域和预解析,深度理解代码执行程序

1.作用域


1.概念

通常来说一段程序代码中所用到的名字并不总是有效和可用的 ,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。


全局作用域:全局作用域:整 个script标签或者是一个单独的js文件


局部作用域(函数作用域):局部作用域在函数内部就是局部作用域这个代码的名字只在函数内部起效果和作用


2.变量的作用域

(1)全局变量:在全局下都可以使用


(2)局部变量:在函数内部的变量就是局部变量,作用于函数内



(3)区别


●全局变量:在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存


●局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被 销毁,因此更节省内存空间


<script>
    var i = 10;//全局变量作用域
    function age(arr){//函数的形参也可以看做是局部变量
        var j = 20;//局部变量作用域
        a = 10;//变量不声明默认是全局变量
    }
    // 从执行效率来看
    // 全局变量,只有浏览器关闭的时候才会销毁,比较占内存资源
    // 局部变量,当我们程序执行完毕就会销毁,比较节约内存资源
// 在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量)
// ●局部变量只能在该函数内部使用
// ●在函数内部var声明的变量是局部变量
// ●函数的形参实际上就是局部变量
    </script>


2.作用域链


概念:根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据被内部函数访问,就称作作用域链


1.预解析

JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript 解析器在运行JavaScript代码的时候分为两步:预解析和代码执行。 预解析js引擎会把js里面所有的var还有 function 提升到当前作用域的最前面预解析又分为变量提升和函数提升


1.变量提升

变量提升就是把所有的变量声明提升到当前的作用域最前面,不提升赋值操作


结合下面的代码将会更清晰




2.函数提升

函数提升就是把所有的函数声明提升到当前作用域的最前面,不调用函数



3.代码执行


按顺序依次执行代码


2.练习

注:若要验证请先把前面的代码注释掉


<script>
// 常见面试题"预解析后的代码是什么样的?"
    f1();
    console.log(c);
    console.log(b);
    console.log(a);
    function f1(){
        var a = b = c = 9;
        console.log(a);
        console.log(b);
        console.log(c);
    }
    //以下是预解析后的代码
    // (1)先把函数提升
        function f1(){//(2)再把函数内部声明的变量提升。
        var a ;
        // 注:var a = b = c = 9;也就是等同于var a = 9,b = 9,c = 9,所以只提升var = a
        a = b = c = 9;//所以a = 9,b = 9,c = 9就是全局变量了
        console.log(a);//结果为9
        console.log(b);//结果为9
        console.log(c);//结果为9
    }//(3)最后按顺序执行代码
    f1();
    console.log(c);//结果为9
    console.log(b);//结果为9
    console.log(a);//遵循就近原则,这句的a调用的是var a;因为a没有被定义过,所以结果为报错。
    </script>

目录
相关文章
|
6天前
|
搜索推荐 UED Python
实现一个带有昼夜背景切换的动态时钟:从代码到功能解析
本文介绍了一个使用Python和Tkinter库实现的动态时钟程序,具有昼夜背景切换、指针颜色随机变化及整点和半点报时功能。通过设置不同的背景颜色和随机变换指针颜色,增强视觉吸引力;利用多线程技术确保音频播放不影响主程序运行。该程序结合了Tkinter、Pygame、Pytz等库,提供了一个美观且实用的时间显示工具。欢迎点赞、关注、转发、收藏!
123 94
|
1天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
6天前
|
SQL Java 数据库连接
如何在 Java 代码中使用 JSqlParser 解析复杂的 SQL 语句?
大家好,我是 V 哥。JSqlParser 是一个用于解析 SQL 语句的 Java 库,可将 SQL 解析为 Java 对象树,支持多种 SQL 类型(如 `SELECT`、`INSERT` 等)。它适用于 SQL 分析、修改、生成和验证等场景。通过 Maven 或 Gradle 安装后,可以方便地在 Java 代码中使用。
94 11
|
2天前
|
人工智能 JavaScript 前端开发
一段 JavaScript 代码,集成网站AI语音助手
根据本教程,只需通过白屏化的界面操作,即可快速构建一个专属的AI智能体。
|
28天前
|
自然语言处理 搜索推荐 数据安全/隐私保护
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
鸿蒙登录页面设计展示了 HarmonyOS 5.0(Next)的未来美学理念,结合科技与艺术,为用户带来视觉盛宴。该页面使用 ArkTS 开发,支持个性化定制和无缝智能设备连接。代码解析涵盖了声明式 UI、状态管理、事件处理及路由导航等关键概念,帮助开发者快速上手 HarmonyOS 应用开发。通过这段代码,开发者可以了解如何构建交互式界面并实现跨设备协同工作,推动智能生态的发展。
144 10
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
|
1月前
|
JavaScript 前端开发 测试技术
在 golang 中执行 javascript 代码的方案详解
本文介绍了在 Golang 中执行 JavaScript 代码的四种方法:使用 `otto` 和 `goja` 嵌入式 JavaScript 引擎、通过 `os/exec` 调用 Node.js 外部进程以及使用 WebView 嵌入浏览器。每种方法都有其适用场景,如嵌入简单脚本、运行复杂 Node.js 脚本或在桌面应用中显示 Web 内容。
103 15
在 golang 中执行 javascript 代码的方案详解
|
1月前
|
PHP 开发者 容器
PHP命名空间深度解析:避免命名冲突与提升代码组织####
本文深入探讨了PHP中命名空间的概念、用途及最佳实践,揭示其在解决全局命名冲突、提高代码可维护性方面的重要性。通过生动实例和详尽分析,本文将帮助开发者有效利用命名空间来优化大型项目结构,确保代码的清晰与高效。 ####
34 1
|
2月前
|
机器学习/深度学习 存储 人工智能
强化学习与深度强化学习:深入解析与代码实现
本书《强化学习与深度强化学习:深入解析与代码实现》系统地介绍了强化学习的基本概念、经典算法及其在深度学习框架下的应用。从强化学习的基础理论出发,逐步深入到Q学习、SARSA等经典算法,再到DQN、Actor-Critic等深度强化学习方法,结合Python代码示例,帮助读者理解并实践这些先进的算法。书中还探讨了强化学习在无人驾驶、游戏AI等领域的应用及面临的挑战,为读者提供了丰富的理论知识和实战经验。
82 5
|
2月前
|
JSON JavaScript 关系型数据库
node.js连接GBase 8a 数据库 并进行查询代码示例
node.js连接GBase 8a 数据库 并进行查询代码示例

热门文章

最新文章

推荐镜像

更多