JavaScript词法作用域与调用对象

关于 Javascript 的函数作用域、调用对象和闭包之间的关系很微妙,关于它们的文章已经有很多,但不知道为什么很多新手都难以理解。我就尝试用比较通俗的语言来表达我自己的理解吧。

作用域 Scope

Javascript 中的函数属于词法作用域,也就是说函数在它被定义时的作用域中运行而不是在被执行时的作用域内运行。这是犀牛书上的说法。但"定义时"和"执行(被调用)时"这两个东西有些人搞不清楚。简单来说,一个函数A在"定义时"就是 function A(){} 这个语句执行的时候就是定义这个函数的时候,而A被调用的时候是 A() 这个语句执行的时候。这两个概念一定要分清楚。句容市鄂茂钢铁

那词法作用域(以下称之为"作用域",除非特别指明)到底是什么呢?它是个抽象的概念,说白了它就是一个"范围",scope 在英文里就是范围的意思。一个函数的作用域是它被定义时它所处的"范围",也就是它外层的"范围",这个"范围"包含了外层的变量属性,这个"范围"被设置成这个函数的一个内部状态。一个全局函数被定义的时候,全局(这个函数的外层)的"范围"就被设置成这个全局函数的一个内部状态。一个嵌套函数被定义的时候,被嵌套函数(外层函数)的"范围"就被设置成这个嵌套函数的一个内部状态。这个"内部状态"实际上可以理解成作用域链,见下文。

照以上说法,一个函数的作用域是它被定义的时候所处的"范围",那么 Javascript 里的函数作用域是在函数被定义的时候就确定了,所以它是静态的作用域,词法作用域又称为静态作用域。

调用对象 Call Object

一个函数的调用对象是动态的,它是在这个函数被调用时才被实例化的。我们已经知道,当一个函数被定义的时候,已经确定了它的作用域链。当 Javascript 解释器调用一个函数的时候,它会添加一个新的对象(调用对象)到这个作用域链的前面。这个调用对象的一个属性被初始化成一个名叫 arguments 的属性,它引用了这个函数的 Arguments 对象,Arguments 对象是函数的实际参数。所有用 var 语句声明的本地变量也被定义在这个调用对象里。这个时候,调用对象处在作用域链的头部,本地变量、函数形式参数和 Arguments 对象全部都在这个函数的范围里了。当然,这个时候本地变量、函数形式参数和 Arguments 对象就覆盖了作用域链里同名的属性。

作用域、作用域链和调用对象之间的关系

我的理解是,作用域是是抽象的,而调用对象是实例化的。

在函数被定义的时候,实际上也是它外层函数执行的时候,它确定的作用域链实际上是它外层函数的调用对象链;当函数被调用时,它的作用域链是根据定义的时候确定的作用域链(它外层函数的调用对象链)加上一个实例化的调用对象。所以函数的作用域链实际上是调用对象链。在一个函数被调用的时候,它的作用域链(或者称调用对象链)实际上是它在被定义的时候确定的作用域链的一个超集。

它们之间的关系可以表示成:作用域?作用域链?调用对象。

太绕口了,举例说明吧:

function f(x) {
    var g = function () { return x; }
    return g;
}
var g1 = f(1);
alert(g1());  //输出 1

假设我们把全局看成类似以下这样的一个大匿名函数:

(function() {
    //这里是全局范围
})();

那么例子就可以看成是:

(function() {
    function f(x) {
        var g = function () { return x; }
        return g;
    }
    var g1 = f(1);
    alert(g1());  //输出 1
})();
  1. 全局的大匿名函数被定义的时候,它没有外层,所以它的作用域链是空的。
  2. 全局的大匿名函数直接被执行,全局的作用域链里只有一个 ‘全局调用对象‘。
  3. 函数 f 被定义,此时函数 f 的作用域链是它外层的作用域链,即 ‘全局调用对象‘。
  4. 函数 f(1) 被执行,它的作用域链是新的 f(1) 调用对象加上函数 f 被定义的时候的作用域链,即 ‘f(1) 调用对象->全局调用对象‘。
  5. 函数 g (它要被返回给 g1,就命名为 g1吧)在 f(1) 中被定义,它的作用域链是它外层的函数 f(1) 的作用域链,即 ‘f(1) 调用对象->全局调用对象‘。
  6. 函数 f(1) 返回函数 g 的定义给 g1。
  7. 函数 g1 被执行,它的作用域链是新的 g(1) 调用对象加上外层 f(1) 的作用域链,即 ‘g1 调用对象->f(1)调用对象->全局调用对象‘。

这样看就很清楚了吧。

闭包 Closuer

闭包的一个简单的说法是,当嵌套函数在被嵌套函数之外调用的时候,就形成了闭包。

之前的那个例子其实就是一个闭包。g1 是在 f(1) 内部定义的,却在 f(1) 返回后才被执行。可以看出,闭包的一个效果就是被嵌套函数 f 返回后,它内部的资源不会被释放。在外部调用 g 函数时,g 可以访问 f 的内部变量。根据这个特性,可以写出很多优雅的代码。

例如要在一个页面上作一个统一的计数器,如果用闭包的写法,可以这么写:

var counter  = (function() {
    var i = 0;
    var fns = {"get": function() {return i;},
               "inc": function() {return ++i;}};
    return fns;
})();
//do something
counter.inc();
//do something else
counter.inc();
var c_value = counter.get();  //now c_value is 2

这样,在内存中就维持了一个变量 i,整个程序中的其它地方都无法直接操作 i 的值,只能通过 counter 的两个操作。

在 setTimeout(fn, delay) 的时候,我们不能给 fn 这个函数句柄传参数,但可以通过闭包的方法把需要的参数绑定到 fn 内部。

for(var i=0,delay=1000; i< 5; i++, delay +=1000) {
    setTimeout(function() {
        console.log(‘i:‘ + i + " delay:" + delay);
    }, delay);
}

这样,打印出来的值都是

i:5 delay:6000
i:5 delay:6000
i:5 delay:6000
i:5 delay:6000
i:5 delay:6000

改用闭包的方式可以很容易绑定要传进去的参数:

for(var i=0, delay=1000; i < 5; i++, delay += 1000) {
    (function(a, _delay) {
        setTimeout(function() {
            console.log(‘i:‘+a+" delay:"+_delay);
        }, _delay);
    })(i, delay);
}

输出:

i:0 delay:1000
i:1 delay:2000
i:2 delay:3000
i:3 delay:4000
i:4 delay:5000

闭包还有一个很常用的地方,就是在绑定事件的回调函数的时候。也是同样的道理,绑定的函数句柄不能做参数,但可以通过闭包的形式把参数绑定进去。

总结

  1. 函数的词法作用域和作用域链是不同的东西,词法作用域是抽象概念,作用域链是实例化的调用对象链。
  2. 函数在被定义的时候,同时也是它外层的函数在被执行的时候。
  3. 函数在被定义的时候它的词法作用域就已经确定了,但它仍然是抽象的概念,没有也不能被实例化。
  4. 函数在被定义的时候还确定了一个东西,就是它外层函数的作用域链,这个是实例化的东西。
  5. 函数在被多次调用的时候,它的作用域链都是不同的。
  6. 闭包很强大。犀牛书说得对,理解了这些东西,你就可以自称是高级 Javascript 程序员了。因为利用好这些概念,可以玩转 Javascript 的很多设计模式。
时间: 2024-08-02 05:03:56

JavaScript词法作用域与调用对象的相关文章

[label][JavaScript]读nowmagic - js词法作用域、调用对象与闭包

原文链接:                 http://www.nowamagic.net/librarys/veda/detail/1305 作用域(scope) JavaScript 中的函数属于词法作用域,也就是说函数在它被“定义时”的作用域中运行,而不是在“被执行时”的作用域内运行. 什么是“定义时”? 什么是 “被执行时”? 定义时: 一个函数A在“定义时”就是 function A() { }这个语句执行的时候,就是定义这个函数的时候. 被执行时: A“被执行时”(被调用的时侯)是

JavaScript的作用域和变量对象

变量对象 先来说说什么是变量对象.变量对象中又存储了什么东西吧. JavaScript中的运行环境包含全局运行环境和函数运行环境这两种,每进入到一个运行环境都会创建一个变量对象,这个对象中记录了在当前运行环境中能够訪问到的变量,它们以变量对象的属性形式存在.也就是说这个变量对象成为"作用域"这个抽象概念的实体. 同一时候,变量对象中的属性记录是有一定先后顺序的.而且属性值究竟是实际的值还是undefined也是分阶段的(进入上下文(函数開始调用,但还未运行内部的详细代码).运行代码阶段

JavaScript词法作用域(你不知道的JavaScript)

JavaScript并不是传统的块级作用域,而是函数作用域! 一.作用域 1. JavaScript引擎在代码执行前会对其进行编译,在这个过程中,像var a = 2 这样的声明会被分解成两个独立的步骤: 第一步(编译阶段):var a 在其作用域中声明新变量.这会在最开始的阶段,也就是代码执行前进行. 第二步(运行阶段):a = 2 会查询变量a(LHS查询)并对其进行赋值. 2. LHS & RHS(当前作用域->上级作用域->...->全局作用域) LHS(左侧):试图找到

利用eval()来“欺骗”JavaScript词法作用域

我们知道,所谓"词法作用域"就是按照代码书写时的样子内部函数可以访问函数外部的变量,如果函数外存在函数内所具有的同名变量,则函数内部要获取该同名变量的值会屏蔽掉函数外的同名变量(本来就是两个不同的变量,只是同名而已.另外注意,在同一个作用域是同一个变量,所以不要重复声明,否则第二个声明会被忽略). 利用eval()可以"欺骗"词法作用域: function foo(str){ eval(str); console.log(a); } var a=100; foo(&

JavaScript词法作用域经典练习题

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //1 ==================================================== var a; if ('a

JavaScript函数之实际参数对象(arguments) / callee属性 / caller属性 / 递归调用 / 获取函数名称的方法

函数的作用域:调用对象 JavaScript中函数的主体是在局部作用域中执行的,该作用域不同于全局作用域.这个新的作用域是通过将调用对象添加到作用域链的头部而创建的(没怎么理解这句话,有理解的亲可以留言告诉我, 谢谢).因为调用对象是作用域链的一部分,所以在函数体内可以把这个对象属性作为变量来访问. 调用对象的属性包括:用var声明的局部变量,函数形参,还有一种特殊的属性arguments 函数的实际参数:实际参数对象 arguments对象,用来引用实际参数对象.函数的arguments对象并

javascript一个作用域案例分析

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> // 词法作用域: // 在js中只有函数能够形成一个作用域, 所以, 词

你不知道的Javascript(上卷)读书笔记之二 ---- 词法作用域

在前一篇文章中,我们把作用域定义为"管理.维护变量的一套规则",接下来是时候来深入讨论一下Js的作用域问题了,首先我们要知道作用域一般有两种主要的工作类型,一种是词法作用域,一种是动态作用域, Javascript采用的是词法作用域, 关于动态作用域的有兴趣的可以自行Google. 1.词法阶段 首先我们要理解"词法阶段"这个词语,我们已经了解到Js存在一个编译阶段,编译阶段的第一步就是分词/词法分析,我们可以简称为"词法阶段" 简单来说,词法作

深入理解javascript作用域系列第二篇——词法作用域和动态作用域

× 目录 [1]词法 [2]动态 前面的话 大多数时候,我们对作用域产生混乱的主要原因是分不清楚应该按照函数位置的嵌套顺序,还是按照函数的调用顺序进行变量查找.再加上this机制的干扰,使得变量查找极易出错.这实际上是由两种作用域工作模型导致的,作用域分为词法作用域和动态作用域,分清这两种作用域模型就能够对变量查找过程有清晰的认识.本文是深入理解javascript作用域系列第二篇——词法作用域和动态作用域 词法作用域 第一篇介绍过,编译器的第一个工作阶段叫作分词,就是把由字符组成的字符串分解成