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 相关文章推荐
javascript innerText和innerHtml应用
Jan 28 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
javascript面向对象编程代码
Dec 19 Javascript
js获取height和width的方法说明
Jan 06 Javascript
Jquery基础教程之DOM操作
Aug 19 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
axios异步提交表单数据的几种方法
Aug 11 Javascript
浅谈vuex中store的命名空间
Nov 08 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访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
解析isset与is_null的区别
2013/08/09 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
PHP代码加密的方法总结
2020/03/13 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
面向对象设计的原则是什么
2013/02/13 面试题
Java基础类库面试题
2013/09/04 面试题
信息专业个人的自我评价
2013/12/27 职场文书
公务员政审材料
2014/12/23 职场文书
电影地道战观后感
2015/06/04 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python
mysql函数全面总结
2021/11/11 MySQL