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 表单验证扩展代码(一)
Oct 11 Javascript
javascript 闭包疑问
Dec 30 Javascript
jQuery参数列表集合
Apr 06 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
js实现3d悬浮效果
Feb 16 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 Javascript
JS中一些高效的魔法运算符总结
May 06 Javascript
javascript数组includes、reduce的基本使用
Jul 02 Javascript
javascript函数式编程基础
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的历史和优缺点
2006/10/09 PHP
php下intval()和(int)转换使用与区别
2008/07/18 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
php实现递归的三种基本方式
2020/07/04 PHP
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
pytorch的batch normalize使用详解
2020/01/15 Python
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
Linux文件系统类型
2012/09/16 面试题
亿企通软件测试面试题
2012/04/10 面试题
回门宴答谢词
2014/01/13 职场文书
消防先进事迹材料
2014/02/10 职场文书
村干部承诺书
2014/03/28 职场文书
市级三好学生评语
2014/12/29 职场文书
读书笔记怎么写
2015/07/01 职场文书