JavaScript 基础学习笔记(五):函数、作用域、匿名函数

news2025/2/27 17:08:03

目录

一、函数

1.1 声明和调用

1.2 形参和实参

1.3 返回值

二、作用域

2.1 全局作用域

2.2 局部作用域

三、匿名函数

3.1 函数表达式

3.2 立即执行函数


一、函数

理解函数的封装特性,掌握函数的语法规则

1.1 声明和调用

函数可以把具有相同或相似逻辑的代码“包裹”起来,通过函数调用执行这些被“包裹”的代码逻辑,这么做的优势是有利于精简代码方便复用。

声明(定义)一个完整函数包括关键字、函数名、形式参数、函数体、返回值5个部分

调用

声明(定义)的函数必须调用才会真正被执行,使用 () 调用函数。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和调用</title>
</head>
<body>
  <script>
    // 声明(定义)了最简单的函数,既没有形式参数,也没有返回值
    function sayHi() {
      console.log('嗨~')
    }
    // 函数调用,这些函数体内的代码逻辑会被执行
    // 函数名()
        
    sayHi()
    // 可以重复被调用,多少次都可以
    sayHi()
  </script>
</body>
</html>

参数

通过向函数传递参数,可以让函数更加灵活多变,参数可以理解成是一个变量。

声明(定义)一个功能为打招呼的函数

  • 传入数据列表

  • 声明这个函数需要传入几个数据

  • 多个数据用逗号隔开

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 函数参数</title>
</head>
<body>

  <script>
    // 声明(定义)一个功能为打招呼的函数
    // function sayHi() {
    //   console.log('嗨~')
    // }
    // 调用函数
    // sayHi()
	

    // 这个函数似乎没有什么价值,除非能够向不同的人打招呼
    // 这就需要借助参数来实现了
    function sayHi(name) {
      // 参数 name 可以被理解成是一个变量
      console.log(name)
      console.log('嗨~' + name)
    }

    // 调用 sayHi 函数,括号中多了 '小明'
    // 这时相当于为参数 name 赋值了
    sayHi('小明')// 结果为 小明

    // 再次调用 sayHi 函数,括号中多了 '小红'
    // 这时相当于为参数 name 赋值了
    sayHi('小红') // 结果为 小红
  </script>
</body>
</html>

总结:

  1. 声明(定义)函数时的形参没有数量限制,当有多个形参时使用 , 分隔

  2. 调用函数传递的实参要与形参的顺序一致

1.2 形参和实参

形参:声明函数时写在函数名右边小括号里的叫形参(形式上的参数)

实参:调用函数时写在函数名右边小括号里的叫实参(实际上的参数)

形参可以理解为是在这个函数内声明的变量(比如 num1 = 10)实参可以理解为是给这个变量赋值

开发中尽量保持形参和实参个数一致

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 函数参数</title>
</head>
<body>
  <script>
    // 声明(定义)一个计算任意两数字和的函数
    // 形参 x 和 y 分别表示任意两个数字,它们是两个变量
    function count(x, y) {
      console.log(x + y);
    }
    // 调用函数,传入两个具体的数字做为实参
    // 此时 10 赋值给了形参 x
    // 此时 5  赋值给了形参 y
    count(10, 5); // 结果为 15
  </script>
</body>
</html>

1.3 返回值

函数的本质是封装(包裹),函数体内的逻辑执行完毕后,函数外部如何获得函数内部的执行结果呢?要想获得函数内部逻辑的执行结果,需要通过 return 这个关键字,将内部执行结果传递到函数外部,这个被传递到外部的结果就是返回值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 函数返回值</title>
</head>
<body>

  <script>
    // 定义求和函数
    function count(a, b) {
      let s = a + b
      // s 即为 a + b 的结果
      // 通过 return 将 s 传递到外部
      return s
    }

    // 调用函数,如果一个函数有返回值
    // 那么可将这个返回值赋值给外部的任意变量
    let total = count(5, 12)
  </script>
</body>
</html>

总结:

  1. 在函数体中使用return 关键字能将内部的执行结果交给函数外部使用

  2. 函数内部只能出现1 次 return,并且 return 下一行代码不会再被执行,所以return 后面的数据不要换行写

  3. return会立即结束当前函数

  4. 函数可以没有return,这种情况默认返回值为 undefined

二、作用域

通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。

作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。

2.1 全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件

处于全局作用域内的变量,称为全局变量

2.2 局部作用域

作用于函数内的代码环境,就是局部作用域。 因为跟函数有关系,所以也称为函数作用域。

处于局部作用域内的变量称为局部变量

如果函数内部,变量没有声明,直接赋值,也当全局变量看,但是强烈不推荐

但是有一种情况,函数内部的形参可以看做是局部变量。

三、匿名函数

函数可以分为具名函数和匿名函数

匿名函数:没有名字的函数,无法直接使用。

3.1 函数表达式

// 声明
let fn = function() { 
   console.log('函数表达式')
}
// 调用
fn()

3.2 立即执行函数

(function(){ xxx  })();
(function(){xxxx}());

无需调用,立即执行,其实本质已经调用了

多个立即执行函数之间用分号隔开

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1477218.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

女性力量崛起,三八妇女节5大品牌创意案例!

随着女性意识的觉醒&#xff0c;越来越多的女性正在看见、勇敢表达自己&#xff0c;并努力提升自己、且坚定地爱自己&#xff01; 从近些年的三八妇女节主题活动中&#xff0c;我们能看到越来越多的品牌都在策划品牌、产品活动时&#xff0c;越来越注重聚焦女性成长、性别议题…

Shopify如何调取开放接口实现页面更新

Shopify提供了开放接口&#xff08;API&#xff09;&#xff0c;使开发人员能够通过编程方式与Shopify平台进行交互&#xff0c;并实现页面的更新。通过调用API&#xff0c;您可以获取和更新商店的数据&#xff0c;包括产品、订单、顾客信息等。下面是使用Shopify开放接口实现页…

【GB28181】wvp-GB28181-pro修改分屏监控为16画面(前端)

引言 作为一个非前端开发人员,自己摸索起来比较费劲,也浪费了很多时间 由于实际开发中,可能预览的画面多于8个,而wvp目前只支持8画面 本文快速帮助开发者修改分屏监控为多画面。例如16画面,20画面等 文章目录 一、 预期效果展示16分割画面20分割画面二、 源码修改-前端修改…

CV论文--2024.2.28

source:CV论文--2024.2.28 1、StreamDiffusion: A Pipeline-level Solution for Real-time Interactive Generation 中文标题&#xff1a;StreamDiffusion: 一个用于实时交互生成的管道级解决方案 简介&#xff1a;我们介绍了StreamDiffusion&#xff0c;这是专为实时交互式图…

windows IIS 申请和配置https(SSL)的工具 win-acme

win-acme 是一个为Windows平台设计的工具&#xff0c;用于从Lets Encrypt自动获取和续期SSL/TLS证书&#xff0c;特别适合用于IIS&#xff08;Internet Information Services&#xff09;服务器。它的使用相对简单&#xff0c;提供了一个用户友好的命令行界面&#xff0c;以及一…

微服务API网关---APISIX

最近在做微服务调研&#xff0c;看到了apisix这个网关&#xff0c;于是进行了初步了解一下。 微服务是指&#xff0c;将大型应用分解成多个独立的组件&#xff0c;其中每个组件都各自的负责对应项目。 系统的架构大致经历了&#xff1a;单体应用架构–> SOA架构 -->微服务…

5G提速工业物联网发展

对于普通消费者来说&#xff0c;5G的概念可能就是更快的网速&#xff0c;5G带来的上网体验提升是最直观的&#xff0c;因为拿手机可以实时观看高清晰度的视频&#xff0c;且无需太久的等待时间。 而更低的时延与更高的可靠性对C端用户带来的体验改善&#xff0c;相对来说就小很…

文献阅读:Large Language Models are Null-Shot Learners

文献阅读&#xff1a;Large Language Models are Null-Shot Learners 1. 文章简介2. 方法介绍3. 实验考察 & 结论 1. 基础实验 1. 实验设计2. 实验结果 2. 消融实验 1. 小模型上的有效性2. ∅CoT Prompting3. 位置影响4. 组成内容 4. 总结 & 思考 文献链接&#xff1…

langchain加载模型时出现ConnectionError: (ProtocolError(‘Connection aborted.‘的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

瑞_23种设计模式_组合模式

文章目录 1 组合模式&#xff08;Composite Pattern&#xff09;1.1 介绍1.2 概述1.3 组合模式的结构1.4 组合模式的分类1.5 组合模式的优点1.6 组合模式的使用场景 2 案例一2.1 需求2.2 代码实现 3 案例二3.1 需求3.2 代码实现 &#x1f64a; 前言&#xff1a;本文章为瑞_系列…

基于java+springboot景区行李寄存管理系统设计和实现

基于javaspringboot景区行李寄存管理系统设计和实现 博主介绍&#xff1a;多年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文末获取…

低代码平台与MES:智能制造的新篇章

随着工业4.0和智能制造的兴起&#xff0c;企业对于生产过程的数字化、智能化需求日益迫切。传统的MES系统实施周期长、成本高&#xff0c;成为许多企业数字化转型的瓶颈。而低代码开发平台的出现为这一问题提供了新的解决思路。 一、万界星空科技低代码平台的优势&#xff1a; …

Socket网络编程(一)——网络通信入门基本概念

目录 网络通信基本概念什么是网络&#xff1f;网络通信的基本架构什么是网络编程?7层网络模型-OSI模型什么是Socket&#xff1f;Socket的作用和组成Socket传输原理Socket与TCP、UDP的关系CS模型(Client-Server Application)报文段牛刀小试&#xff08;TCP消息发送与接收&#…

c#/ .net8 香橙派orange pi +SSD1306 oled显示屏 显示中文+英文 实例

本文使用香橙派orangepi pi 3ltsSSD1306 oled显示屏作为例子&#xff0c;其它型号的也是一样使用的 在nuget包中安装 Sang.IoT.SSD1306; 以下两个二选一 SkiaSharp;//在window下运行装这个 SkiaSharp.NativeAssets.Linux.NoDependencies;//在linux下运行一定要装这个 在c# .ne…

android高级面试题2020,这套Github上40K+star面试笔记

前言 这里整理的是一些与技术没有直接关系的面试题&#xff0c;但是能够考察你的综合水平&#xff0c;所以不要以为不是技术问题&#xff0c;就不看&#xff0c;往往有时候就是这样一些细节的题目被忽视&#xff0c;而错过了一次次面试机会。 想要成为一名优秀的Android开发&…

iOS App冷启动优化:二进制重排

原理 二进制文件中方法的加载顺序&#xff0c; 取决于方法在代码文件中的书写顺序&#xff0c;而不是调用顺序。 应用程序启动时会调用到的方法是有限的&#xff0c;但可能分散在很多个。 由于内存是分页管理的&#xff0c;要加载就要 整页加载。 这就导致很多完全还用不到的方…

单点故障解决方案之Smart Link与Monitor Link

-SmartLink技术&#xff0c;创建Smart Link 组。在该组中&#xff0c;加入两个端口。其中1个端口是主端口&#xff0c;也称之为Master端口。另外1个端口是备份端口:也称之为 Slave 端口。 -Monitor Link 组也称之为“监控链路组&#xff0c;由上行端口和下行端口共同组成。下行…

XUbuntu22.04之如何定制:已经绑定的快捷键?(二百一十五)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

汽车后视镜反射率检测仪厂家

随着汽车工业的快速发展&#xff0c;汽车后视镜作为驾驶员观察车辆周围环境的重要工具&#xff0c;其性能和质量对于交通安全至关重要。汽车后视镜的反射率检测仪是一种用于检测汽车后视镜反射性能的专业设备&#xff0c;其重要性不言而喻。本文将重点介绍汽车后视镜反射率检测…

【北京迅为】《iTOP-3588开发板网络环境配置手册》第1章 网络基础知识学习

RK3588是一款低功耗、高性能的处理器&#xff0c;适用于基于arm的PC和Edge计算设备、个人移动互联网设备等数字多媒体应用&#xff0c;RK3588支持8K视频编解码&#xff0c;内置GPU可以完全兼容OpenGLES 1.1、2.0和3.2。RK3588引入了新一代完全基于硬件的最大4800万像素ISP&…