详解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 相关文章推荐
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
浅谈Angular4中常用管道
Sep 27 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 Javascript
JavaScript继承的三种方法实例
May 12 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数据库类
2009/05/27 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
Python分治法定义与应用实例详解
2017/07/28 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
关于诚信的活动方案
2014/08/18 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
委托书格式范文
2015/01/28 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python