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

(0)

相关推荐

  • javascript中"/"运算符常见错误

    //二分查找健忘递归版本 复制代码 代码如下: function binary_search(arr,target,low,high){ if(low<high){ //至少包括两个元素 var min=(low+high)/2; if(target>arr[min]) return binary_search(arr,target,min+1,high); else return binary_search(arr,target,low,min); }else if(low==high){

  • 分析javascript中9 个常见错误阻碍你进步

    分析javascript中9 个常见错误阻碍你进步 很多人尝试学习 JavaScript ,但是不久就放弃了.然后他们就告诉自己,"JavaScript 太复杂了",更有甚者说,"我不是前端开发的料". 这种情况挺让人悲伤的.其实根本不必放弃,所要做的仅仅是换一种不同的学习方法. 在这篇文章中,我们将介绍一些最常见的错误学习方法,并了解如何避免这些错误.许多技巧不仅适用于 JavaScript,甚至可以用到 web 开发上,所以也算是一种福利. 我们来吧! 错误 #

  • 再谈javascript常见错误及解决方法

    初学Javascript,每天总是被很小的问题折磨半天,今晚就有好几个小问题. 第一:全部使用双引号造成匹配错误 <input type="checkbox" onmouseover="document.getElementById("test").style.display="none":"/> 改行一直报错误:unexpected toke "}"  检查半天也没有发现错误,对照发现视频上是

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

    今天在rainweb的博客上,看到了这篇非常好的文章,觉得非常有必要分享出来,相信大家认真读完这篇文章,对js作用域的理解又会上升到一个新的台阶. 前言:javascript里变量作用域是个经常让人头痛抓狂的问题,下面通过10++个题目,对经常遇到又容易出错的情况进行了简单总结,代码样例很短很简单 题目一 复制代码 代码如下: var name = 'casper'; alert(name); //毫无疑问地输出:casper 题目二 复制代码 代码如下: alert(name); //报错:对

  • 理解JavaScript变量作用域更轻松

    JavaScript本身作为一门简单的语言,就其变量作用域问题一样令不少人头晕,这主要是因为JavaScript闭包的存在.本文不打算深入讲解JavaScript变量作用域问题(其实本人也没有能力能把这一话题讲的深入些),也不讲"闭包"话题,本文只讨论最实用的JavaScript作用域知识点. 一.JavaScript作用域分类 JavaScript就两种作用域:全局(window).函数级(function).函数级(function)不要理解为"块级(大括号{}级)&qu

  • JavaScript变量作用域及内存问题实例分析

    本文实例讲述了JavaScript变量作用域及内存问题.分享给大家供大家参考,具体如下: 学习要点: 1.变量及作用域 2.内存问题 JavaScript的变量与其他语言的变量有很大区别.JavaScript变量是松散型的(不强制类型)本质,决定了它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变. 一.变量及作用域 1.基本类型和引用类型的值 ECMAScript变量可能包含两种不同的数据类型的值:

  • JavaScript变量作用域_动力节点Java学院整理

    在JavaScript中,用var申明的变量实际上是有作用域的. 如果一个变量在函数体内部申明,则该变量的作用域为整个函数体,在函数体外不可引用该变量: 'use strict'; function foo() { var x = 1; x = x + 1; } x = x + 2; // ReferenceError! 无法在函数体外引用变量x 如果两个不同的函数各自申明了同一个变量,那么该变量只在各自的函数体内起作用.换句话说,不同函数内部的同名变量互相独立,互不影响: 'use stric

  • 不同浏览器javascript变量作用域的处理方法

    1.关于prototype:这里prototype是javascript的一个特性,不是那个有名的prototype框架: var string="hello world"; try{ alert(string.phone()); }catch(e){alert(e);} String.prototype.phone=function() { return "159-10957151"; } alert(string.phone()); [Ctrl+A 全选 注:如

  • javascript 变量作用域 代码分析

    代码清单1-1 展示javascript的变量作用域的例子 //设置全局变量foo,并置为"test" var foo = "test"; //在if块中 if(true){ //将foo置为'new test' var foo = "new test"; } //如我们所见,现在foo等于'new test'了 alert(foo == "new test"); //创建一个会修改变量foo的新函数 function tes

  • Javascript 变量作用域 两个可能会被忽略的小特性

    也许有些高手早已知道了,但是我觉得这两个东西还是有一些价值的,所以拿到这里和大家分享一下吧. 有如下代码: 复制代码 代码如下: <script type="text/javascript" > function test() { with (location) { var temp = "an url"; } alert(temp); } test(); </script> 调用这个函数会输出什么呢? 也许会认为它会弹出undefined,

  • 浅谈Javascript变量作用域问题

    Js中的变量作用域问题: 1.没有块级作用域.Js中的变量作用域不是以{}为界的,不像C/C++/Java. 如: 复制代码 代码如下: if(true){      var name = "qqyumidi";  }               alert(name);  // 结果:qqyumidi Js会将在if中定义的变量添加到当前的执行环境中,尤其在使用for循环时需要注意与其他语言的差异. 复制代码 代码如下: for(var i=0; i<10; i++){    

  • Javascript变量作用域详解

    变量的作用域指的是变量的可见性,而生命周期则(存活期)则是从另一个角度考察变量. JS中变量的作用域分为全局变量和局部变量,函数内定义的称为局部变量,函数外的称为全局变量.("函数外的称为全局变量"是相对的,另此处讨论的前提是用var显式声明的变量,函数内不用var定义的变量默认是全局变量,当然忽略var声明变量是不赞成的). 复制代码 代码如下: var glob = 4;//函数外声明全局变量 function fun() {     var height = 20; //函数内用

随机推荐