详解JavaScript 作用域


Posted in Javascript onJuly 14, 2020

作用域是可访问变量的集合。

JavaScript 作用域

在 JavaScript 中, 对象和函数同样也是变量。

在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。

JavaScript 函数作用域: 作用域在函数内修改。

JavaScript 局部作用域

变量在函数内声明,变量为局部作用域。

局部变量:只能在函数内部访问。

// 此处不能调用 carName 变量
function myFunction() {
  var carName = "Volvo";
  // 函数内可调用 carName 变量
}

因为局部变量只作用于函数内,所以不同的函数可以使用相同名称的变量。

局部变量在函数开始执行时创建,函数执行完后局部变量会自动销毁。

JavaScript 全局变量

变量在函数外定义,即为全局变量。

全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

var carName = " Volvo";
 
// 此处可调用 carName 变量
function myFunction() {
  // 函数内可调用 carName 变量
}

如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。

以下实例中 carName 在函数内,但是为全局变量。

// 此处可调用 carName 变量
 
function myFunction() {
  carName = "Volvo";
  // 此处可调用 carName 变量
}

JavaScript 变量生命周期

JavaScript 变量生命周期在它声明时初始化。

局部变量在函数执行完毕后销毁。

全局变量在页面关闭后销毁。

函数参数

函数参数只在函数内起作用,是局部变量。

HTML 中的全局变量

在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

//此处可使用 window.carName
 
function myFunction() {
  carName = "Volvo";
}

你知道吗?

你的全局变量,或者函数,可以覆盖 window 对象的变量或者函数。
局部变量,包括 window 对象可以覆盖全局变量和函数。

补充

ES6 中的 let 关键字

let 允许你声明一个作用域被限制在块级中的变量、语句或者表达式。与var关键字不同的是,它声明的变量只能是全局或者整个函数块的。

let 语法:

let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];

let 声明的变量只在其声明的块或子块中可用,这一点,与 var 相似。二者之间最主要的区别在于 var 声明的变量的作用域是整个封闭函数。

let 和 var 的区别代码实例:

function varTest() {
 var x = 1;
 if (true) {
  var x = 2; // 同样的变量!
  console.log(x); // 2
 }
 console.log(x); // 2
}

function letTest() {
 let x = 1;
 if (true) {
  let x = 2; // 不同的变量
  console.log(x); // 2
 }
 console.log(x); // 1
}

以上就是详解JavaScript 作用域的详细内容,更多关于JavaScript 作用域的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
Javascript var变量删除原理及实现
Aug 26 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 #Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 #jQuery
javaScript实现一个队列的方法
Jul 14 #Javascript
0基础学习前端开发的一些建议
Jul 14 #Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 #jQuery
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 #Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 #Javascript
You might like
一个php作的文本留言本的例子(六)
2006/10/09 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
隐性调用php程序的方法
2015/06/13 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
Js 随机数产生6位数字
2010/05/13 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
基于树莓派的语音对话机器人
2019/06/17 Python
python生成大写32位uuid代码
2020/03/03 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
python中字符串的编码与解码详析
2020/12/03 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
办公室主任职责范本
2014/03/07 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
公司酒会主持词
2015/07/02 职场文书