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

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: 本文介绍了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数据双向绑定原理

目录
相关文章
|
1天前
|
存储 前端开发 JavaScript
前端基础(十一)_函数声明及调用、函数的形参与实参、arguments参数、函数的参数类型、函数中的问题
本文介绍了JavaScript中函数的声明及调用、形参与实参的概念、arguments对象的使用、函数参数的类型以及函数中this的作用。通过示例代码详细解释了函数如何接收参数、如何处理参数个数不匹配的情况,以及函数在不同上下文中this的指向。
5 1
|
23天前
|
JavaScript 前端开发
前端JS函数
【9月更文挑战第4天】前端JS函数
23 6
|
1天前
|
设计模式 存储 算法
PHP中的设计模式:策略模式的深入解析与应用在软件开发的浩瀚海洋中,PHP以其独特的魅力和强大的功能吸引了无数开发者。作为一门历史悠久且广泛应用的编程语言,PHP不仅拥有丰富的内置函数和扩展库,还支持面向对象编程(OOP),为开发者提供了灵活而强大的工具集。在PHP的众多特性中,设计模式的应用尤为引人注目,它们如同精雕细琢的宝石,镶嵌在代码的肌理之中,让程序更加优雅、高效且易于维护。今天,我们就来深入探讨PHP中使用频率颇高的一种设计模式——策略模式。
本文旨在深入探讨PHP中的策略模式,从定义到实现,再到应用场景,全面剖析其在PHP编程中的应用价值。策略模式作为一种行为型设计模式,允许在运行时根据不同情况选择不同的算法或行为,极大地提高了代码的灵活性和可维护性。通过实例分析,本文将展示如何在PHP项目中有效利用策略模式来解决实际问题,并提升代码质量。
|
26天前
|
开发者 图形学 C#
深度解密:Unity游戏开发中的动画艺术——Mecanim状态机如何让游戏角色栩栩如生:从基础设置到高级状态切换的全面指南,助你打造流畅自然的游戏动画体验
【8月更文挑战第31天】Unity动画系统是游戏开发的关键部分,尤其适用于复杂角色动画。本文通过具体案例讲解Mecanim动画状态机的使用方法及原理。我们创建一个游戏角色并设计行走、奔跑和攻击动画,详细介绍动画状态机设置及脚本控制。首先导入动画资源并添加Animator组件,然后创建Animator Controller并设置状态间的转换条件。通过编写C#脚本(如PlayerMovement)控制动画状态切换,实现基于玩家输入的动画过渡。此方法不仅适用于游戏角色,还可用于任何需动态动画响应的对象,增强游戏的真实感与互动性。
56 0
|
26天前
|
SQL 数据处理 数据库
|
28天前
|
监控 网络协议 Java
Tomcat源码解析】整体架构组成及核心组件
Tomcat,原名Catalina,是一款优雅轻盈的Web服务器,自4.x版本起扩展了JSP、EL等功能,超越了单纯的Servlet容器范畴。Servlet是Sun公司为Java编程Web应用制定的规范,Tomcat作为Servlet容器,负责构建Request与Response对象,并执行业务逻辑。
Tomcat源码解析】整体架构组成及核心组件
|
1月前
|
存储 NoSQL Redis
redis 6源码解析之 object
redis 6源码解析之 object
55 6
|
13天前
|
存储 缓存 Java
什么是线程池?从底层源码入手,深度解析线程池的工作原理
本文从底层源码入手,深度解析ThreadPoolExecutor底层源码,包括其核心字段、内部类和重要方法,另外对Executors工具类下的四种自带线程池源码进行解释。 阅读本文后,可以对线程池的工作原理、七大参数、生命周期、拒绝策略等内容拥有更深入的认识。
什么是线程池?从底层源码入手,深度解析线程池的工作原理
|
17天前
|
开发工具
Flutter-AnimatedWidget组件源码解析
Flutter-AnimatedWidget组件源码解析
|
13天前
|
设计模式 Java 关系型数据库
【Java笔记+踩坑汇总】Java基础+JavaWeb+SSM+SpringBoot+SpringCloud+瑞吉外卖/谷粒商城/学成在线+设计模式+面试题汇总+性能调优/架构设计+源码解析
本文是“Java学习路线”专栏的导航文章,目标是为Java初学者和初中高级工程师提供一套完整的Java学习路线。
155 37

推荐镜像

更多