详解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 加号(+)运算符号
Dec 06 Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
jQuery随便控制任意div隐藏的方法
Jun 28 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 Javascript
js选择器全面解析
Jun 27 Javascript
js中的面向对象入门
Mar 06 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 Javascript
js 图片懒加载的实现
Oct 21 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
如何在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
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
php缓存技术详细总结
2013/08/07 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
php图片上传类 附调用方法
2016/05/15 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
动态加载js的几种方法
2006/10/23 Javascript
jQuery 技巧小结
2010/04/02 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
jquery实现数字输入框
2017/02/22 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python3.2中的字符串函数学习总结
2015/04/23 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
Python远程linux执行命令实现
2020/11/11 Python
大学生旷课检讨书
2014/01/22 职场文书
保护环境倡议书范文
2014/05/13 职场文书
新农村建设标语
2014/06/24 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
swagger如何返回map字段注释
2021/07/03 Java/Android
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python