JavaScript变量的作用域和函数的作用域的区别
变量作用域和函数作用域都涉及到变量值的变化，本文旨在让大家明白他们之间的区别
变量的作用域：
变量的作用域无非就是两种：全局变量和局部变量。
Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。
var n=999;
function f1(){
console.log(n);
}
f1(); //
另一方面，在函数外部自然无法读取函数内的局部变量。
function f1(){
var n=999;
}
consolg.log(n); // error
这里有一个地方需要注意，函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！
function f1(){
n=999;
}
f1();
consolg.log(n); //
函数的作用域：
先看一小段代码：
var scope="global";
function t(){
console.log(scope);
var scope="local"
console.log(scope);
}
t();
第一句输出的是： "undefined"，而不是 "global"
第二讲输出的是："local"
你可能会认为第一句会输出："global",因为代码还没执行var scope="local",所以肯定会输出“global"。
我说这想法完全没错，只不过用错了对象。我们首先要区分Javascript的函数作用域与我们熟知的C/C++等的块级作用域。
在C/C++中，花括号内中的每一段代码都具有各自的作用域，而且变量在声明它们的代码段之外是不可见的。而Javascript压根没有块级作用域，而是函数作用域.
所谓函数作用域就是说：变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。
所以根据函数作用域的意思，可以将上述代码重写如下：
var scope="global";
function t(){
var scope;
console.log(scope);
scope="local"
console.log(scope);
}
t();
我们可以看到，由于函数作用域的特性，局部变量在整个函数体始终是有定义的，我们可以将变量声明”提前“到函数体顶部，同时变量初始化还在原来位置。
为什么说Js没有块级作用域呢，有以下代码为证：
var name="global";
if(true){
var name="local";
console.log(name)
}
console.log(name);
都输出是“local",如果有块级作用域，明显if语句将创建局部变量name,并不会修改全局name,可是没有这样，所以Js没有块级作用域。
现在很好理解为什么会得出那样的结果了。scope声明覆盖了全局的scope,但是还没有赋值，所以输出：”undefined“。
所以下面的代码也就很好理解了。
function t(flag){
if(flag){
var s="ifscope";
for(var i=0;i<2;i++)
;
}
console.log(i);
console.log(s);
}
t(true);
输出：2 ”ifscope"
作用域链：
先来看一段代码：
name="lwy";
function t(){
var name="tlwy";
function s(){
var name="slwy";
console.log(name);
}
function ss(){
console.log(name);
}
s();
ss();
}
t();
当执行s时，将创建函数s的执行环境(调用对象),并将该对象置于链表开头，然后将函数t的调用对象链接在之后，最后是全局对象。然后从链表开头寻找变量name,很明显
name是"slwy"。
但执行ss()时，作用域链是： ss()->t()->window,所以name是”tlwy"
下面看一个很容易犯错的例子：
<html>
<head>
<script type="text/javascript">
function buttonInit(){
for(var i=1;i<4;i++){
var b=document.getElementById("button"+i);
b.addEventListener("click",function(){ alert("Button"+i);},false);
}
}
window.onload=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html>
当文档加载完毕，给几个按钮注册点击事件，当我们点击按钮时，会弹出什么提示框呢？
很容易犯错，对是的，三个按钮都是弹出："Button4",你答对了吗？
当注册事件结束后，i的值为4，当点击按钮时，事件函数即function(){ alert("Button"+i);}这个匿名函数中没有i,根据作用域链，所以到buttonInit函数中找，此时i的值为4，
所以弹出”button4“。
with语句
说到作用域链，不得不说with语句。with语句主要用来临时扩展作用域链，将语句中的对象添加到作用域的头部。
看下面代码：
person={name:"yhb",age:22,height:175,wife:{name:"lwy",age:21}};
with(person.wife){
console.log(name);
}
with语句将person.wife添加到当前作用域链的头部，所以输出的就是：“lwy".
with语句结束后，作用域链恢复正常。
JavaScript变量的作用域和函数的作用域的区别的更多相关文章
- 前端笔记知识点整合之JavaScript（四）关于函数、作用域、闭包那点事
一.自定义函数function 函数就是功能.方法的封装.函数能够帮我们封装一段程序代码,这一段代码会具备某一项功能,函数在执行时,封装的这一段代码都会执行一次,实现某种功能.而且,函数可以多次调用. ...
- 前端笔记之JavaScript（四）关于函数、作用域、闭包那点事
一.自定义函数function 函数就是功能.方法的封装.函数能够帮我们封装一段程序代码,这一段代码会具备某一项功能,函数在执行时,封装的这一段代码都会执行一次,实现某种功能.而且,函数可以多次调用. ...
- javascript变量声明提升和函数声明提升
在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域.变量提升即将变量声明提升到它所在作用域的最开始的部分. JS的解析过程分为两个阶段:预 ...
- javascript 变量、常量 、 函数 声明
声明变量: 方式一: 使用 var 定义变量,可在定义的同时赋值 或 不赋值 . 方式二: 直接使用[变量名 = 值]的形式,这会定义一个全局变量,但在严格模式下会出现引用错误.[不建议使用] 方式三 ...
- JavaScript变量、数据类型、函数
#转载请留言联系 说在前面: JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定. JavaScript语句的末尾用 ; 结束.空格没有特殊意义. 1.JavaScr ...
- javascript 变量声明有var与无var 的区别
1.在函数作用域内 加var定义的变量是局部变量,不加var定义的就成了全局变量.使用var定义var a = 'hello World';function bb(){var a = 'hello B ...
- 【转】javascript变量作用域、匿名函数及闭包
下面这段话为摘抄,看到网上大多数人使用的是变量在使用的时候声明而不是在顶端声明,也可能考虑到js查找变量影响性能的问题,哪里用就在哪里声明,也很好. 在Javascript中,我们在写函数的时候往往需 ...
- [译]JavaScript:函数的作用域链
原文:http://blogs.msdn.com/b/jscript/archive/2007/07/26/scope-chain-of-jscript-functions.aspx 在JavaScr ...
- C语言中变量和函数的作用域和链接属性
C语言中变量和函数的作用域和链接属性 作用域 代码块作用域: 代码块指的是使用"{}"包围起来的部分. 在代码块中定义的变量,代码块之外是不能访问的. 代码块嵌套之后的变量作用域, ...
随机推荐
- iNeedle产品介绍
一.产品简介 1.产品背景 1.您曾经遇到过下面的问题和烦恼吗?2.当网站上线以后,如何实时的了解网站的运行状况?3.当网站访问速度慢,是升级服务器?还是升级带宽?还是优化网站代码?4.当网站新上线一 ...
- 删除myeclipse下svn用户名和密码
在不同的操作系统下,操作基本类似. 以win7为例 1.进入c:/Users/[你的用户名]/AppData/Roaming/Subversion/auth目录,删除该目录下的所有文件: 2.重启ec ...
- 十、Android学习第九天——小结（转）
(转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 十.Android学习第九天——小结 通过这段时间的学习,今晚上来做个小小 ...
- docker-5 docker仓库
docker部署环境:CentOS release 6.5 (Final) Docker配置文件:/etc/sysconfig/docker 重要参数解释: -H 表示Docker Daemon绑定 ...
- JavaScript为select添加option，select选项变化时的处理，获取slelect被选中的值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Android gdb 调试
[1].终端目录设置到: proj.android[2].make文件的编译选项加上: -g -gstabs+[3].执行编译脚本: sh ./build_native.sh NDK_DEBUG=1[ ...
- 【转】在Android布局中使用include和merge标签
内容转自:http://fengweipeng1208.blog.163.com/blog/static/21277318020138229754135/ 在我们开发android布局时,经常会有很多 ...
- cvBox2D和RotatedRect中返回的角度angle详解
本文为作者原创,未经允许不得转载: 原文由作者发表在博客园: http://www.cnblogs.com/panxiaochun/p/5478555.html 关于cvBox2D和RotatedRe ...
- 扩展Unity的方法
写更少代码的需求 当我们重复写一些繁杂的代码,或C#的一些方法,我们就想能不能有更便捷的方法呢?当然在unity中,我们对它进行扩展. 对unity的类或C#的类进行扩展有以下两点要注意: 1.这个类 ...
- OpenSessionInview
Open Session In View模式的主要思想是:在用户的每一次请求过程始终保持一个Session对象打开着 实现步骤: 步骤一.创建一个Web项目,创建包cn.happy.util,创建Hi ...