JavaScript作用域 - 局部变量全局变量实例讲解
时间:2018-09-13
本文章向大家介绍JavaScript作用域 - 局部变量全局变量实例讲解,需要的朋友可以参考一下
JavaScript作用域
JavaScript作用域
作用域是可访问变量的集合。
在JavaScript中,对象和函数同样也是变量。
在JavaScript中,作用域可访问变量,对象,函数的集合。
作用域在函数内可以修改。
JavaScript局部作用域
变量在函数内声明,变量为局部变量(局部作用域)
局部变量:只能在函数内部访问。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <button onclick="myFunction(1,2)">试一试</button> <p id="demo"></p> </body> <script type="text/javascript"> function name() { //在此处声明一个变量 var a = 10; //函数内可以调用 a } //此处(函数外)不能调用变量 a //因为局部变量只作用于函数内,所以不同的函数可以使用相同名称的变量名 //局部变量在函数开始执行时创建,函数执行完毕后,变量会自动销毁 </script> </html>
JavaScript全局变量
变量在函数外定义,即为全局变量。
全局变量有全局作用域,网页中所有脚本和函数都可使用。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <button onclick="myFunction(1,2)">试一试</button> <p id="demo"></p> </body> <script type="text/javascript"> /* 在此处声明一个全局变量 */ var a = 10; function name() { //函数内可以调用 a } //此处也能调用变量 a </script> </html>
如果变量在函数内没有声明(没有使用var关键字声明)改变量为全局变量。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <button onclick="myFunction(1,2)">试一试</button> <p id="demo"></p> </body> <script type="text/javascript"> function name() { /* 在此处声明一个变量 */ a = 10; /* a没有使用var关键字声明,则默认为全局变量 */ } </script> </html>
JavaScript变量生命周期
变量的生命周期在它的声明时初始化。局部变量在函数执行完毕后销毁。全局变量在页面关闭后销毁。
函数参数
函数参数只在函数内起作用,是局部变量。
HTML中的全局 变量
在HTML中,全局变量是window对象,所有数据变量都属于window对象。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <button onclick="myFunction(1,2)">试一试</button> <p id="demo"></p> </body> <script type="text/javascript"> function name() { a = 10; } //此处可使用window.a调用变量 a </script> </html>
全局变量或者函数可以覆盖window对象的变量或者函数。局部变量包括window对象,可以覆盖全局变量和函数。
在es6中提供了let关键字和const关键字
let的声明方式与var相同,用let来代替var声明变量,就可以把当前变量限制在代码块中。
使用const声明的是常量,其值一旦被设置便不可被更改。
------------------------ end -----------------------
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python|运算符的运用
- Windows下登录凭证窃取技巧
- 小浩发现这篇浮点数的文章讲的真不错!
- 安全攻击溯源思路及案例
- 图解:「归并排序」
- STM32CubeMX6.0 + HAL + LittleVGL7.6 等学习[最全附工程源码]
- 国庆期间,我造了台计算机
- 编程语言的 IDE 支持
- 独家 | 手把手教你用Python的Prophet库进行时间序列预测
- 【Git】:基础的基础
- windows解决SpringBoot启动时:APPLICATION FAILED TO START
- 【Git】:基础操作篇
- 低光照图像增强算法汇总
- 用Python解决女朋友看电影没字幕的需求
- 【Git】:基础协作篇