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 相关文章推荐
js 浏览器事件介绍
Mar 30 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
fmt:formatDate的输出格式详解
Jan 09 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
javascript自定义右键菜单插件
Dec 16 Javascript
微信小程序实现分页加载效果
Nov 19 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对现有搜索引擎的调用
2013/06/25 PHP
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
vue  elementUI 表单嵌套验证的实例代码
2019/11/06 Javascript
使用Python下载Bing图片(代码)
2013/11/07 Python
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
python opencv调用笔记本摄像头
2019/08/28 Python
Python修改列表值问题解决方案
2020/03/06 Python
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
教学实习自我评价
2014/01/28 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
运动会入场词200字
2014/02/15 职场文书
出纳担保书范文
2014/04/02 职场文书
劳资协议书范本
2014/04/23 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
2014年底个人工作总结
2015/03/10 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers