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>

目录
相关文章
|
9天前
|
存储 前端开发 JavaScript
JavaScript垃圾回收机制深度解析
【10月更文挑战第21】JavaScript垃圾回收机制深度解析
91 59
|
1天前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
8天前
|
JavaScript 前端开发
javascript的作用域
【10月更文挑战第19天javascript的作用域
|
5天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
70 4
|
7天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
45 6
|
3天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
14 1
|
1天前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
8 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
85 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
109 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
78 4

热门文章

最新文章

推荐镜像

更多