【JavaScript】变量提升

变量提升(Hoisting)被认为是,Javascript 中执行上下文(特别是创建和执行阶段)工作方式的一种认识。

提升(Hoisting)这个词。不过,需要注意的是,开始时,这个概念可能比较难理解,甚至恼人。

例如,从概念的字面意义上说,“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面,但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的,而是在编译阶段被放入内存中。

JavaScript 在执行任何代码段之前,将函数声明放入内存中的优点之一是,你可以在声明一个函数之前使用该函数。例如:

/*** 正确的方式:先声明函数,再调用函数 (最佳实践)*/
function catName(name) {console.log("我的猫名叫 " + name);
}catName("Tigger");/*
以上代码的执行结果是:"我的猫名叫 Tigger"
*/

上面的代码片按照是你的正常思维(先声明,后调用)去书写的。现在,我们来看看当我们在写这个函数之前调用这个函数会发生什么:

/*** 不推荐的方式:先调用函数,再声明函数*/catName("Chloe");function catName(name) {console.log("我的猫名叫 " + name);
}/*
代码执行的结果是:"我的猫名叫 Chloe"
*/

即使我们在定义这个函数之前调用它,函数仍然可以工作。这是因为在 JavaScript 中执行上下文的工作方式造成的。

变量提升也适用于其他数据类型和变量。变量可以在声明之前进行初始化和使用。但是如果没有初始化,就不能使用它们。

译者注:函数和变量相比,会被优先提升。这意味着函数会被提升到更靠前的位置。

只有声明被提升

JavaScript 只会提升声明,不会提升其初始化。如果一个变量先被使用再被声明和赋值的话,使用时的值是 undefined。参见例子:

console.log(num); // Returns undefined
var num;
num = 6;

如果你先赋值、再使用、最后声明该变量,使用时能获取到所赋的值

num = 6;
console.log(num); // returns 6
var num;

再来看几个类似的例子:

// Example 1 - only y is hoisted
var x = 1; // 声明 + 初始化 x
console.log(x + " " + y); // '1 undefined'
var y = 2; // 声明 + 初始化 y// Example 2 - Hoists
var num1 = 3; // Declare and initialize num1
num2 = 4; // Initialize num2
console.log(num1 + " " + num2); //'3 4'
var num2; // Declare num2 for hoisting// Example 3 - Hoists
a = "Cran"; // Initialize a
b = "berry"; // Initialize b
console.log(a + "" + b); // 'Cranberry'
var a, b; // Declare both a & b for hoisting

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

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

相关文章

FFmpeg——使用Canvas录制视频尚存问题的解决方案

个人简介 👀个人主页: 前端杂货铺 🙋‍♂️学习方向: 主攻前端方向,正逐渐往全干发展 📃个人状态: 研发工程师,现效力于中国工业软件事业 🚀人生格言: 积跬步…

编译正点原子LINUXB报错make: arm-linux-gnueabihf-gcc:命令未找到

编译正点原子LINUX报错make: arm-linux-gnueabihf-gcc:命令未找到 1.报错内容2.解决办法3./bin/sh: 1: lzop: not found4.编译成功 1.报错内容 make: arm-linux-gnueabihf-gcc:命令未找到CHK include/config/kernel.releaseCHK include/generat…

lamba stream处理集合

lamba stream处理集合 带拼接多字段分组List< Object> 转 Map<String,List< Object>> Map<String, List<ProfitAndLossMapping>> collect plMappingList.stream() .collect(Collectors.groupingBy(m -> m.getLosType() ":" m.…

Linux 上的轻量级浏览器

导读大多数 Linux 桌面环境中包含的基本图像查看器可能不足以满足你的需要。如果你想要一些更多的功能&#xff0c;但仍然希望它是轻量级的&#xff0c;那么看看这四个 Linux 桌面中的图像查看器&#xff0c;如果还不能满足你的需要&#xff0c;还有额外的选择。 当你需要的不…

本地部署Jellyfin影音服务器并实现远程访问影音库

文章目录 1. 前言2. Jellyfin服务网站搭建2.1. Jellyfin下载和安装2.2. Jellyfin网页测试 3.本地网页发布3.1 cpolar的安装和注册3.2 Cpolar云端设置3.3 Cpolar本地设置 4.公网访问测试5. 结语 1. 前言 随着移动智能设备的普及&#xff0c;各种各样的使用需求也被开发出来&…

表格冻结第二行

在网上找了一圈也没找到说明白的。 像这样的表格下面会有很多行&#xff0c;往下翻的时候会忘记第二行显示的什么内容。 需求&#xff1a;将第二行进行冻结 实现&#xff1a; 1&#xff0c;选中第一和第二行&#xff0c;下拉&#xff0c;点击冻结 2&#xff0c;会显示冻结至…

会声会影2024出来了吗?会声会影2024这款视频剪辑软件怎么样?

众所周知&#xff0c;每每有新兴行业逐渐崛起壮大的时候&#xff0c;随机而来的就是这个行业创造出的衍生行业&#xff0c;比如说现在的短视频平台或者是视频剪辑行业&#xff0c;都是很明显例子&#xff0c;今天我们就针对剪辑软件来和大家聊一聊&#xff0c;会声会影2024这款…

自动化测试篇:Java+selenium+appium自动化测试详解

一、启动测试机或者Android模拟器&#xff08;Genymotion俗称世界上最快的模拟器&#xff0c;可自行百度安装&#xff09; 同时&#xff0c;我也准备了一份软件测试视频教程&#xff08;含接口、自动化、性能等&#xff09;&#xff0c;需要的可以直接在下方观看&#xff0c;或…

JavaScript基础入门02

目录 1.变量的使用 1.1基本用法 1.2理解 动态类型 2.基本数据类型 2.1number 数字类型 2.2数字进制表示 2.3特殊的数字值 2.4string 字符串类型 2.4.1基本规则 2.4.2转义字符 2.4.3求长度 2.4.4字符串拼接 2.5boolean 布尔类型 2.6undefined 未定义数据类型 2.7n…

MASK-RCNN tensorflow环境搭建

此教程默认你已经安装了Anaconda&#xff0c;且tensorflow 为cpu版本。为什么不用gpu版本&#xff0c;原因下面解释。 此教程默认你已经安装了Anaconda。 因为tensorflow2.1后的gpu版&#xff0c;不支持windows。并且只有高版本的tensorflow才对应我的CUDA12.2&#xff1b; 而…

【漏洞复现】fastjson_1.2.24_unserializer_rce

感谢互联网提供分享知识与智慧&#xff0c;在法治的社会里&#xff0c;请遵守有关法律法规 文章目录 1.1、漏洞描述1.2、漏洞等级1.3、影响版本1.4、漏洞复现1、基础环境2、漏洞检测3、漏洞验证 1.5、深度利用1、GetShell 说明内容漏洞编号漏洞名称fastjson 1.2.24 反序列化导致…

Linux 环境搭建

目录 1.Linux 背景介绍1.1发展史1.1.1 UNIX发展的历史1.1.2 Linux发展历史 1.2开源1.3 企业应用现状1.4 发行版本 2.搭建 Linux 环境2.1 Linux 环境的搭建方式 1.Linux 背景介绍 1.1发展史 Linux从哪里来&#xff1f;它是怎么发展的&#xff1f;在这里简要介绍Linux的发展史。…

自定义在input生成tag标签样式,标签可删除。组件封装

生成效果如图&#xff1a; <template><div class"tag-input"><!-- 父盒子 --><div class"father_box" click"fatherOnclick" :class"verify?:notVerify"><!-- 生成的标签 --><div v-for"(item…

师从IEEE Fellow|民办高校计算机专业教师自费赴美访学

D老师科研背景较弱&#xff0c;拟自费访学并带孩子出国就读&#xff0c;故要求申请到美国生活成本低且有较好公立中学教育资源的地区&#xff0c;并希望对方不收管理费。最终我们落实了德克萨斯大学达拉斯分校的邀请函&#xff0c;对方是IEEE Fellow、IET Fellow和EAI Fellow三…

Redis中Hash类型的命令

目录 哈希类型的命令 hset hget hexists hdel hkeys hvals hgetall hmget hlen hsetnx hincrby hincrbyfloat 内部编码 Hash类型的应用场景 作为缓存 哈希类型和关系型数据库的两点不同之处 缓存方式对比 Redis自身已经是键值对的结构了,Redis自身的键值对就…

『CV学习笔记』图像超分辨率等图像处理任务中的评价指标PSNR(峰值信噪比)

图像超分辨率等图像处理任务中的评价指标PSNR(峰值信噪比) 文章目录 一. PSNR(峰值信噪比)1.1. 定义1.2. 作用1.3. 例子1.4 . PSNR评价标准二. 参考文献一. PSNR(峰值信噪比) 1.1. 定义 峰值信噪比(Peak Signal-to-Noise Ratio, PSNR)是图像超分辨率等图像处理任务中常用的一…

YOLO算法改进5【中阶改进篇】:添加SENet注意力机制

SE-Net 是 ImageNet 2017&#xff08;ImageNet 收官赛&#xff09;的冠军模型&#xff0c;是由WMW团队发布。具有复杂度低&#xff0c;参数少和计算量小的优点。且SENet 思路很简单&#xff0c;很容易扩展到已有网络结构如 Inception 和 ResNet 中。 我们可以看到&#xff0c;已…

纯CSS实现卡片上绘制透明圆孔

<template><div class"dot-card-wrapper"><div class"top-wrapper"><slot name"top"></slot></div><!-->核心是下面这部分</--><div class"dot-row"><div class"left-…

java配置GDAL

<gdal.version>3.7.0</gdal.version><!-- gdal--><dependency><groupId>org.gdal</groupId><artifactId>gdal</artifactId><version>${gdal.version}</version></dependency> GDAL环境安装 downlo…

学习 Python 数据可视化,如何快速入门?

Python 是一种非常流行的编程语言&#xff0c;具有简单易学、高效、丰富的库和工具等特点。其中&#xff0c;数据可视化是 Python 的一个重要应用领域&#xff0c;可以帮助人们更好地理解和分析数据。本文将介绍如何快速入门 Python 数据可视化&#xff0c;以及常用的可视化工具…