javascript变量作用域使用中常见错误总结


Posted in Javascript onMarch 26, 2013

今天在rainweb的博客上,看到了这篇非常好的文章,觉得非常有必要分享出来,相信大家认真读完这篇文章,对js作用域的理解又会上升到一个新的台阶。

前言:javascript里变量作用域是个经常让人头痛抓狂的问题,下面通过10++个题目,对经常遇到又容易出错的情况进行了简单总结,代码样例很短很简单

题目一

var name = 'casper'; alert(name); //毫无疑问地输出:casper

题目二
alert(name); //报错:对象未定义,即使用一个压根就不存在的变量,所以出错 
age = 24; //这里木有错,但age不是为定义吗?翻下犀牛书,明白了 //给一个未定义的变量赋值,会创建一个全局变量,相当于:var age = 24

题目三
alert(name); //name下面才定义,这里肯定报错了吧?错!这里弹出:undefined 
var name = 'casper';

解释:javascript代码在解析的时候,都会搜索下var声明的变量,并将其声明提前,实际的过程如下:
var name; //光声明name变量,但未赋值,所以为此时为:undefined 
alert(name); name = 'casper';

题目四
var name = 'casper'; 
function show(){ 
alert(name); 
name = 'hello'; //全局变量name的值改为'hello' 
} 
show(); //输出:casper

题目五
var name = 'casper'; 
function show(){ alert(name); //输出:undefined,是不是有想死的心 
var name = 'hello'; //注意:与题目四相比,此处name前多了个var, 
} show();

解释:在函数show中,name是个局部变量,题目三的原理同样适用于此,即函数show内部实际为
(小知识点补充:当函数内部存在与外部全局变量同名的局部变量,优先使用局部变量,此处为name)
function show(){ var name; alert(name); name = 'hello'; }
题目六
var list = [1,2,3]; 
function show(){ if(typeof list === 'undefined') 
{ list = []; } 
alert(list.length); 
}; 
show(); //结果:3,是不是一目了然= =,稍等,请接着看第七题

题目七
var list = [1,2,3]; 
function show(){ 
if(typeof list === 'undefined') 
{ var list = []; //请注意,与题目六相比,这里多了个var 
} alert(list.length); }; 
show(); //结果:0,是不是突然有了想死的冲动

解释:javascript没有块级作用域(即由{}限定的作用域),函数中声明的所有变量,无论在哪里声明,在整个函数中都是有定义的,这点跟C++等灰常不同,赶紧扭转思想与时俱进
于是,再来看下show方法实际的内部解析逻辑
function show(){ var list; //list为局部变量,且此处尚未赋值 
if(typeof list === 'undefined'){ 
list = []; } 
alert(list.length); };

题目八
alert(typeof show); //结果:function,请相信你的眼睛,你没有看错 
function show(){}

解释:javascript代码解析的过程,类似 function show() 这种形式声明的函数,跟var声明的变量一样,都会被提到最前面,不同的是,函数声明跟定义同时完成,但var声明的变量的赋值在后面才会完成
题目九
alert(typeof show); //结果:undefined,请再次擦亮你的眼睛,你的确没有看错 
var show = function(){};

解释:采用函数定义式以及函数表达式定义函数,两者过程之间存在一些区别
函数定义式:function show(){}
函数表达式:var show = function(){}
采用函数定义式声明的方法,函数的定义会提前;而采用函数表达式声明的方法,函数的定义,跟采用var声明的局部变量一样,函数声明会提前,但函数定义位置不变,过程如下:
var show; alert(typeof show); 
show = function(){};

题目十
var data = {name:'casper'}; 
function data(){ alert('casper'); } 
data(); //TypeError: object is not a function

是不是有砸显示器的冲动。。。data此时其实为{name:'casper'},把一个object当函数调用,于是报错了
前面说过,函数声明(通过函数定义式)、var声明的变量会被提前,但是会有先后顺序之分,如下:
function data(){ alert('casper'); 
} var data; data = {name:'casper'}; 
data();

略微修改下,结果就不同鸟:
var data = {name:'casper'}; 
var data = function (){ //通过函数表达式声明函数 
alert('casper'); } 
data(); //结果:casper

结合上文不难猜想过程如下:
var data; data = {name:'casper'}; 
data = function (){ alert('casper'); } 
data(); //结果:casper
Javascript 相关文章推荐
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
JavaScript中的this机制
Jan 30 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
Mar 26 #Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 #Javascript
jquery 无限级联菜单案例分享
Mar 26 #Javascript
JSON辅助格式化处理方法
Mar 26 #Javascript
html+css+js实现xp window界面及有关功能
Mar 26 #Javascript
jquery图片放大镜功能的实例代码
Mar 26 #Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 #Javascript
You might like
用PHP 4.2书写安全的脚本
2006/10/09 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
为jQuery增加join方法的实现代码
2010/11/28 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
简单实现jquery隔行变色
2017/11/09 jQuery
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
python实现封装得到virustotal扫描结果
2014/10/05 Python
Python zip函数打包元素实例解析
2019/12/11 Python
python django中8000端口被占用的解决
2019/12/17 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
python实现视频压缩功能
2020/12/18 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
大学军训自我鉴定
2013/12/15 职场文书
军训心得体会
2013/12/31 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
农村婚礼主持词
2014/03/13 职场文书
采购意向书范本
2014/03/31 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电
Python代码实现双链表
2022/05/25 Python