详解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 jQuery插件练习
Dec 24 Javascript
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
ExtJs的Date格式字符代码
Dec 30 Javascript
js获取height和width的方法说明
Jan 06 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
你有必要知道的25个JavaScript面试题
Dec 29 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 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判断表单复选框选中状态完整例子
2014/06/24 PHP
phplot生成图片类用法详解
2015/01/06 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
JavaScript 格式字符串的应用
2010/03/29 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
老生常谈进程线程协程那些事儿
2017/07/24 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
python实现日常记账本小程序
2018/03/10 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
python视频按帧截取图片工具
2019/07/23 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
Python 解决相对路径问题:"No such file or directory"
2020/06/05 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
Python: glob匹配文件的操作
2020/12/11 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
英文版网络工程师求职信
2013/10/28 职场文书
安全检查验收制度
2014/01/12 职场文书
活动策划邀请函
2014/02/06 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
队列队形口号
2015/12/25 职场文书
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏