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

简介: 本文介绍了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数据双向绑定原理

目录
相关文章
|
存储 前端开发 安全
前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
本文全面解析前端三种数据存储方式:Cookie、LocalStorage与SessionStorage。涵盖其定义、使用方法、生命周期、优缺点及典型应用场景,帮助开发者根据登录状态、用户偏好、会话控制等需求,选择合适的存储方案,提升Web应用的性能与安全性。(238字)
565 0
|
6月前
|
Web App开发 前端开发 JavaScript
前端性能优化利器:图片懒加载实战解析
前端性能优化利器:图片懒加载实战解析
|
5月前
|
人工智能 JSON 前端开发
如何解决后端Agent和前端UI之间的交互问题?——解析AG-UI协议的神奇作用
三桥君指出AG-UI协议通过SSE技术实现智能体与前端UI的标准化交互,解决流式传输、实时进度显示、数据同步等开发痛点。其核心功能包括结构化事件流、多Agent任务交接和用户中断处理,具有"一次开发到处兼容"、"UI灵活可扩展"等优势。智能体专家三桥君认为协议将AI应用从聊天工具升级为实用软件,适用于代码生成、多步骤工作流等场景,显著提升开发效率和用户体验。
1211 0
|
7月前
|
存储 前端开发 JavaScript
|
8月前
|
存储 前端开发 JavaScript
调用DeepSeek API增强版纯前端实现方案,支持文件上传和内容解析功能
本方案基于DeepSeek API增强版,提供纯前端实现的文件上传与内容解析功能。通过HTML和JavaScript,用户可选择文件并调用API完成上传及解析操作。方案支持多种文件格式(如PDF、TXT、DOCX),具备简化架构、提高响应速度和增强安全性等优势。示例代码展示了文件上传、内容解析及结果展示的完整流程,适合快速构建高效Web应用。开发者可根据需求扩展功能,满足多样化场景要求。
2649 64
|
SQL 数据挖掘 测试技术
南大通用GBase8s数据库:LISTAGG函数的解析
南大通用GBase8s数据库:LISTAGG函数的解析
|
6月前
|
JSON 前端开发 安全
前端开发中常用的鉴权方式解析与实践要点
本文深入探讨了前端开发中常用的鉴权方式,包括HTTP基本鉴权、Session-Cookie鉴权、Token验证、JWT(JSON Web Tokens)、单点登录(SSO)和OAuth等。文章首先明确了认证、授权、鉴权和权限控制的概念及关系,随后详细解析每种鉴权方式的工作原理、优缺点及适用场景。例如,HTTP基本鉴权简单但安全性低,适合内部网络;Session-Cookie鉴权易受CSRF攻击,适用于同域Web应用;Token和JWT无状态且扩展性好,适合分布式系统;SSO提升用户体验,适用于多系统统一登录;OAuth安全方便,适合第三方授权接入。
487 2
|
12月前
|
数据采集 JSON API
如何利用Python爬虫淘宝商品详情高级版(item_get_pro)API接口及返回值解析说明
本文介绍了如何利用Python爬虫技术调用淘宝商品详情高级版API接口(item_get_pro),获取商品的详细信息,包括标题、价格、销量等。文章涵盖了环境准备、API权限申请、请求构建和返回值解析等内容,强调了数据获取的合规性和安全性。
|
C语言 开发者
【C语言】断言函数 -《深入解析C语言调试利器 !》
断言(assert)是一种调试工具,用于在程序运行时检查某些条件是否成立。如果条件不成立,断言会触发错误,并通常会终止程序的执行。断言有助于在开发和测试阶段捕捉逻辑错误。
307 5
|
机器学习/深度学习 自然语言处理 语音技术
揭秘深度学习中的注意力机制:兼容性函数的深度解析
揭秘深度学习中的注意力机制:兼容性函数的深度解析

推荐镜像

更多
  • DNS