javascript变量作用域几个头疼的问题

一世天才——分享
题目三
JavaScript代码
1alert(name);  //name下面才定义,这里肯定报错了吧?错!这里弹出:undefined 
2var name = ‘casper’; 
解释:javascript代码在解析的时候,都会搜索下var声明的变量,并将其声明提前,实际的过程如下:
JavaScript代码
3var name;  //光声明name变量,但未赋值,所以为此时为:undefined 
4alert(name);  
5name = ‘casper’; 

题目四
JavaScript代码
6var name = ‘casper’; 
7function show(){ 
8    alert(name); 
9    name = ‘hello’;  //全局变量name的值改为’hello’ 
10} 
11show();  //输出:casper 

题目五
JavaScript代码
12var name = ‘casper’; 
13function show(){ 
14    alert(name);  //输出:undefined,是不是有想死的心 
15    var name = ‘hello’;  //注意:与题目四相比,此处name前多了个var, 
16} 
17show(); 
解释:在函数show中,name是个局部变量,题目三的原理同样适用于此,即函数show内部实际为
(小知识点补充:当函数内部存在与外部全局变量同名的局部变量,优先使用局部变量,此处为name)
JavaScript代码
18function show(){ 
19    var name; 
20    alert(name); 
21    name = ‘hello’; 
22} 

题目六
JavaScript代码
23var list = [1,2,3]; 
24function show(){ 
25    if(typeof list === ‘undefined’){ 
26        list = []; 
27    } 
28    alert(list.length); 
29}; 
30show();  //结果:3,是不是一目了然= =,稍等,请接着看第七题 

题目七
JavaScript代码
31var list = [1,2,3]; 
32function show(){ 
33    if(typeof list === ‘undefined’){ 
34        var list = [];  //请注意,与题目六相比,这里多了个var 
35    } 
36    alert(list.length); 
37}; 
38show();  //结果:0,是不是突然有了想死的冲动 
解释:javascript没有块级作用域(即由{}限定的作用域),函数中声明的所有变量,无论在哪里声明,在整个函数中都是有定义的,这点跟C++等灰常不同,赶紧扭转思想与时俱进
于是,再来看下show方法实际的内部解析逻辑
JavaScript代码
39function show(){ 
40    var list;  //list为局部变量,且此处尚未赋值 
41    if(typeof list === ‘undefined’){ 
42        list = []; 
43    } 
44    alert(list.length); 
45}; 

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

题目九
JavaScript代码
48alert(typeof show);  //结果:undefined,请再次擦亮你的眼睛,你的确没有看错 
49var show = function(){}; 
解释:采用函数定义式以及函数表达式定义函数,两者过程之间存在一些区别
函数定义式:function show(){}
函数表达式:var show = function(){}
采用函数定义式声明的方法,函数的定义会提前;而采用函数表达式声明的方法,函数的定义,跟采用var声明的局部变量一样,函数声明会提前,但函数定义位置不变,过程如下:
JavaScript代码
50var show; 
51alert(typeof show); 
52show = function(){}; 


题目十
JavaScript代码
53var data = {name:‘casper’}; 
54function data(){ 
55    alert(‘casper’); 
56} 
57data();  //TypeError: object is not a function 
更正:在火狐浏览器中,结果是弹出 casper 的警告框!
而在chrome和IE9中,的确提示说data是一个对象,而不是一个函数
是不是有砸显示器的冲动。。。data此时其实为{name:’casper’},把一个object当函数调用,于是报错了
前面说过,函数声明(通过函数定义式)、var声明的变量会被提前,但是会有先后顺序之分,如下:
JavaScript代码
58function data(){ 
59    alert(‘casper’); 
60} 
61var data; 
62data = {name:‘casper’}; 
63data(); 

JavaScript代码
64//略微修改下,结果就不同鸟: 
65 
66var data = {name:‘casper’}; 
67var data = function (){  //通过函数表达式声明函数 
68    alert(‘casper’); 
69} 
70data();  //结果:casper 
71 
72//结合上文不难猜想过程如下: 
73 
74var data; 
75data = {name:‘casper’}; 
76data = function (){ 
77    alert(‘casper’); 
78} 
79data();  //结果:casper

你可能感兴趣的:(JavaScript,web前端,变量作用域)