前端基础(十二)_函数高级、全局变量和局部变量、 预解析(变量提升)、函数返回值

简介: 本文介绍了JavaScript中作用域的概念,包括全局变量和局部变量的区别,预解析机制(变量提升),以及函数返回值的使用和类型。通过具体示例讲解了变量的作用域、函数的返回值、以及如何通过return关键字从函数中返回数据。

作用域

作用域指:变量或函数的有效使用范围,有全局作用域与局部作用域两种。

全局变量和局部变量

全局变量:直接在 script 标签下声明的变量,任何地方都能访问,任何地方都能对其值进行改变。
局部变量:函数内部定义的变量,函数内能访问,出了函数的括号就不能访问(垃圾回收)。

例1:全局变量或函数能在任何地方访问和修改

var a = 10; // 全局 在任何地方被访问且修改
function fun1() {
   
    a++;
console.log(a); //11
}
function fun2() {
   
    a++; //12
    a--; //11
    console.log(a); //11
}
fun1();
fun2();
console.log(a);//11

在这里插入图片描述
例2:局部变量或函数只能在函数内部访问

sum();
function sum() {
   
    var a = 10; // 定义一个局部变量
    console.log(a);
    function s() {
   
        console.log(“A”+a);
    }
s();
}
console.log(a); //a 是局部变量,出了函数,就会被销毁(垃圾回收)
s();//s is not defined

注意:不是{}中声明的就是局部变量,只有在函数中声明的是局部变量。

预解析(变量提升)

浏览器在解析js代码的时候,会进行一个预解析的操作,会有一个js解析器(假设有的名字),里面会执行其中的两步(不单单就这两步):
1、找一些东西(var function 参数)
2、逐步执行代码
找var的时候,如果存在var关键字,则会将这个变量先存储下来,存储的形式为:var a,预解析的时候变量中存的都是 undefined,等到逐行解析遇到表达式即 + - * / % ++ – = 等操作才会改变变量的值。
找 function 的时候,会将整个函数都保存下来。
找参数的时候,即执行函数时,函数内部可以看作是一个小的区域,有自己的预解析,参数就跟变量 var 一样。
例1:var

console.log(a); //undefined    
var a = 10; //a = 10
console.log(a);//10

上面代码中,先找 var,存储 a 的值为 undefined,所以第一次打印的结果为undefined,然后执行 a=10。
例2:function

console.log(fun1);
function fun1() {
   
    alert(“fun1”);
    // 我是一个注释
}
console.log(fun1);

上面代码中,函数会整个存储下来,包括注释。
例3:函数内部会进行一个跟外部一样的预解析

var a = 10;
console.log(a); //10
function fun2() {
   
    alert(a); //undefined
    var a = 20;
    alert(a); //20
}
fun2();

函数返回值

函数是用来实现某个特定功能,如计算某个范围内的累加,操作完成之后,在函数外部可能需要使用计算好的这个值,但是在函数内部定义的变量外面访问不了,针对这个情况,函数通过返回值将计算好的数据传出函数,在外部使用。在函数中将某个值返回到函数外,使用 return 关键字。

注意:
1、函数通过关键字return 返回函数中的内容
2、return 一次只能返回一个值
3、函数中只要遇到return,函数就会结束
4、函数没有返回值,默认结果为undefined

例1:计算 1-100 之间的累加和,将结果返回

function fun3(num) {
   
    var sum = 0;
    for (var i = 1; i <= num;i++){
   
        sum += i;
    }
    return sum; //return 关键字,将 sum 的值传出去
}
// 如果函数存在返回值,可以在调用函数的同时得到函数的返回值
console.log(fun3(100));//5050
var sum = fun3(100);
console.log(sum); //5050

在这里插入图片描述

函数返回值类型

和函数的参数一样,函数的返回值也可以是 js 数据类型中的任何一个。
例1:function 做为返回值

function fun1() {
   
    return function () {
   
        alert(“返回了一个函数”);
    }
}
var f = fun1(); // 接收返回的函数
f(); // 调用返回的函数
fun1()(); // 直接调用

以前写的文章 :
1、浏览器预解析之变量提升奥秘
2、this指向-作用域、作用域链-预解析 变量提升-Vue组件传值 父子 子父 非父子-Vue数据双向绑定原理

目录
相关文章
|
8月前
|
存储 前端开发 JavaScript
调用DeepSeek API增强版纯前端实现方案,支持文件上传和内容解析功能
本方案基于DeepSeek API增强版,提供纯前端实现的文件上传与内容解析功能。通过HTML和JavaScript,用户可选择文件并调用API完成上传及解析操作。方案支持多种文件格式(如PDF、TXT、DOCX),具备简化架构、提高响应速度和增强安全性等优势。示例代码展示了文件上传、内容解析及结果展示的完整流程,适合快速构建高效Web应用。开发者可根据需求扩展功能,满足多样化场景要求。
2773 64
|
SQL 数据挖掘 测试技术
南大通用GBase8s数据库:LISTAGG函数的解析
南大通用GBase8s数据库:LISTAGG函数的解析
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
C语言 开发者
【C语言】断言函数 -《深入解析C语言调试利器 !》
断言(assert)是一种调试工具,用于在程序运行时检查某些条件是否成立。如果条件不成立,断言会触发错误,并通常会终止程序的执行。断言有助于在开发和测试阶段捕捉逻辑错误。
338 5
|
机器学习/深度学习 自然语言处理 语音技术
揭秘深度学习中的注意力机制:兼容性函数的深度解析
揭秘深度学习中的注意力机制:兼容性函数的深度解析
|
机器学习/深度学习 编解码 前端开发
探索无界:前端开发中的响应式设计深度解析####
【10月更文挑战第29天】 在当今数字化时代,用户体验的优化已成为网站与应用成功的关键。本文旨在深入探讨响应式设计的核心理念、技术实现及最佳实践,揭示其如何颠覆传统布局限制,实现跨设备无缝对接,从而提升用户满意度和访问量。通过剖析响应式设计的精髓,我们将一同见证其在现代Web开发中的重要地位与未来趋势。 ####
261 7
|
编解码 前端开发 UED
探索无界:前端开发中的响应式设计深度解析与实践####
【10月更文挑战第29天】 本文深入探讨了响应式设计的核心理念,即通过灵活的布局、媒体查询及弹性图片等技术手段,使网站能够在不同设备上提供一致且优质的用户体验。不同于传统摘要概述,本文将以一次具体项目实践为引,逐步剖析响应式设计的关键技术点,分享实战经验与避坑指南,旨在为前端开发者提供一套实用的响应式设计方法论。 ####
317 4
|
缓存 前端开发 JavaScript
前端的全栈之路Meteor篇(二):容器化开发环境下的meteor工程架构解析
本文详细介绍了使用Docker创建Meteor项目的准备工作与步骤,解析了容器化Meteor项目的目录结构,包括工程准备、环境配置、容器启动及项目架构分析。提供了最佳实践建议,适合初学者参考学习。项目代码已托管至GitCode,方便读者实践与交流。
241 5
|
人工智能 资源调度 数据可视化
【AI应用落地实战】智能文档处理本地部署——可视化文档解析前端TextIn ParseX实践
2024长沙·中国1024程序员节以“智能应用新生态”为主题,吸引了众多技术大咖。合合信息展示了“智能文档处理百宝箱”的三大工具:可视化文档解析前端TextIn ParseX、向量化acge-embedding模型和文档解析测评工具markdown_tester,助力智能文档处理与知识管理。
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
269 1

热门文章

最新文章

推荐镜像

更多
  • DNS