注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

JavaScript 变量的作用域  

2014-08-31 22:50:39|  分类: JavaScript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

JavaScript 变量的作用域----梦幻雪冰

写这篇日志还是有点原因滴,由于前几天在课上一不小心就犯错了。给自己一个小惩罚,就来写这篇小日志了。
为了明白的理解JavaScript变量的作用域,首先要明白
JavaScript这样的解释型语言,基本分为两个阶段,编译期(下面为符合大多数语言的称呼习惯,改叫预编译)与运行期。在预编译阶段,它是用函数来划分作用域,然后逐层为其以 var 声明的变量与函数定义开辟内存空间,再然后对var变量进行特殊处理,统统赋初始值为undefined。欢迎学习交流--梦幻雪冰
看完概念之后,先来看看下面这个例子:
【第一个例子】

var a = 100;
var b = "梦幻雪冰";
function show(){
console.log(a);
console.log(b);
var a = 200;
}show();

【结果】第一个输出:undefined,第二个输出:梦幻雪冰
【解析】欢迎学习交流--梦幻雪冰
JavaScript 变量的作用域 - 梦幻雪冰 - 梦幻雪冰
 在执行console.log(a);的时候,先在show()函数里面查找看有没有发现定义a变量,突然发现show()函数里面有定义a变量,但是代码是从上往下执行,所以到这边a还没有进行赋值,可以得出a的值为undefined(开辟空间了但是未赋值,一定要分清编译期和执行期);执行到console.log(b);的时候,也先在show()函数里面进行查找有没有定义b变量,遗憾的是没有找到定义b变量,于是就到外面进行查找,咦,终于找到定义b的了,可以得出b的值为梦幻雪冰(开辟空间且赋值了)

【第二个例子】

var a = 100;
var b = "梦幻雪冰";
function show(){
console.log(a);
console.log(b);
var a = 200;
b = "独行冰海";
console.log(a);
console.log(b);

}show();

【结果】
JavaScript 变量的作用域 - 梦幻雪冰 - 梦幻雪冰
【解析】 
当执行完第五行代码的时候,变量的值如下(前面几行代码没有对变量进行赋值操作):
JavaScript 变量的作用域 - 梦幻雪冰 - 梦幻雪冰
 当执行完这句代码 b = "独行冰海";的时候,变量的值如下:
JavaScript 变量的作用域 - 梦幻雪冰 - 梦幻雪冰
因为函数内部可以访问函数外部的变量,所以可以显示出全局作用域中b的值;函数内部有a变量,只能对函数内部变量a进行数据操作(得到数据)(局部作用域的优先级大于全局作用域的优先级),不能对全局作用域中a变量进行数据操作(得到数据)。

 【第三个例子】

var a = 100;
var b = "梦幻雪冰";
function show(){
var a = 200;
b = "独行冰海";
}show();
console.log(a);
console.log(b);

【结果】
JavaScript 变量的作用域 - 梦幻雪冰 - 梦幻雪冰
【解析】 欢迎学习交流--梦幻雪冰
上面的例子中存在两个a变量,那么console.log(a);输出的是谁的a变量呢?show()函数好比如一个盒子,在外面是拿不到里面的东西,也就是说函数外部不能访问函数内部的变量,所以输出的是100;从下面的图中可以发现b变量是在全局作用中,那么show()函数里面存在对b变量进行数据操作,其实是对全局作用域中b变量进行数据操作,所以直接调用了全局作用域中b的变量输出独行冰海。
JavaScript 变量的作用域 - 梦幻雪冰 - 梦幻雪冰
 
【第四个例子】

function show(){
console.log(c);
c = "作用域";
console.log(c);
}show();

【结果】Uncaught ReferenceError: c is not defined
【解析】 
当调用第一个console.log(c);的时候,没有定义c变量,所以直接报错(记得代码是从上往下执行)

【第五个例子】

function show(){
c = "作用域";
console.log(c);
}show();
console.log(c);

【结果】第一次输出:作用域; 第一次输出:作用域
【解析】所有末定义直接赋值的变量,系统会自动声明为拥有全局作用域的变量,全局变量可以被函数内部访问。

【第六个例子】

function show(){
c = c + "作用域";
console.log(c);
}show();
console.log(c);

【结果】Uncaught ReferenceError: c is not defined
【解析】 c = c + "作用域"; 这个涉及到了操作符的优先级了,按照操作符的优先级来计算的话,先算 c + "作用域",那么c变量定义了没有?因为没有定义c变量,所以就直接报错了。

【第七个例子】

var a = 100;
var b = "梦幻雪冰";
function show(){
console.log(a);
a++;
console.log(a);
var a = 10;
console.log(a);
a = a++ + 20;
console.log(a);
a = ++a + 20;
console.log(a);
}show();

【结果】
JavaScript 变量的作用域 - 梦幻雪冰 - 梦幻雪冰
 【解析】
先来看看第一个console.log(a);因为show()函数里面已经定义a变量了,但是还没有进行赋值,所以直接输出undefined,如下图:
JavaScript 变量的作用域 - 梦幻雪冰 - 梦幻雪冰
第二个console.log(a);为什么输出的是NaN呢?因为a的值是undefined的,a++之后就会变成NaN(这不是一个数字)
第三个console.log(a); 当执行到这句的时候var a = 10;已经为a进行赋值了
JavaScript 变量的作用域 - 梦幻雪冰 - 梦幻雪冰
第四个console.log(a);当执行到a = a++ + 20;的时候,大家可以先看看,现在的a变量的值为10,那么a++的意思是先赋值后面在加1,所以10+20等于30咯;
第五个console.log(a);当执行到a = ++a + 20;的时候,大家也来看看现在a变量的值为30对吧,++a的意思是我先加1再赋值,所以31+20等于51;
作用域难嘛?真的一点都不难只要你细心去研究了,慢慢就懂了。

【第八个例子】

var a = 100;
var b = "梦幻雪冰";
function show(a){
console.log(a);
a++;
console.log(a);
var a = 10;
console.log(a);
a = a++ + 20;
console.log(a);
a = ++a + 20;
console.log(a);
}show(600);

【结果】
JavaScript 变量的作用域 - 梦幻雪冰 - 梦幻雪冰
 【解析】
要知道函数的形参与函数内部变量具有相同作用域;
第一个输出:先进行查找看有没有定义变量a,有在函数形参里面,也对形参a进行赋值了600;直接输出600
第二个输出:当前a的值为600了,a++之后为601;
第三个输出:因为形参与函数内部变量具有相同的作用域,当执行到var a = 10;的时候,a的值就为10了,所以输出10;(a=60被a=10给覆盖了)
第四、第五见上面的说明;

【第九个例子】

Object.prototype.a = '梦幻雪冰';
var a = '独行冰海';
(function f() {
alert(a);
})();

【结果】
输出:独行冰海
【解析】
JavaScript 变量的作用域 - 梦幻雪冰 - 梦幻雪冰
 
【第十个例子】

Object.a = "梦幻雪冰";
Object.prototype.a = '独行冰海';
window.a = "作用域";
(function f() {
alert(a);
})();

【结果】
输出:作用域
【解析】
JavaScript 变量的作用域 - 梦幻雪冰 - 梦幻雪冰
如果变量没有声明var,会认为是在window作用域中(顶级作用域),它会在里面寻找变量,如果没有才会一层一层的往上找。
 欢迎学习交流--梦幻雪冰


欢迎学习交流——梦幻雪冰独行冰海@font-face中iefix的详解 - 梦幻雪冰 - 梦幻雪冰
HTML5学堂贴吧——HTML5学堂
HTML5学堂微博——HTML5学堂
  评论这张
 
阅读(168)| 评论(7)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017