详解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实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
jQuery取id有.的值的方法
May 21 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
vue中mint-ui的使用方法
Apr 04 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
了解JavaScript表单操作和表单域
May 27 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
paypal即时到账php实现代码
2010/11/28 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
布同 统计英文单词的个数的python代码
2011/03/13 Python
盘点提高 Python 代码效率的方法
2014/07/03 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
Python多进程写入同一文件的方法
2019/01/14 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
a标签下载链接的简单实现
2016/09/13 HTML / CSS
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
《路旁的橡树》教学反思
2014/04/07 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
总结Python变量的相关知识
2021/06/28 Python