var的模块模式和脚本模式。

在JavaScript中,var 关键字用于声明变量。变量的作用域取决于它在哪里被声明以及代码是如何运行的。您提到的“模块模式”和“脚本模式”与如何组织和执行JavaScript代码有关。

脚本模式

在传统的“脚本模式”下,JavaScript代码通常作为HTML页面的一部分嵌入或直接通过<script>标签引入。在这种情况下,使用 var 声明的变量会成为全局对象(在浏览器中是window对象)的属性,除非它们在函数内部被声明。这意味着这些变量在全局作用域中可见,可能会与其他脚本或页面上的代码产生冲突。

 
 

javascript复制代码

// 脚本模式
var globalVar = "I'm global!";
function someFunction() {
var localVar = "I'm local!"; // 在函数作用域内
console.log(localVar); // 输出 "I'm local!"
}
someFunction();
console.log(globalVar); // 输出 "I'm global!"
console.log(localVar); // ReferenceError: localVar is not defined

模块模式

随着JavaScript的发展,模块系统变得越来越重要,它允许开发者将代码分割成独立的、可重用的部分。在模块模式下,每个模块都有自己的作用域,并且可以使用importexport语句来导入和导出功能。在这种情况下,使用var声明的变量(在模块顶层)将不会成为全局变量,而是局限于该模块的作用域内。

例如,在一个CommonJS模块(Node.js中使用)中:

 
 

javascript复制代码

// CommonJS模块
var moduleVar = "I'm module-scoped!";
function moduleFunction() {
console.log("This is a module function.");
}
module.exports = {
moduleFunction: moduleFunction
};

在这个模块中,moduleVar 和 moduleFunction 都是模块作用域的,不会污染全局命名空间。其他模块需要通过require来访问这个模块导出的内容。

在ES6模块中,使用exportimport

 
 

javascript复制代码

// ES6模块
let moduleVar = "I'm module-scoped!";
function moduleFunction() {
console.log("This is a module function.");
}
export { moduleVar, moduleFunction };

在这个ES6模块中,moduleVar 和 moduleFunction 同样被限制在模块作用域内,并且可以通过import语句在其他模块中使用。

let 和 const

在ES6中,还引入了letconst来声明变量。与var不同,letconst声明的变量具有块级作用域(block scope),这意味着它们在声明它们的代码块(例如,if语句、for循环或任何{}包围的代码块)内有效。这有助于减少变量提升(hoisting)和意外创建全局变量的问题。

 
 

javascript复制代码

// 使用let声明的变量具有块级作用域
if (true) {
let blockScopedVar = "I'm block-scoped!";
console.log(blockScopedVar); // 输出 "I'm block-scoped!"
}
// console.log(blockScopedVar); // ReferenceError: blockScopedVar is not defined

在现代JavaScript开发中,推荐使用letconst来声明变量,以避免var的一些潜在问题,并更好地控制变量的作用域。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

TMS运输管理系统:开启高效物流之门的钥匙

TMS运输管理系统是一种集货运计划、路径规划、运输执行和跟踪管理于一体的综合管理系统。它利用现代信息技术和互联网资源&#xff0c;帮助企业高效管理供应链&#xff0c;提高物流效率和降低物流成本。本文将从系统优势、功能模块和应用案例等多个方面详细介绍TMS运输管理系统…

PHP校验15位和18位身份证号

第十八位数字的计算方法为&#xff1a; 1.将前面的身份证号码17位数分别乘以不同的系数。从第一位到第十七位的系数分 别为&#xff1a;7 9 10 5 8 4 2 1 6 3 7 9 10 5 8 4 2 2.将这17位数字和系数相乘的结果相加。 3.用加出来和除以11&#xff0c;看余数是多少&#xff1f; 4…

ESP32-Thonny 拍摄图片到SD卡

前言&#xff1a; 代码运行在Thonny 添加main.py到单片机中&#xff1a; 可以先运行一下试试&#xff1a;会输出以下信息&#xff1a; 没有问题的话&#xff08;SD卡挂载成功&#xff0c;摄像头初始化成功&#xff09;运行一次主程序后&#xff0c;闪光灯会闪烁一下。 代码&…

React首次加载渲染2次的问题

在开发React项目的时候&#xff0c;发现useEffect会调用2次的情况&#xff0c;依赖数组明明没有变化&#xff0c;怎么会调用2次&#xff1f;百思不得其解&#xff0c;依赖没变化的话&#xff0c;那肯定是整个组件重渲染了。 最最简单的代码如下&#xff1a; const container …

Python | Leetcode Python题解之第41题缺失的第一个正数

题目&#xff1a; 题解&#xff1a; class Solution:def firstMissingPositive(self, nums: List[int]) -> int:n len(nums)for i in range(n):while 1 < nums[i] < n and nums[nums[i] - 1] ! nums[i]:nums[nums[i] - 1], nums[i] nums[i], nums[nums[i] - 1]for …

vue实现水平排列且水平居中

样式实现 .body{text-align: center; } .body_content{display: inline-block; } .body_content_cardList{display: flex;flex-wrap: wrap;text-align: center; }<div class"body"><div class"body_content"><div class"body_content…

Mybatisplus LambdaQueryWrapper表达式使用DATE_FORMAT比较日期函数

背景&#xff1a; 最近遇到一个问题&#xff0c;数据库保存的日期字段是如下格式 但是我们需要比较的日期为 2020-08-01格式&#xff0c; 所以我们要将日期格式化 使用 Mybatisplus LambdaQueryWrapper的情况下可用下面的方式做参考 LambdaQueryWrapper<SysDicCode> la…

以始为终梳理前端的发展方向

嗨&#xff0c;我是小路。一位努力向上生长的90后前端开发工程师。 以下是正文&#xff1a; 前段时间朋友和我吐槽&#xff1a;“做了多年的PHP开发&#xff0c;突然被离职&#xff0c;然后去招聘市场一看&#xff0c;发现PHP已经没有市场了。偶尔会出现一两个相关的职位&#…

因果推断(三):causalml的使用(1)_元学习器的使用

元学习器是利用一些现成的机器学习方法来进行因果推断的方法。也是相对来说最简单的进行因果推断的模型&#xff0c;在econml和causalml都有实现&#xff0c;调用也相对比较方便。 1.1. S_Learner S 指的是 single&#xff0c;在S_Learner中&#xff0c;只需要训练一个机器学…

贪吃蛇游戏C语言破解:成为编程高手的必修课!

​ 个人主页&#xff1a;秋风起&#xff0c;再归来~ 文章专栏&#xff1a;C语言实战项目 个人格言&#xff1a;悟已往之不谏&#xff0c;知来者犹可追 克心守己&#xff0c;律己则安&#xff01; 1、游戏效果演示 贪吃蛇游戏效果演示 2、win32 A…

【深度学习实战(20)】使用torchsummary打印模型结构

一、安装torchsummary库 pip install torchsummary 二、代码 import torchvision.models as models from torchsummary import summarymodel models.AlexNet() model.to(cuda) summary(model,(3,224, 224))

AI智能边缘分析一体机,32T算力,可同时处理32路1080p高清视频

产品概述 XM-AIBOX-32智能边缘分析一体机是一款高性能、低功耗边缘计算产品。搭载BM1684X主芯片&#xff0c;INT8算力高达32TOPS&#xff0c;FP16/BF16算力高达16TFLOPS&#xff0c;FP32算力高达2TFLOPS&#xff0c;可同时处理32路高清视频&#xff0c;支持32路1080P高清视频硬…

【NOI】C++算法设计入门之深度优先搜索

文章目录 前言一、深度优先搜索1.引入2.概念3.迷宫问题中的DFS算法步骤4.特点5.时间、空间复杂度5.1 时间复杂度 (Time Complexity)5.2 空间复杂度 (Space Complexity)5.3 小结 二、例题讲解1.问题&#xff1a;1586 - 扫地机器人问题&#xff1a;1430 - 迷宫出口 三、总结四、感…

docker安装并跑通QQ机器人实践(3)-bs-nonebot搭建

NoneBot2 是一个现代、跨平台、可扩展的 Python 聊天机器人框架&#xff08;下称 NoneBot&#xff09;&#xff0c;它基于 Python 的类型注解和异步优先特性&#xff08;兼容同步&#xff09;&#xff0c;能够为你的需求实现提供便捷灵活的支持。同时&#xff0c;NoneBot 拥有大…

Rust实战 | 用 RustRover 开发猜数字游戏

#1、概述 从这期开始&#xff0c;我会以实际项目的形式&#xff0c;分享个人学习 Rust 语言的过程。期间&#xff0c;我不会讲太多语法知识&#xff0c;需要各位看官自行查阅文档&#x1f604;。 开始前&#xff0c;需具备 Rust 环境&#xff08;我用的是当前最新版本1.77.2&…

【Transformer】detr之encoder逐行梳理(二)

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 detr之encoder逐行梳理 1. 整体 encoder由encoder layer构成 输入进encoder的特征shape:(hw,b,c)&#xff0c;后文将给出说明 class Transformer(nn.…

Nacos分布式配置中心

<?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 https://…

常见的数据抽取工具对比

1.什么是ETL? ETL&#xff0c;是英文Extract-Transform-Load的缩写&#xff0c;用来描述将数据从来源端经过抽取&#xff08;extract&#xff09;、转换&#xff08;transform&#xff09;、加载&#xff08;load&#xff09;至目的端的过程&#xff0c;是数据仓库的生命线。 …

C#仿QQ抽屉式窗体的设计方法:创建特殊窗体

目录 1.WindowFromPoint函数 2.GetParent函数 3.实例 &#xff08;1&#xff09; 图片集合编辑器 &#xff08;2&#xff09;Form1.Designer.cs &#xff08;3&#xff09;Form1.cs 4.生成效果 QQ软件对于绝大多数的人来说再熟悉不过了&#xff0c;它以使用方便、界面美…

Scala 05 —— 函数式编程底层逻辑

Scala 05 —— 函数式编程底层逻辑 该文章来自2023/1/14的清华大学交叉信息学院助理教授——袁洋演讲。 文章目录 Scala 05 —— 函数式编程底层逻辑函数式编程假如...副作用是必须的&#xff1f;函数的定义函数是数据的函数&#xff0c;不是数字的函数如何把业务逻辑做成纯函…
最新文章