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

所属分类: 网络编程 / JavaScript 阅读数: 651
收藏 0 赞 0 分享

变量作用域

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时会报错。

更多精彩内容其他人还在看

纯javascript判断查询日期是否为有效日期

很多网站都涉及到输入日期选项,如果客户日期输入错误,可能导入查询不到甚至查询到错误的信息,为了更好的满足用户需求,需要对日期进行校验,下面给大家介绍使用纯javascript如何判断查询日期是否为有效日期,需要的朋友可以参考下
收藏 0 赞 0 分享

jquery实现的蓝色二级导航条效果代码

这篇文章主要介绍了jquery实现的蓝色二级导航条效果代码,涉及jquery鼠标事件及页面样式的动态切换效果实现技巧,非常简单实用,需要的朋友可以参考下
收藏 0 赞 0 分享

ajax如何实现页面局部跳转与结果返回

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,本篇文章给大家介绍ajax如何实现页面局部跳转与结果返
收藏 0 赞 0 分享

jQuery实现的类似淘宝网站搜索框样式代码分享

这篇文章主要介绍了类似淘宝网站搜索框样式实现代码,推荐给大家,有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

js实现的黑背景灰色二级导航菜单效果代码

这篇文章主要介绍了js实现的黑背景灰色二级导航菜单效果代码,涉及javascript操作页面元素动态切换的实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

jQuery仿360导航页图标拖动排序效果代码分享

这篇文章主要为大家详细介绍了360导航页图标拖动排序效果代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

javascript中SetInterval与setTimeout的定时器用法

Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等,本文文章通过代码示例给大家介绍javascript中SetInterval与setT
收藏 0 赞 0 分享

jquery带下拉菜单和焦点图代码分享

这篇文章主要介绍了jquery带下拉菜单和焦点图代码,推荐给大家,有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

jQuery实现的背景动态变化导航菜单效果

这篇文章主要介绍了jQuery实现的背景动态变化导航菜单效果,涉及jquery页面元素背景动态变换的实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享

jquery+CSS实现的水平布局多级网页菜单效果

这篇文章主要介绍了jquery+CSS实现的水平布局多级网页菜单效果,涉及jquery页面元素属性动态变换效果实现技巧,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多