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 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
返回上一页并自动刷新的JavaScript代码
Feb 19 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
jquery常用的12个小功能
Jul 22 Javascript
vue.js的安装方法
May 12 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
记一次react前端项目打包优化的方法
Mar 30 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 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带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
javascript globalStorage类代码
2009/06/04 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
浅析JavaScript动画
2015/06/10 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
python赋值操作方法分享
2013/03/23 Python
Python中下划线的使用方法
2015/03/27 Python
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
python并发编程之线程实例解析
2017/12/27 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
python获取引用对象的个数方式
2019/12/20 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
期末总结的个人自我评价
2013/11/02 职场文书
简历里的自我评价范文
2014/02/24 职场文书
考博专家推荐信
2014/05/10 职场文书
中队活动总结
2014/08/27 职场文书
滴水洞导游词
2015/02/10 职场文书
暑期家教宣传单
2015/07/14 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang