先上三段说明作用域的代码
function fn(){
alert(scope);
var scope='local';
alert(scope);
}
fn(); //输出结果?
alert(scope);//输出结果?
//===========例2==========
var scope='global';
function fn(){
alert(scope);
scope='local';
alert(scope);
}
fn(); //输出结果?
alert(scope);//输出结果?
//===========例3=========
var scope='global';
function fn(scope){
alert(scope);
scope='local';
alert(scope);
}
fn(); //输出结果?
alert(scope);//输出结果?
这三段代码只有小许差异,但结果缺截然不同,例1分别输出[undefined,local,global],例2分别输出[global,local],例3结果输出[undefined,global],如果不能答对说明你对javascript的作用域特性还未理解透彻。
什么是作用域?
也许有人会问:变量a的作用域是什么?一会儿又问:函数a的作用域是什么?变量和函数的作用域分别是啥玩意?
我们先来看看“作用域”是什么意思,“作用域”拆开来就是“作用”和“域”
- 作用:访问、操作、调用……
- 域:区域、范围、空间……
作用域就是变量和函数的可访问范围,或者说变量或函数起作用的区域。
1.javascript函数的作用域:
函数内的区域,就是这个函数的作用域,变量和函数在这个区域都可以访问操作。最外层函数外的区域叫全局作用域,函数内的区域叫局部作用域。
2.javascript变量的作用域:
在源代码中变量所在的区域,就是这个变量的作用域,变量在这个区域内可以被访问操作。在全局作用域上定义的变量叫全局变量,在函数内定义的变量叫局部变量。
简单地理解,JS源代码被函数{ }划分成一块一块的区域,这些区域换个身份就是某函数或某变量的作用域,变量的作用域和函数的作用域在源代码中有可能指的是同一块区域。
作用域链
作用域链(Scope Chain)是javascript内部中一种变量、函数查找机制,它决定了变量和函数的作用范围,即作用域,理解作用域链的作用原理,上一篇文章的三个例子也就能理解了,从而知其然也知其所以然。作用域链是ECMAScript-262说明文档中的概念,javascript引擎是按ECMAScript-262说明文档去实现的,了解javascript引擎的工作原理有利于我们理解javascript的特性,但绝大多数js程序员不会去了解非常底层的技术,所以阅读ECMAScript-262说明文档,我们可以有一个直观的方式去模拟javascript引擎的工作原理。
本文将通过1999年的ECMAScript-262-3th第三版来说明作用域链的形成原理,将会介绍执行环境,变量对象和活动对象,arguments对象,作用域链等几个概念。2009年发布了ECMAScript-262-5th第五版,不同的是取消了变量对象和活动对象等概念,引入了词法环境(Lexical Environments)、环境记录(EnviromentRecord)等新的概念,所以两个版本的概念不要混淆了。
1.执行环境(Execution Contexts)
执行环境(Execution Contexts)也被翻译为执行上下文,当解析器进入ECMAScript的可执行代码,解析器就进入一个执行环境,活动的执行环境组成一个逻辑上的栈,在这个逻辑栈顶部的执行环境是当前运行的执行环境。
注:ECMAScript中有三种可执行代码,Global、Function和Eval,全局环境即是Global可执行代码,函数即是Function可执行代码。逻辑栈是一种特殊的数据存储格式,特点是‘先进后出,后进先出',添加数据会先压入逻辑栈顶部,删除数据必须先从顶部开始删除。
变量对象(Variable Object)、活动对象(Activation Object)和Arguments对象(Arguments Object)
每个执行环境都有一个与之关联的变量对象,当解析器进入执行环境时,就会创建一个变量对象,变量对象保存着在当前执行环境中声明的变量和函数的引用。
变量对象是一个抽象的概念,在不同的执行环境中,变量对象有不同的身份,在解析器进入任何执行环境之前,就已经创建了一个Global对象,当解析器进入全局执行环境时,Global对象就充当变量对象,当解析器进入一个函数时,就会创建一个活动对象充当变量对象。
2.解析器处理代码时的两个阶段
我们都知道javascript解析器是一段一段解析处理代码的,为毛?这就要涉及解析器处理代码时的两个阶段,解析代码和执行代码。
当解析器进入执行环境时,变量对象就会添加执行环境中声明的变量和函数作为它的属性,这就意味着变量和函数在声明之前已经可用,变量值为undefined,这就是变量和函数声明提升(Hoisting)的原因,与此同时作用域链和this确定,此过程为解析阶段,俗称预解析。接着解析器开始执行代码,为变量添加相应值的引用,得到执行结果,此过程为执行阶段。
举两个好吃的栗子:
上述全局环境中的代码解析执行后,会将Global对象作为变量对象,保存以下数据。
<div class="jb51code">
<pre class="brush:js;">
function testFn(a){
var b="123";
function c(){
alert("abc");
}
}
testFn(10);