详解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 相关文章推荐
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
简单实现js页面切换功能
Jan 10 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
vue.js实例todoList项目
Jul 07 Javascript
详解JavaScript 的变量
Mar 08 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 Javascript
手把手教你从零开始react+antd搭建项目
Jun 03 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二分法在IP地址查询中的应用
2008/08/12 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
使用angular写一个hello world
2015/01/23 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
爬虫利器Puppeteer实战
2019/01/09 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
python+opencv实现摄像头调用的方法
2019/06/22 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
2015年党员自我剖析材料
2014/12/17 职场文书
高考升学宴主持词
2019/06/21 职场文书
Vue的生命周期一起来看看
2022/02/24 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js