JS中的变量作用域(console版)


Posted in Javascript onJuly 18, 2020

作用域说明:指一个变量的作用范围

1.全局作用域

(1) 全局作用域在页面打开时被创建,页面关闭时被销毁
(2) 编写在script标签中的变量和函数,作用域为全局,在页面的任意位置都可以访问到
(3) 在全局作用域中有全局对象window,代表一个浏览器窗口,由浏览器创建,可以直接调用
(4) 全局作用域中声明的变量和函数会作为window对象的属性和方法保存

var a = 10;
b = 20;
function an(){
  console.log('an')
}
var bn = function(){
  console.log('bn')
}
console.log(window)

如图,变量a,b和函数an,bn都保存在window对象上

JS中的变量作用域(console版)

(5) window对象的属性和方法可以直接调用,如window.an() 可以写为 an()

2.函数作用域:

(1) 调用函数时,函数作用域被创建,函数执行完毕,函数作用域被销毁

function an(){
    var s = 'an'
    console.log(s);
}
//an();

此时函数an并没有执行,作用域没有创建,当函数执行时,作用域创建,输出结果an

an();

JS中的变量作用域(console版)

(2) 每调用一次函数就会创建一个新的函数作用域,他们之间是相互独立的

(3) 在函数作用域中可以访问到全局作用域的变量,在函数外无法访问到函数作用域内的变量

function an(){
  var s = 'an'
  console.log(s);
}
an();
console.log(s); // 此时,程序会从当前作用域和上级作用域及以上作用域中寻找变量s,并不会去下级作用域中寻找

JS中的变量作用域(console版)

(4) 在函数作用域中访问变量、函数时,会先在自身作用域中寻找,若没有找到,则会到函数的上一级作用域中寻找,一直到全局作用域
(5) 在函数作用域中也有声明提前的特性,对于变量和函数都起作用,此时函数作用域相当于一个小的全局作用域,详细声明提前请看声明提前部分

an();
bn();
function an(){
    var s = 'an'
    console.log(s);
}
var bn = function(){
    console.log('bn')
}

下图就结果中,an()可以正常执行,函数an()提升并创建了,函数bn的变量名提升了,但是为赋值,此时bn不是函数

JS中的变量作用域(console版)

(6) 在函数作用域中,不使用变量关键字声明的变量,在赋值时会往上一级作用域寻找已经声明的同名变量,直到全局作用域时还没找到,则会成为window的属性

an(); // 输出结果 bn
function an(){
  var b = 'bn';
  function bn(){
    console.log(b); 
	b = 'bn2';  // b会往上一级寻找已经声明的同名变量,并赋值,直到全局作用域时还没找到,则会成为window的属性
  }
  bn();
  console.log(b); // 输出 bn2
}

(7) 在函数中定义形参,等同于声明变量

function an(name){
  console.log(name); // 输出 undefined
}
an();

等同于

function an(){
  var name
  console.log(name); // 输出 undefined
}
an();

到此这篇关于JS中作用域以及变量范围的文章就介绍到这了,更多相关JS作用域内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 白痴级入门教程
Nov 11 Javascript
javascript 使用 NodeList需要注意的问题
Mar 04 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
微信小程序登录session的使用
Mar 17 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 Javascript
Javascript之datagrid查询详解
Sep 15 Javascript
js里面的变量范围分享
Jul 18 #Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 #Javascript
深入理解 ES6中的 Reflect用法
Jul 18 #Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 #Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 #Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 #Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 #Javascript
You might like
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
php Ubb代码编辑器函数代码
2012/07/05 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
使用Python写一个小游戏
2018/04/02 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
python实现共轭梯度法
2019/07/03 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
应届毕业生求职信范文分享
2013/12/26 职场文书
校园公益广告语
2014/03/13 职场文书
离婚财产处理协议书
2014/09/30 职场文书
上诉状格式
2015/05/23 职场文书
永远是春天观后感
2015/06/12 职场文书
java设计模式--七大原则详解
2021/07/21 Java/Android
Python中with上下文管理协议的作用及用法
2022/03/18 Python