JS中作用域以及变量范围分析


Posted in Javascript onJuly 18, 2020

变量作用域

js作为一门脚本语言,他与c,java这些语言是不相同的。

全局变量

在js中声明全局变量,有下面几种方式:

1.在函数外通过var来声明。

var test ="hello";
console.log(test);
function a(){
  test="xx";
  console.log(test);
}
a();
console.log(test);

结果:

hello
xx
xx

这种方式通过声明的变量在任何地方都可进行修改和使用。

2.在函数中隐士的声明变量

function a(){
  test=22;
  console.log(test);
}
a();
console.log(test);

结果:

22
22

因为js是弱类型脚本语言,在使用之前无需定义,所以可以通过这种方式也能声明全局变量。

来看一个反例:

var test="aa";
console.log(test);
function a(test){
  test=22;
  console.log(test);
}
a(test);
console.log(test);

结果:

aa
22
aa

可以看到在函数中修改了test值可是第二次在函数外打印的值没有变。这是因为在函数的过程中只是进行了值传递。局部变量覆盖掉了全局变量,只是局部变量 在 修改。

因为在函数的参数内定义的变量并不是全局变量。

反例二:

function a(){
  var test="aa";
  console.log(test);
}
a();
console.log(test);

结果

aa
notdefine

在函数内通过var来声明的变量是局部变量,函数外无法访问。

变量作用域

js的作用域和c与java这些语言的作用域也不相同,骚小孩在以前经常会因为这个而头疼,后来在认真学习了以后才懂了。

1.js中没有块范围。

if(1!=1){
  var y=c;
}
console.log(y)
 
if(1==1){
  var x=a;
}
console.log(x);

结果:

undefine
a

可以看到在if代码块定义的两个变量,在if块之外去打印,如果判断成功的话,才会去执行里边的声明语句,声明语句执行了,那么在代码块外边就可访问到了。

也可以看出在代码块中声明的变量也是全局变量。

2.js中的全局变量都会成为window的属性

var x=0;
console.log(window.x);

结果:

0

3.变量提升

var c=0;
function a(){
  console.log(c);
}
a();

结果:

0

var c=0;
function a(){
  console.log(c);
  var c=11;
}
a();

结果:

undefine

可以看出在函数中加了一行声明语句结果就会不同,这产生这样的原因是什么呢?

其实第二个代码块的执行顺序是这样的:

var c=0;
function a(){
  var c;
  console.log(c);
  c=11;
}
a();

在函数中他会先把声明语句提升到第一行,但是并不提升赋值。然后局部变量覆盖全局变量,在打印c的时候局部变量还没来的

及赋值所以就是undefine。

变量提升不只会提升会执行的变量,不会执行的变量也会进行提升:

var c=10;
function a(){
  console.log(c);
  if(false) {
    var c = 10;
  }
}
a();

结果:

undefine

因为在if判断中定义了局部变量c,虽然if条件不成立,但是也会进行变量提升,所以打印c也是undefine;

4.let变量

通过上面的例子可以看到用var来定义变量的弊端:

1.var定义的变量没有块作用域;

2.var定义的全局变量会自动添加全局window对象的属性;

3.var变量会提前装载(变量提升);

let就是为了解决这些问题而诞生的。

for(let i=0;i<5;i++){
  
}
console.log(i);

结果:

报错

在代码块中定义了let变量,在外部引用的时候不会存在。即存在块作用域。

let i=10;
console.log(window.i);

结果:

undefine

let声明的变量并不会成为window的属性。

var c=10;
function a(){
  console.log(c);
  let c=1;
  console.log(c);
}
a();

在函数中存在变量与全局变量名相同的c,因此会覆盖掉全局变量c,但是由于let不会提前装载,所以在第一个打印语句打印c时会报错。

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

Javascript 相关文章推荐
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
一起来写段JS drag拖动代码
Dec 09 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
JSONObject使用方法详解
Dec 17 Javascript
jQuery插件制作的实例教程
May 16 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
JS中的变量作用域(console版)
Jul 18 #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
You might like
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
如何快速上手Vuex
2017/02/14 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
Python中的random()方法的使用介绍
2015/05/15 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
详解python编译器和解释器的区别
2019/06/24 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
后勤工作职责
2013/12/22 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
大学生操行评语大全
2014/12/31 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript