当前位置: 首页 > news >正文

Web前端学习:章三 -- JavaScript预热(二)

六五:作用域与function

function:函数,不是数学上的函数,与写代码有关
JS中的函数:运用它,起个名字,然后对函数进行调用,即可将函数中的内容执行一遍

1、function

最基本的作用域
可以理解为一个打包方法

(1)标准写法:

function必须得有个名字

function 名字(){这里可以写要调的东西或函数的内容
};
名字();

在这里插入图片描述

(2)分析

function看做函数
function AI的{}中,写函数的内容,即要被调用的东西
运行AI(),对函数function进行调用,函数即会执行{}中本身的内容

2、作用域

作用在一定的区域,在该区域之外就不起作用。
函数就是一个最基本的作用域。

因为 - function在JS中为函数
而且 - 函数就是一个最基本的作用域
所以 - 任何function都是一个作用域

JS存在于大的script标签中,function就是个私人区域,function之外的变量都是公用的。
因为a是公用的,所以函数Ai可以取用a:
在这里插入图片描述
因为函数Ai是私人的,公共范围的alert不能拿到b的值,所以报错且提示b没有被定义(没找到b)
在这里插入图片描述
两个函数不相通,一样报错
在这里插入图片描述
函数定义之后可以任意调用:
在这里插入图片描述

六五:预解析和变量提升

1、预解析

预先解析,JS第一次解析代码叫预解析

(1)JS代码运行原理

JS本身会解析两次代码:
第一次 —— 预解析:粗略过一遍,检查代码是否为JS的代码格式,不管运行错误
第二次 —— 正常解析:正常运行代码,更仔细

1、预解析出现错误:
就是语法出去,代码完全不执行,所有写的JS均失效
2、正常解析出现错误:
即运行错误,从错误代码开始,后面的均不执行

2、变量提升

在预解析过程中会触发两个现象:报错 - 和 - 变量提升

变量提升:即把变量提到该作用域的最上面,赋的值不会提升
在这里插入图片描述
在这里插入图片描述
解析:
如上两图,结果都是undefined。
但是图一,是正常顺序,因为a没有赋值,所以提示undefined
查看图二,a赋值10,但是在alert的下面,在这里触发了变量提升,把变量a提到了上面,但是赋值10不会提上去,所以与图一结果一致,有变量a但是没有值

1、变量提升规则:

1、只有有作用域的位置会发生变量提升
在这里插入图片描述

2、只有有申明的东西才会提升(即赋值)

3、JS输出方式

1、alert:弹窗

在这里插入图片描述

2、console.log:打印

网页右键-检查-console,查看结果
在这里插入图片描述

4、唯一性验证

1、外面的a被里面的a覆盖
在这里插入图片描述
2、每个作用域都会触发变量提升
每个作用域都会触发变量提升
每个作用域都会触发变量提升
解析:触发了变量提升,所以20行的a被提升到18,不会提升值,所以在18行出现一个看不到、未赋值的a,这个a会覆盖16行的a,所以这里打印的是未赋值的a,即undefined。
在这里插入图片描述

4、流程

函数 = 作用域 => 进行预解析 => 触发变量提升
在这里插入图片描述

相关文章:

Web前端学习:章三 -- JavaScript预热(二)

六五:作用域与function function:函数,不是数学上的函数,与写代码有关 JS中的函数:运用它,起个名字,然后对函数进行调用,即可将函数中的内容执行一遍 1、function 最基本的作用域…...

Excel绘制数据对比表格-表格可视化

Word中生成的表格一般比较单调,若一组数据存在对比的情况时,读者/审稿人难以直接通过详细对比数据来分析,此时若可以将该组数据可视化来对比则为好,Excel则可实现该功能。 关于有些期刊需要提供表格中的数据便于复制等情况时&…...

究竟是谁负了谁,来自底层测试的2022年终总结

前言 说实话坐在椅子前,都想好了,该怎么去写,甚至感觉有好多要写的,但是当我坐在椅子上时,却不知道该怎么开头了,不知道是不是紧张?还是不舍?难道还没有跟过去挥手告别的勇气吗&…...

C++——IO流

目录 C语言的输入与输出 流是什么 CIO流 C标准IO流 C文件IO流 二进制读写 文本读写 stringstream的简单介绍 C语言的输入与输出 C语言中我们用到的最频繁的输入输出方式就是scanf ()与printf()。 scanf(): 从标准输入设备(键 盘)读取数据,并将值存放在变量中。…...

网络 | UDP与TCP协议讲解 | TCP可靠性是怎样实现的?

文章目录前置知识查看网络状态的工具查看进程idUDP协议协议格式UDP只有接收缓冲区基于UDP的应用层协议TCP协议流的理解协议格式确认应答机制缓冲区序号的作用流量控制超时重传机制6位标志位紧急数据的处理三次握手listen的第二个参数全连接和半连接队列都维护了什么信息&#x…...

JavaEE——简单介绍Thread类以及线程的基本操作

文章目录一、Thread 类中的常见构造方法二、Thread 的一些常见属性三、线程的启动——start()isAlive() 方法的解释四、线程中断五、线程等待-join()了解六、简单解释线程休眠一、Thread 类中的常见构造方法 我们已知,Thread 类是Java中多线程中的一个关键类&#…...

Java的数据库编程:JDBC

Content 🎉1什么是API 🎉2.什么是JDBC 🎉3.数据库驱动包的安装 🎉4.数据库安装包在idea的使用 🎉5.JDBC的增删改查的简单实现 今天为大家带来JAVA的数据库编程,也就是用Java实现数据库 数据库的最基本的操作就是…...

蓝桥冲刺31天之第六天

今天是摆子的一天,明天我要肝一整天的第四题!!! PS:一个普通的排序罢了 import java.io.*; import java.util.Arrays; import java.util.Scanner;/*** ClassName 考勤刷卡* Description TODO* Author 小怂很怂* Date 2…...

Streamlit 工具记录

Streamlit 是基于 Python 的 Web 应用程序框架,可视化数据,分析结果。 Streamlit 是一个开源库,可在短时间内开发机器学习可视化仪表板。只需几行代码就可以构部署强大的数据应用程序。Streamlit 可将仪表板的开发时间从几天缩短至几小时。 …...

GreenPlum小结

什么是GreenPlum?GreenPlum是业界最快最高性价比的关系型分布式数据库,它在开源的PostgreSQL的基础上采用MPP架构(Massive Parallel Processing,海量并行处理),具有强大的大规模数据分析任务处理能力。GreenPlum作为大数据融合存储…...

C语言中数组和指针

文章目录前言一、指针的概念二、指针的大小三、指针的用法1.指针指向变量2.指针指向数组3.指针指向函数总结前言 本文将给大家带来C语言中非常重要的两个知识点,指针和数组。 一、指针的概念 指针,是C语言中的一个重要概念及其特点,也是掌…...

Leetcode.剑指 Offer II 022 链表中环的入口节点

题目链接 Leetcode.剑指 Offer II 022 链表中环的入口节点 mid 题目描述 给定一个链表,返回链表开始入环的第一个节点。 从链表的头节点开始沿着 next指针进入环的第一个节点为环的入口节点。如果链表无环,则返回 null。 为了表示给定链表中的环&#…...

4种不同编程语言的打印方式

意义 打印方式是编程中不可或缺的一部分,它可以帮助开发人员有效地调试和测试代码,并提供有用的信息来监视程序的运行状态和性能。 编程语言中的打印方式是指将程序输出到终端或控制台上进行显示。这个功能在编程中非常重要,因为它可以帮助开…...

websocket介绍

我们聊聊轮询技术,什么是轮询?轮询就是在特定的时间间隔,由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。 轮询分为两种: 短轮询:通过不断的向服务端发送数据,客户端发送Request,服务端直接返回Response(不管服务端数据有没有改变)。长轮…...

Educational Codeforces Round 144 (Rated for Div. 2),C,D

C. Maximum Set 思路: 我们求最大数组,显然是L一直乘2,直到再乘2就越过区间位置。我们说过,再乘一个2就不行,那么我们除一个2,换句话说,就是再乘一个4就不行了。发现,我们可能有机会乘一个3&a…...

【redis学习篇】Redis三种持久化方式详解

官方文档 一、Redis持久性 Redis如何将数据写入磁盘 持久性是指将数据写入持久存储,如固态磁盘(SSD)。Redis提供了一系列持久性选项。其中包括: RDB(快照):RDB持久性以指定的时间间隔执行数据…...

垃圾回收中的分代年龄

为什么CMS里的分代年龄是6而不是15 CMS (Concurrent Mark Sweep) 是一种基于分代的垃圾收集器,其中分代年龄指的是一个对象在年轻代中经历了多少次垃圾收集。在 CMS 中,当一个对象的分代年龄达到阈值时,就会被晋升到老年代中。 在 CMS 中&a…...

蓝桥杯-左移右移(2022国赛)

蓝桥杯-左移右移1、问题描述2、解题思路与代码实现2.1 方法一:使用LinkedList双向链表实现(50%)2.2 方法二:使用HashMap左右临界值实现(100%)1、问题描述 小蓝有一个长度为 N 的数组, 初始时从左到右依次是 1,2,3,…N 。 之后小蓝对这个数组进行了 M 次操…...

你还在手撸SQL?ChatGPT笑晕在厕所

文章目录你还在手撸SQL?ChatGPT笑晕在厕所一、背景二、面向Chat编程1. 数据库设计2. 建表语句3. 加中文注释4. 数据模拟5. 查询成绩6. 修改课程任课老师7. 删除课程8. 删除一个有关联数据的课程总结你还在手撸SQL?ChatGPT笑晕在厕所 一、背景 经典3表设…...

【Redis】Redis慢查询

文章目录慢查询记录慢查询两个配置参数修改配置参数慢查询日志慢查询记录 我们都知道像mysql等持久化数据库会有慢查询日志,其实Redis中也有慢查询日志的功能。慢查询就是系统在执行命令的前后计算每条命令的执行时间,如果超过我们预设的时间&#xff0c…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向: 逆向设计 通过神经网络快速预测微纳结构的光学响应,替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...