详解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使用height()获取高度需要注意的地方
Dec 13 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
在vue中阻止浏览器后退的实例
Nov 06 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
微信小程序单选框自定义赋值
May 26 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 Javascript
js实现简单图片拖拽效果
Feb 22 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
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
js格式化时间小结
2014/11/03 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
jquery实现直播视频弹幕效果
2020/02/25 jQuery
vue路由分文件拆分管理详解
2020/08/13 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
Python常用的爬虫技巧总结
2016/03/28 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
英文自荐信
2013/12/15 职场文书
善意的谎言事例
2014/02/15 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
倡议书作文
2015/01/19 职场文书
奖金申请报告模板
2015/05/15 职场文书
校运会新闻稿
2015/07/17 职场文书
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS