本文是根据以下文章以及《Javascript高级程序设计(第三版)》第四章相关内容总结的。

1、Javascript作用域原理,地址:http://www.laruence.com/2009/05/28/863.html

2、JavaScript 开发进阶:理解 JavaScript 作用域和作用域链,地址:http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html

在介绍有关作用域的内容之前,先来介绍一下Javascript中的预编译。

Javascript中的预编译

这里说的Javascript中的预编译,就是指函数声明提升和变量提升。

在JS引擎执行每一段(在html页面中,一个script元素就是一段)JS代码之前,都会首先处理var关键字和函数定义式。

先说函数定义式,有两种,一种函数声明,一种函数表达式:

 <script>
alert(func);//function func() {alert('something');}
alert(thank);//undefined
//这是一个函数声明
function func() {
alert('something');
} //这是一个函数表达式
var thank = function() {
alert('nothing');
};
</script>

alert语句都在两个函数定义式前面,alert(func);这一句输出了完整的func函数,alert(thank);输出undefined,说明函数声明被提升了,函数表达式没有被提升,这就是两者的区别。至于为什么,下面继续说变量提升。

变量有全局变量和局部变量,不管是哪种变量都会被提升,但提升的高度不一样。全局变量提升到全局的执行环境(这里的执行环境可以理解成作用域,活动对象,还可以理解成变量对像,都一个意思,包括下面也是)中,局部变量提升到局部的执行环境中。在变量被提升后他是没有值的,即为undefined,仅仅是一个名字,只有当代码执行到给变量赋值的语句时,它才真正有了值。

对于局部变量的提升是这么一个过程,这个过程是函数作用域链创建过程中的一部分:函数在调用,但是其中代码还没有执行之前,首先会创建一个活动对象,然后搜寻这个函数中的局部变量定义和函数定义,将变量名和函数名都作为这个活动对象的同名属性。对于局部变量定义,变量的值会在真正执行到赋值语句时才会计算,此时只是简单的赋值为undefined。

不使用var关键词和直接在全局环境中声明的变量都是全局变量,全局变量会被提升到全局的window活动对象中,但此时这些变量也是没有值的,只有执行到赋值语句时,它们的值才会被计算。

此时就可以解释为什么函数表达式没有被提升了。函数表达式是把一个匿名函数赋值给一个变量,实际上是把那个变量提升了,变量提升之后它的值为undefined。

JavaScript的作用域

《Javascript高级程序设计(第三版)》第四章中在引出作用域内容前先介绍了一个执行环境的概念,然后又说变量对像,然后又是活动对象。说了一大堆把人都绕晕了。我的理解是把执行环境就理解成作用域,作用域还不够具体,把它具体到代码层面,它就是一个对象,给这个对象起个名字叫变量对象,执行环境中的所有变量声明和函数声明都是这个变量对象的同名属性。执行环境有全局和局部之分,那么这个变量对象也有全局与局部之分,把这些全局的和局部的变量对象按照顺序排列起来就形成了作用域链,作用域链的最前端就是上文讲的函数调用时创建的那个活动对象,这个活动对象也是一个变量对象。

函数的作用域链在其声明的时候就已经开始创建了,而不是被调用的时候才开始的。

具体过程是:

当一个函数创建后,它的内部属性[[Scope]]会指向创建此函数的那个执行环境的变量对象,并把这个变量对象添加到其作用域链中。(函数的的内部属性[[Scope]]会最终指向全局环境window的变量对象,换句话说,全局对象的变量对象始终是作用域链的最后一个对象。)

当这个函数被调用时,会创建一个“运行期上下文(execution context)”,运行期上下文定义了函数执行时的环境,与这个环境相对应的是一个活动对象,该活动对象包含了函数的所有局部变量、命名参数、参数集合(arguments)以及this,然后此对象会被推入作用域链的前端,当运行期上下文被销毁,活动对象也随之销毁。

下面通过例子分析作用域链。

 <script>
var a = 1;
function func() {
var b = 2;
function test() {
var c = b;
b = a;
a = c;
}
test();
}
func();
alert(a);//
</script>

当函数func创建完成时,他的作用域链:

[[scope chain]] = [
{
window call object
}
]

当函数func调用时,他的作用域链:

[[scope chain]] = [
{
b: undefined,
test: function test() {
var c = b;
b = a;
a = c;
}
},
{
a: 1
}
]

当test函数创建时,他的作用域链:

[[scope chain]] = [
{
b: undefined,
test: function test() {
var c = b;
b = a;
a = c;
}
},
{
   a: 1
} ]

当test函数调用时,他的作用域链:

[[scope chain]] = [
{
c: undefined
},
{
b: 2,
test: function test() {
var c = b;
b = a;
a = c;
}
},
{
a: 1
}
]

不知道这个例子的作用域链分析的正确不正确,如有不正确请看到的大侠们批评指正。

理解了函数声明提升和变量声明提升,以及知道作用域链的创建过程,对于理解JavaScript中函数的作用域有很大帮助,反正我是这么觉得。

补充:

今天看了一天的闭包。

我的理解,实际上闭包还是和作用域及作用域链密切相关的,真正理解了作用域链,理解闭包就不是问题。

举个闭包的例子(是司徒正美大触《javascript的闭包》中的例子),并用作用域链分析它。

引子例子

 <body>
<ul>
<li id="a1">aa</li>
<li id="a2">aa</li>
<li id="a3">aa</li>
</ul>
<script type="text/javascript">
for(var i=1; i < 4; i++){
var id = document.getElementById("a" + i);
id.onclick = function(){
alert(i);//现在都是返回4
}
}
</script> </body>

这个例子的代码执行完毕后,会给每个li元素添加鼠标点击事件(注意只是添加了事件,事件还没有触发,alert语句就没有执行)。点击页面中的3个li元素,触发事件都会输出相同的数字4。

事件添加完成后,事件函数的作用域链(全局作用域的变量对象):

  [[scope chain]] = [
{
i: 4,
id: element node//id为a3的li节点
}
]

事件函数执行时,他的作用域链:

  [[scope chain]] = [
{
this
},
{
i: 4,
id: element node//id为a3的li节点
}
]

点击事件触发时,事件函数在其作用域链中查找i的值并输出,此时就查到i的值为4。

下面使用闭包使输出的值是li元素的序号。

真正的闭包例子

  <ul>
<li id="a1">aa</li>
<li id="a2">aa</li>
<li id="a3">aa</li>
</ul>
<script type="text/javascript">
var lists = document.getElementsByTagName("li");
for(var i=0,l=lists.length; i < l; i++){
lists[i].onclick = (function(i){//保存于外部函函数
return function(){
alert(i+1);
}
})(i);
}
</script> </body>

用上面的代码,点击li元素时会输出其序号,而不再是一样的值。

这次给li元素添加的事件函数是从一个函数中返回的函数。

这说着有一点麻烦,给onclick后边那个立即执行的函数起个名字,就叫立即执行函数,先分析一下他的作用域链。

在立即执行函数没有执行时,其作用域链:

 [[scope chain]] = [
//这个变量对象是全局环境的
{
lists: nodeLists,//节点数组
i: 0
}
]

当它执行的时候:

 [[scope chain]] = [
//这个变量对象是他自己的活动对象
{
arguments//这里面有参数i
},
//这个变量对象是全局环境的
{
lists: nodeLists,//节点数组
i: 0
}
]

上面的过程发生了三次,每次立即执行函数的作用域链中的i值都不一样,这三条作用域链都保存在内存中,为了给他返回的内部函数在执行时调用。

假如我点击了第一个li元素,就触发事件,事件函数就要执行,此时事件函数的作用域链:

 [[scope chain]] = [
//事件函数的活动对象
{
this
},
//立即执行函数的变量对象
{
i: 0
},
//这个变量对象是全局环境的
{
lists: nodeLists,//节点数组
i: 0
}
]

事件函数顺着他的作用域链查找i的值,此时i的值为0,输出时再加上1,最后输出1。

就这样吧,上面的内容就是我关于作用域链及闭包的理解,如有错误,请看到的大侠指正。

10月6号补充:

先加一个链接:艾伦的文章《执行环境,作用域》 http://www.cnblogs.com/aaronjs/articles/2167431.html

《Javascript高级程序设计(第三版)》第四章相关内容要与第七章闭包配合着看。

关于this,书上说,“this对象是在运行时基于函数的执行环境绑定的。”“每个函数在被调用时都会自动取得两个特殊变量:this和arguments。内部函数在搜索这两个变量时,只会搜索到其活动对象为止,因此永远不可能直接访问外部函数中的这两个变量。”(可以通过复制,间接访问)

根据上面这两句话,我的理解是:

函数作用域链的最前端,即该函数的活动对象,不管你怎么自定义,系统(浏览器也行,就是个名字,表示至高无上)默认他有两个变量this和arguments,他俩的值也是系统根据你的代码自己分配的,可能有时候你不明白系统的分配原则,导致你不理解为什么输出结果会和自己预想的不一样。

 var a = 'ok';
var obj = {
a: 'no',
name: 'jack',
say: function(){
var that = this;
return function() {
return this.a + that.name + that.a + a; }; }
};
var b = obj.say();
console.log(b());//okjacknook
 var a = 'ok';
var obj = {
a: 'no',
name: 'jack',
say: function(){
var that = this;
var a = 'nimei';
return function() {
return this.a + that.name + that.a + a;
};
}
};
var b = obj.say();
console.log(b());//okjacknonimei

再补充一个例子:

 var a = 'ok';
var obj = {
a: 'no',
name: 'jack',
say: function(){
var that = this;
var a = 'nimei';
function test() {
return this.a + that.name + that.a + a;
}
var b = test();
return b;
}
};
console.log(obj.say());//okjacknonimei var m = 'tubie';
function func() {
var m = 'sb';
function two() {
alert(this.m);
}
two(); }
func();//tubie

根据上面的例子,我得出的结论:抛开把this保存在变量中、使用apply方法以及call方法,不管是在全局环境中还是在局部环境(比如另一个函数内),func(); 这种直接调用函数的方式,其活动对象中的this都指向window。

关于Javascript作用域及作用域链的总结的更多相关文章

  1. 深入理解 JavaScript 变量的作用域和作用域链

    一个变量的作用域(scope)是程序源代码中定义这个变量的区域.简单的说,作用域就是变量与函数的可访问范围.全局变量拥有全局作用域,在JavaScript代码中的任何地方都有定义.局部变量是在函数体内 ...

  2. 一步步学习javascript基础篇(2):作用域和作用域链

    作用域和作用域链 js的语法用法非常的灵活,且稍不注意就踩坑.这集来分析下作用域和作用域链.我们且从几道题目入手,您可以试着在心里猜想着答案. 问题一. if (true) { var str = & ...

  3. javascript篇-----函数作用域,函数作用域链和声明提前

    在一些类似C语言的编程语言中,花括号内的每一段代码都具有各自的作用域,而且变量在声明它们的代码段之外是不可见的(也就是我们不能在代码段外直接访问代码段内声明的变量),我们称之为块级作用域,然而,不同于 ...

  4. javascript笔记:javascript的关键所在---作用域链

    javascript里的作用域是理解javascript语言的关键所在,正确使用作用域原理才能写出高效的javascript代码,很多javascript技巧也是围绕作用域进行的,今天我要总结一下关于 ...

  5. 浅谈JavaScript中的变量、参数、作用域和作用域链

    基本类型和引用类型 在JavaScript中有两种数据类型值.基本类型值和引用类型值.基本类型值指的是简单的数据段,而引用类型值指的是可能由多个值构成的对象.在JavaScript中有5种基本数据类型 ...

  6. javascript作用域和作用域链摘录

    作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望 ...

  7. JavaScript高级之词法作用域和作用域链

    主要内容: 分析JavaScript的词法作用域的含义 解析变量的作用域链 变量名提升时什么 一.关于块级作用域         说到JavaScript的变量作用域,与咱们平时使用的类C语言不同. ...

  8. JavaScript 开发进阶:理解 JavaScript 作用域和作用域链

    作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望 ...

  9. JavaScript 开发进阶:理解 JavaScript 作用域和作用域链(转载 学习中。。。)

    作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望 ...

随机推荐

  1. SQL语句经典大全

    一.基础 1.说明:创建数据库 CREATE DATABASE database-name  2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- ...

  2. 学习笔记——SQLite介绍

    简介:Google为android的较大数据的处理提供了SQLlite, 他在数据存储.管理.维护.等各方面都相当出色功能也非常强大. 1.创建数据库 Android 为了让我们能够更加方便地管理数据 ...

  3. Ubantu 下安装 tensorflow

    # 在 Linux 上: $ sudo apt-get install python-pip python-dev python-virtualenv $ virtualenv --system-si ...

  4. 个人查阅资料-Sql语句

    SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT,DELETE,UPDATE,INSERT) DCL—数据控制语言(GRAN ...

  5. Linux新手扫盲(转载)

    一. Linux特点 1.免费/开源: 2.支持多线程/多用户: 3.安全性好: 4.对内存和文件管理优越. Linux最小只需4M ——> 嵌入式开发 二. 文件目录 Linux系统所有软硬件 ...

  6. MySQL 提高Insert性能

    插入一个记录需要的时间由下列因素组成,其中的数字表示大约比例: 连接:(3) 发送查询给服务器:(2) 分析查询:(2) 插入记录:(1x记录大小) 插入索引:(1x索引) 关闭:(1) 这不考虑打开 ...

  7. Jenkins常用插件说明(持续更新)

    本文主要记录在学习以及使用Jenkins过程中常用的对我们有帮助的插件,同时本文将会持续进行更新.如果大家发现有其他野很好用的插件,也欢迎参照下面的格式,在评论中进行回复反馈. 一.通用插件 1.Em ...

  8. 【PRINCE2是什么】PRINCE2认证之七大原则

    经过前几讲中关于PRINCE2六大要素,四大步骤及整体思维架构的学习,相信各位看官已经对于PRINCE2有了大概的了解,那我们今天的学习内容会正式进入到七大原则内容的分享. 我们先来回顾一下,PRIN ...

  9. salesforce 零基础学习(五十二)Trigger使用篇(二)

    第十七篇的Trigger用法为通过Handler方式实现Trigger的封装,此种好处是一个Handler对应一个sObject,使本该在Trigger中写的代码分到Handler中,代码更加清晰. ...

  10. iOS-常见问题

    11.21常见问题 一storyboard连线问题 产生原因:将与storyboard关联的属性删除了,但是storyboard中还保持之前所关联的属性. 解决: 点击view controller ...