详解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 相关文章推荐
选择复选框按钮置灰否则按钮可用
May 22 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
Vue.js学习示例分享
Feb 05 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
深入浅析var,let,const的异同点
Aug 07 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
在webstorm中配置less的方法详解
Sep 25 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中的实现trim函数代码
2007/03/19 PHP
php 获取客户端的真实ip
2009/11/30 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
PHP缓冲区用法总结
2016/02/14 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
Python extract及contains方法代码实例
2020/09/11 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
儿科护士自我鉴定
2013/10/14 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
中学生操行评语大全
2014/04/24 职场文书
2016高考寄语集锦
2015/12/04 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python
详解如何用Python实现感知器算法
2021/06/18 Python
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL