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

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

今天在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

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

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多