javascript变量作用域使用中常见错误总结
更新时间：2013年03月26日 11:14:11 作者：
刚看了一篇文章对js作用域的理解又会上升到一个新的台阶，javascript里变量作用域是个经常让人头痛抓狂的问题,接下来对经常遇到又容易出错的情况进行了简单总结，感兴趣的各位可以参考下哈
今天在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
相关文章
这篇文章主要给大家介绍了关于利用JS如何实现scroll自定义滚动效果的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-10-10
今天经过测试，实现了利用JS来自动打开页面上的链接的功能，其实比较简单，就是在页面上把链接列表列出来，然后通过JQuery的相关控制，在框架页中把链接打开，具体能做什么用，大家自己想，哈哈。2011-09-09
JavaScript中的模块化是指将每个js文件会被认为单独一个的模块。模块之间是互相不可见的。如果一个模块需要使用另一个模块，那么需要通过指定语法来引入要使用的模块，而且只能使用引入模块所暴露的内容2023-01-01
这篇文章主要为大家详细介绍了基于javascript实现放大镜特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
哈希表大家应该都经常用到吧,那么大家有没有想过哈希表是怎么实现的呢,本文我们就来从一道简单的题目来了解一下哈希表的简单原理和实现吧2024-02-02
这篇文章主要介绍了JavaScript常用的弹出广告及背投广告实现方法,实例分析了弹出广告与背投广告的实现原理与相关技巧,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了JS扩展方法,实例分析了javascript扩展方法的原理与各种常用的扩展应用技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
以前我们说的内存泄漏，通常发生在后端，但是不代表前端就不会有内存泄漏。特别是当前端项目变得越来越复杂后，前端也逐渐称为内存泄漏的高发区。本文就带大家了解一下Javascript的内存泄漏2022-06-06
这篇文章主要介绍了JS实现单行文字不间断向上滚动的方法,以实例形式较为详细的分析了文字滚动效果实现的原理与技巧,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了前端实现添加水印功能的四种方法,分别是使用CSS、Canvas、SVG以及动态生成水印图像,每种方法都有其特点和适用场景,并且每种方法都给出了实例代码,需要的朋友可以参考下2025-03-03
最新评论