JavaScript如何创建,全局变量

简介: JavaScript如何创建,全局变量

在JavaScript中,创建全局变量有几种方式,但需要注意的是,全局变量可能会导致命名冲突和意外的副作用,因此建议谨慎使用。以下是一些创建全局变量的方法:

1. 直接在全局作用域中声明变量

在函数外部声明的变量会自动成为全局变量。在浏览器环境中,这通常意味着变量会被添加到window对象上(在非严格模式下)。

javascript复制代码
 var globalVar = "我是一个全局变量";  
 
   
 
 console.log(globalVar); // 输出: 我是一个全局变量  
 
 console.log(window.globalVar); // 在浏览器环境下,输出: 我是一个全局变量


2. 在函数内部不使用var、let或const声明变量

在函数内部,如果直接赋值给一个未声明的变量(即不使用var、let或const),那么这个变量也会成为全局变量(在非严格模式下)。但请注意,这种做法是不推荐的,因为它可能导致意外的行为,并且在严格模式下会导致错误。

javascript复制代码
 function createGlobal() {  
 
     globalVarInsideFunction = "我也是一个全局变量";  
 
 }  
 
   
 
 createGlobal();  
 
 console.log(globalVarInsideFunction); // 输出: 我也是一个全局变量


3. 直接在window对象上添加属性

在浏览器环境中,你可以直接在window对象上添加属性来创建全局变量。这种方法在所有模式下都有效,但同样需要谨慎使用。

javascript复制代码
 window.anotherGlobalVar = "通过window对象创建的全局变量";  
 
   
 
 console.log(anotherGlobalVar); // 输出: 通过window对象创建的全局变量  
 
 console.log(window.anotherGlobalVar); // 输出: 通过window对象创建的全局变量


4. 使用this关键字(在全局作用域中)

在全局作用域中,this通常指向全局对象(在浏览器中是window)。因此,你也可以通过this来创建全局变量。

javascript复制代码
 this.globalVarUsingThis = "使用this关键字创建的全局变量";  
 
   
 
 console.log(globalVarUsingThis); // 输出: 使用this关键字创建的全局变量  
 
 console.log(window.globalVarUsingThis); // 在浏览器环境下,输出: 使用this关键字创建的全局变量


注意事项

避免使用全局变量:尽可能避免使用全局变量,因为它们可能导致命名冲突和难以追踪的bug。

使用模块或闭包:考虑使用JavaScript模块(如ES6模块)或闭包来封装你的变量和函数,以保持代码的封装性和可维护性。

严格模式:在JavaScript文件的顶部添加"use strict";可以启用严格模式,这有助于避免一些意外的全局变量创建(如函数内部未声明的变量)。

image.png

相关文章
|
4月前
|
存储 JavaScript 前端开发
Vue.js项目中全面解析定义全局变量的常用方法与技巧
Vue.js项目中全面解析定义全局变量的常用方法与技巧
90 0
|
6月前
|
JavaScript 前端开发
js中this是指向的哪个全局变量,改变this指向的方法有什么?
js中this是指向的哪个全局变量,改变this指向的方法有什么?
27 0
|
9月前
|
JavaScript 前端开发 安全
闭包治愈“全局变量恐惧症”,利用闭包实现JavaScript私有变量(三)
闭包治愈“全局变量恐惧症”,利用闭包实现JavaScript私有变量
|
9月前
|
JavaScript 前端开发
闭包治愈“全局变量恐惧症”,利用闭包实现JavaScript私有变量(二)
闭包治愈“全局变量恐惧症”,利用闭包实现JavaScript私有变量
|
9月前
|
存储 JavaScript 前端开发
闭包治愈“全局变量恐惧症”,利用闭包实现JavaScript私有变量(一)
闭包治愈“全局变量恐惧症”,利用闭包实现JavaScript私有变量
|
9月前
|
JavaScript 前端开发
js中this是指向的哪个全局变量,改变this指向的方法有什么
js中this是指向的哪个全局变量,改变this指向的方法有什么
50 0
|
JavaScript 前端开发
【JS 经典面试题】全局变量和局部变量
【JS 经典面试题】全局变量和局部变量
137 1
|
存储 自然语言处理 JavaScript
JS全局变量
1. Scope(作用域) 2. Lexical Environments (词法环境) 3. 全局对象(global object) 4. 浏览器环境下的globalThis 5. 全局环境(global envrionment) • Script 作用域 和Module 作用域 • 生成变量: 声明环境记录 vs 对象环境记录 • 访问变量 • 全局ECMAScript变量和全局宿主变量 6. 一图胜前言
133 0
|
JavaScript 前端开发
JavaScript 全局变量
JavaScript 全局变量
81 0
|
自然语言处理 JavaScript 前端开发
【译】JavaScript的全局变量到底是怎么工作的
【译】JavaScript的全局变量到底是怎么工作的
122 0
【译】JavaScript的全局变量到底是怎么工作的

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    47
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    57