详解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的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
vue中watch和computed的区别与使用方法
Aug 23 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原理
2007/03/28 PHP
PHP clearstatcache()函数详解
2010/03/02 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
PHP实现的简单缓存类
2015/07/29 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
PHP递归创建多级目录
2015/11/05 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
2013/01/07 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
JS前端笔试题分析
2016/12/19 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
pyhton列表转换为数组的实例
2018/04/04 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
详解Django中间件执行顺序
2018/07/16 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
Python configparser模块常用方法解析
2020/05/22 Python
为什么说python更适合树莓派编程
2020/07/20 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
社区党员先进事迹
2014/01/22 职场文书
对祖国的寄语大全
2014/04/11 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
建国大业电影观后感
2015/06/01 职场文书
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL