本站业务范围:1、PC端软件开发、网站开发 2、移动端APP、网站、微信接口、微商城开发 3、视频教程、毕业设计辅导
 当前位置:文章中心 >> Jquery_Ajax_Javascript
立即购买视频教程 搞混变量作用域将会带来各式各样的奇葩问题
夜鹰教程网 来源:www.yyjcw.com 日期:2016/11/26 18:06:36
分享到:
搞混变量作用域将会带来各式各样的奇葩问题

这篇文章不能解决你的问题?我们还有相关视频教程哦!

QQ:1416759661 新手QQ群:7835003  加Q远程协助!

在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术咨询: 购买教程  技术咨询:购买教程  大胆的加QQ咨询。

在JavaScript中“熟练”掌握并理解变量的作用范围非常必要,搞混变量作用域将会带来各式各样的奇葩问题,而且是难以查找的问题,尤其在复杂的代码环境中。对变量的作用范围心如明镜也能提高开发效率。什么时候我应该大肆书写变量名而不用考虑变量重复,什么时候应该谨慎处理,明白这些才能做到写代码犹如写文章,洋洋洒洒!


爆出一个我最近遇到的一个问题,就是关于局部变量后定义导致的undefined的问题,估计很少人会遇到这种情况,无意粗心就碰到了这个问题,特此我写了个简单的例子来阐述下(把它叫做“问题函数”吧):


function douwo(a,b){

   console.log("第一层:a:"+a+",b:"+b);

   var arg=arguments.length;

   $("html").click(function(){

      console.log("第二层:a:"+a+",b:"+b);

      if(arg>2){

         var b=8;

      }

   });

}

douwo(1,2);//第一层:a:1,b:2

我把闭包函数的b=8误写成了var b=8;众所周知,函数的参数相当于该函数的局部变量。上面的代码可以写成:


function douwo(){

   var a=1,b=2;

   console.log("第一层:a:"+a+",b:"+b);

   var arg=arguments.length;

   $("html").click(function(){

      console.log("第二层:a:"+a+",b:"+b);

      if(arg>2){

         var b=8;

      }

   });

}

douwo();//第一层:a:1,b:2

这是很好理解的,关键不好理解的是当点击页面的时候,打印出来的是:第二层:a:1,b:undefined

可是一个函数中变量后定义有时候也会存在,科普下(针对新手),如:


function qlq(){

   console.log(a);//undefined

   var a=8;

}

变量分声明和定义,当一个变量用var关键字的时候是声明,=赋值是定义,而在函数内变量后声明定义会把声明提前,而定义保留在原有的位置。所以上面的代码可以写成:


function qlq(){

   var a;//声明,但未赋值

   console.log(a);//undefined

   a=8;//定义,赋值

}

而函数参数都会充当局部变量在内部提前声明,所以最上面的代码可以写成:


function douwo(a,b){

   var a,b;

   console.log("第一层:a:"+a+",b:"+b);

   var arg=arguments.length;

   $("html").click(function(){

      console.log("第二层:a:"+a+",b:"+b);

      if(arg>2){

         var b=8;

      }

   });

}

douwo(1,2);//第一层:a:1,b:2

外面那层很好理解,关键在于里面那个闭包函数:


$("html").click(function(){

      console.log("第二层:a:"+a+",b:"+b);//第二层:a:1,b:undefined

      if(arg>2){

         var b=8;

      }

   });

这又要来科普下计算机对变量的查找规则了:就近原则,所谓就近原则就是首先是从函数内部查找变量,如果没有找到就往外层找,注意,外层可能是父函数,或者全局(window),如果全局都找不到那就真的不存在这个变量了。


关键难以理解的是if(arg>2){var b=8;},理论上条件不成立就不会进到这if里面去,当然就不会执行var b=8;所以上一行的打印会出来外函数的a和b,但是事实不是这样的,虽然条件不成立不会执行,但是计算机还是阅读了这段代码,就像小学老师批改周记签上“已阅”,计算机阅过之后的代码是这样子的:


function douwo(a,b){

   var a,b;

   console.log("第一层:a:"+a+",b:"+b);//第一层:a:1,b:2

   var arg=arguments.length;

   $("html").click(function(){

      var b;

      console.log("第二层:a:"+a+",b:"+b);//第二层:a:1,b:undefined

      if(arg>2){

         b=8;

      }

   });

}

douwo(1,2);

声明了但条件不成立所以没有定义,最终问题函数输出:第二层:a:1,b:undefined也就理解通了~,

这是个坑,巨大的坑!


复制链接 网友评论 收藏本文 关闭此页
上一条: 改变src或者z-index实现图片切换  下一条: return false preventDefault 和 stopP…
购买夜鹰教程网视频教程
  推荐教程/优惠活动

  热门服务/教程目录

  夜鹰教程网  新手必看,详细又全面。
  夜鹰教程网  购买教程  夜鹰教程网  在线支付-方便
  夜鹰教程网  担保交易-快捷安全   夜鹰教程网  闪电发货
  夜鹰教程网  电话和QQ随时可以联系我们。
  夜鹰教程网 不会的功能都可以找我们,按工作量收费。

客服电话:153 9760 0032

购买教程QQ:1416759661  购买教程
  热点推荐
ajax 清除缓存的两种方法
js日历控件点击日期显示在文本框中…
HTML、JS与FLASH 之间的静态传值方…
主题:ajax请求JSP,为什么GET就是…
javascript 改变iframe(框架)的方…
javascript取鼠标当前坐标
推荐一款网页软键盘 很漂亮的哦
ajax session过期问题的几个解决方…
js文字间隔停顿向上滚动效果
ajax 服务器文本框自动填值
js技术技巧收藏(200例)---1
ajax 数据库中随机读取5条数据动态…
主题:这是否是个捷径?Ajax利用S…
揭开AJAX神秘的面纱(AJAX个人学习…
常用的JS后台导航菜单
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs全套高清完整版视频教程
  最近更新
Javascript toString()、toLocale…
toString()和toLocaleString()的区…
reduce() 方法接收一个函数作为累…
js数组中reducede 用法
ES5中新增的数组Array方法
JS模拟鼠标自动点击功能
JavaScript开发者的工具箱
JavaScript使用技巧
闭包是什么?
js正则表达式详解
改变src或者z-index实现图片切换
搞混变量作用域将会带来各式各样的…
return false preventDefault 和 …
对于body的onload事件和JQuery的r…
产品图片放大镜效果
  工具下载  需要远程协助? 购买教程

sql2008视频教程 c#视频教程

VIP服务:如果您的某个功能不会做,可以加我们QQ,给你做DEMO!

JQUERY  Asp.net教程

MVC视频教程  vs2012
.NET+sql开发
手机:15397600032 C#视频教程下载
vs2012 vs2008 vs2010 sql2008 sql2005
Asp.Net  

教程咨询QQ:1416759661


这篇文章不能解决你的问题?我们还有相关视频教程哦!

QQ:1416759661 新手QQ群:7835003  加Q远程协助!

在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术咨询: 购买教程  技术咨询:购买教程  大胆的加QQ咨询。

关于我们 | 广告投放 | 购买教程 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接 | 购买教程

Nighthawk Tutorials Network 快捷购买教程

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3

 

出售asp.net系列视频教程 高清原创版 每天晚上20:30--23:00在线 按照编号从简单到高级 http://www.yyjcw.com/list.html