详解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 相关文章推荐
jquery 插件 人性化的消息显示
Jan 21 Javascript
JavaScript 快捷键设置实现代码
Mar 13 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
echarts实现折线图的拖拽效果
Dec 19 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
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
ie8本地图片上传预览示例代码
2014/01/12 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
js实现数组转换成json
2015/06/26 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
十个Python程序员易犯的错误
2015/12/15 Python
对Python中range()函数和list的比较
2018/04/19 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
外贸英语毕业生自荐信
2013/11/14 职场文书
部队万能检讨书
2014/02/20 职场文书
年终奖发放方案
2014/06/02 职场文书
质量主管工作职责
2014/09/26 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
个人典型事迹材料
2014/12/30 职场文书
实习护士自荐信
2015/03/25 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL