关于JS里的函数作用域链的总结

  在JavaScript中,函数的作用域链是一个很难理解的东西。这是因为JavaScript中函数的作用域链和其他语言比如C、C++中函数的作用域链相差甚远。本文详细解释了JavaScript中与函数的作用域链相关的知识,理解这些知识可以帮助你在处理闭包的时候避免一些可能出现的问题。

  在JavaScript中,函数可以让你在一次调用中执行一系列的操作。有多种方式来定义一个函数,如下:

1、函数声明:

function maximum(x, y) {
    if (x > y) return x;
    else return y;
}

maximum(5, 6) //返回6;

  这种语法通常用来定义全局作用域下的函数(全局函数)

2、函数表达式:

var obj = new Object();
obj.maximum = function (x, y) {
    if (x > y) return x;
    else return y;
};

obj.maximum(5, 6) //返回6;

  这种语法通常用来定义一个作为对象方法的函数

3、Function构造函数:

var maximum = new Function("x", "y", "if(x > y) return x; else return y;");
maximum(5, 6); //返回6;

  以这种形式定义函数通常没有很好的可读性(没有缩进),只在特定情况下使用。

函数定义:

  函数定义指的是在JavaScript引擎内部创建一个函数对象的过程。

  如果是全局函数的话,这个函数对象会作为属性添加到全局对象上;

  如果是内部函数(嵌套函数)的话,该函数对象会作为属性添加到上层函数的活动对象上,属性名就是函数名。需要指出的是,如果函数是以函数声明的方式定义的,则函数的定义操作会发生在脚本解析的时候。

  如下例中当JavaScript引擎完成脚本解析时,就已经创建了一个函数对象func,该函数对象作为属性添加到了全局对象中,属性名为"func"。

/*func函数可以被访问到,因为在脚本开始执行前func函数就已经存在了.*/
alert(func(2)); //返回8

//执行该语句会覆盖func的值为true.
var func = true;

alert(func); //返回"true";

/*在脚本开始执行前,解析下面的语句就会定义一个函数对象func.*/
function func(x) {
    return x * x * x;
}

  在下面的例子中,存在内部函数的情况。内部函数innerFn的定义操作发生在外部函数outerFn执行的时候(其实也是发生在执行前的解析阶段),同时,内部函数会作为属性添加到外部函数的活动对象上。

function outerFn() {
    function innerFn() {}
}
outerFn(); //执行outerFn函数的时候会定义一个函数innerFn

  注意:对于使用Function构造函数定义的函数来说,函数定义操作就发生在执行Function构造函数的时候。

作用域链:

  函数的作用域链是由一系列对象(函数的活动对象+0个到多个的上层函数的活动对象+最后的全局对象)组成的。

  在函数执行的时候,会按照先后顺序从这些对象的属性中寻找函数体中用到的标识符的值(标识符解析),函数会在定义时将它们各自所处环境(全局上下文或者函数上下文)的作用域链存储到自身的[[scope]]内部属性中。

  首先看一个内部函数的例子:

function outerFn(i) {
    return function innerFn() {
        return i;
    }
}
var innerFn = outerFn(4);
innerFn(); //返回4

  当innerFn函数执行时,成功返回了变量i的值4,但变量i既不存在于innerFn函数自身的局部变量中,也不存在于全局作用域中,那么变量i的值是从哪儿得到的?你也许认为内部函数innerFn的作用域链是由innerFn函数的活动对象+全局对象组成的,但这是不对的,只有全局函数的作用域链包含两个对象,这并不适用于内部函数。让我们先分析全局函数,然后再分析内部函数。

全局函数:

  全局函数的作用域链很好理解。

var x = 10;
var y = 0;

function testFn(i) {
    var x = true;
    y = y + 1;
    alert(i);
}
testFn(10);

  全局对象:JavaScript引擎在脚本开始执行之前就会创建全局对象,并添加到一些预定义的属性"Infinity"、"Math"等。在脚本中定义的全局变量也会成为全局对象的属性。

  活动对象:当JavaScript引擎调用一些函数时,该函数会创建一个新的活动对象,所有在函数内部定义的局部变量以及传入函数的命名参数和arguments对象都会作为这个活动对象的属性。这个活动对象加上该函数的[[scope]]内部属性中存储的作用域链就组成了本次函数调用的作用域链。

内部函数:

  让我们分析一下下面的JavaScript代码。

function outerFn(i, j) {
    var x = i + j;
    return function innerFn(x) {
        return i + x;
    }
}
var func1 = outerFn(5, 6);
var func2 = outerFn(10, 20);
alert(func1(10)); //返回15
alert(func2(10)); //返回20

  在调用func1(10)和func2(10)时,你引用到了两个不同的i 。这是怎么回事?首先看下面的语句:

var func1 = outerFn(5,6);

  调用outerFn (5, 6)的时候定义了一个新的函数对象innerFn,然后该函数对象成为了outerFn函数的活动对象的一个属性。这时innerFn的作用域链是由outerFn的活动对象和全局对象组成的,这个作用域链存储在了innerFn函数的内部属性[[scope]]中,然后返回了该函数,变量func1就指向了这个innerFn函数。

alert(func1(10));//返回15

  在func1被调用时,它自身的活动对象被创建,然后添加到了[[scope]]中存储着的作用域链的最前方(新的作用域链,并不会改变[[scope]]中存储着的那个作用域链),这时的作用域链才是func1函数执行时用到的作用域链。从这个作用域链中,你可以看到变量‘i’的值实际上就是在执行outerFn(5,6)时产生的活动对象的属性i的值。

  现在让我们回到问题,"在调用func1(10)和func2(10)时,你引用到了两个不同的i 。这是怎么回事?"。

  答案就是在定义func1和func2时,函数outerFn中产生过两个不同的活动对象。

  现在又出现了一个问题, 一个活动对象在函数执行的时候创建,但在函数执行完毕返回的时候不会被销毁吗? 我用下面的三个例子来讲解这个问题。

(1)没有内部函数的函数

function outerFn(x) {
    return x * x;
}
var y = outerFn(2);

  如果函数没有内部函数,则在该函数执行时,当前活动对象会被添加到该函数的作用域链的最前端。

  作用域链是唯一引用这个活动对象的地方。当函数退出时,活动对象会被从作用域链上删除,由于再没有任何地方引用这个活动对象,则它随后会被垃圾回收器销毁。

(2)包含内部函数的函数,但这个内部函数没有被外部函数之外的变量所引用

function outerFn(x) {
    //在outerFn外部没有指向square的引用
    function square(x) {
        return x * x;
    }
    //在outerFn外部没有指向cube的引用
    function cube(x) {
        return x * x * x;
    }
    var temp = square(x);
    return temp / 2;
}
var y = outerFn(5);

  在这种情况下,函数执行时创建的活动对象不仅添加到了当前函数的作用域链的前端,而且还添加到了内部函数的作用域链中。

  当该函数退出时,活动对象会从当前函数的作用域链中删除,活动对象和内部函数互相引用着对方,outerFn函数的活动对象引用着嵌套的函数对象square和cube,内部函数对象square和cube的作用域链中引用了outerFn函数的活动对象。但由于它们都没有外部引用,所以都将会被垃圾回收器回收。

(3) 包含内部函数的函数,但外部函数之外存在指向这个内部函数的引用(闭包)

  2种情况:

function outerFn(x) {
    //内部函数作为outerFn的返回值被引用到了外部
    return function innerFn() {
        return x * x;
    }
}

//引用着返回的内部函数
var square = outerFn(5);
square();
var square;

function outerFn(x) {
    //通过全局变量引用到了内部函数
    square = function innerFn() {
        return x * x;
    }
}
outerFn(5);
square();

  在这种情况下,outerFn函数执行时创建的活动对象不仅添加到了当前函数的作用域链的前端,而且还添加到了内部函数innerFn的作用域链中(innerFn的[[scope]]内部属性)。

  当外部函数outerFn退出时,虽然它的活动对象从当前作用域链中删除了,但内部函数innerFn的作用域链仍然引用着它。 由于内部函数innerFn存在一个外部引用square,且内部函数innerFn的作用域链仍然引用着外部函数outerFn的活动对象,所以在调用innerFn时,仍然可以访问到outerFn的活动对象上存储着的变量x的值。

多个内部函数:

  更有趣的场景是有不止一个的内部函数,多个内部函数的作用域链引用着同一个外部函数的活动对象。该活动对象的改变会反应到三个内部函数上。

function createCounter(i) {
    function increment() {
        ++i;
    }
    function decrement() {
        --i;
    }
    function getValue() {
        return i;
    }
    function Counter(increment, decrement, getValue) {
        this.increment = increment;
        this.decrement = decrement;
        this.getValue = getValue;
    }
    return new Counter(increment, decrement, getValue);
}
var counter = createCounter(5);
counter.increment();
alert(counter.getValue()); //返回6

  上例表示了createCounter函数的活动对象被三个内部函数的作用域链所共享。

闭包以及循环引用:

  上面讨论了JavaScript中函数的作用域链,下面谈一下在闭包中可能出现因循环引用而产生内存泄漏的问题。闭包通常指得是能够在外部函数外面被调用的内部函数。下面给出一个例子:

function outerFn(x) {
    x.func = function innerFn() {}
}
var div = document.createElement("DIV");
outerFn(div);

  在上例中,一个DOM对象和一个JavaScript对象之间就存在着循环引用。DOM 对象div通过属性‘func’引用着内部函数innerFn。内部函数innerFn的作用域链(存储在内部属性[[scope]]上)上的活动对象的属性‘x’ 引用着DOM对象div。这样的循环引用就可能造成内存泄漏。

原文地址:https://www.cnblogs.com/goloving/p/8586307.html

时间: 2024-11-02 02:19:51

关于JS里的函数作用域链的总结的相关文章

函数作用域链

基本任何变成语言都有作用域的概念,即各种变量的可见性和生命周期,通俗来说,就是变量在什么地方可以被调用,什么地方不可以被调用.此处是js的函数作用域链的概念理解,结合培训班和网上搜索. 1.全局作用域, 局部作用域 全局作用域:处于全局作用域的变量为全局变量,在代码中的任何地方都可被可视,即在任何地方都可被调用. 常见情况有以下几种: (1)最外层函数和最外层定义的变量拥有全局作用域. (2)所有未声明而直接赋值的变量拥有全局作用域. (3)所有window对象拥有全局作用域.  2.局部作用域

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

在一些类似C语言的编程语言中,花括号内的每一段代码都具有各自的作用域,而且变量在声明它们的代码段之外是不可见的(也就是我们不能在代码段外直接访问代码段内声明的变量),我们称之为块级作用域,然而,不同于这类型的编程语言,javascript是没有块级作用域.取而代之的,javascript使用的是块级作用域:变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的. 在如下的所示的代码中,在不同位置定义了变量 i . j 和 k ,它们都在同一个作用域内——这三个变量在函数体内均是有定义

js学习笔记之作用域链和闭包

在学习闭包之前我们很有必要先了解什么是作用域链 一.作用域链 作用域链是保证对执行环境有权访问的所有变量和函数的有序访问. 这句话其实还是蛮抽象的,但是通过下面一个例子,我们就能清楚的了解到作用域链了. 1 var color="blue"; 2 function changeColor(){ 3 var anotherColor="red"; 4 function swapColors(){ 5 var tempColor=anotherColor; 6 anot

JS 执行环境与作用域链

1.执行环境 JavaScript 代码都是在执行环境中被执行的.执行环境是一个概念,一种机制,用来完成JavaScript运行时在作用域.生命周期等方面的处理,它定义了变量或函数是否有权访问其他数据,决定各自行为.每个执行环境都有一个变量对象(我理解为环境变量对象),在代码执行环境中所有的变量.函数都保存在这个对象中: 全局的执行环境是最外围的执行环境,根据ECMAScript 实现所在的宿主环境同,表示执行环境的对象也不一样,在WEB浏览器中,全局执行环境被认为是Windows对象,因此所有

1、JavaScript高级之函数作用域链

作用域链: JavaScript的每个函数function都有自己的作用域,使用Active Object(简称AO)活动对象来保存,在相互嵌套的函数中形成了作用域链,如图: 作用域链就是从里到外的AO链 变量的寻找: 函数fn3中使用的变量,如在fn3作用域内寻找不到,则往外层fn2作用域寻找,以此类推,直到全局对象window 代码演示: var c = 5; function t1(){ var d = 6; function t2(){ var e = 7; var d = 3;//如果

javascript函数作用域链 词法作用域

在开发语言中常见的作用域规则有  块级作用域和词法作用域 作用域 顾名思义就是起作用的区域  定义一变量后 ,可以在此范围作用的区域 一.块级作用域就是用一个块结构分割变量的访问区域  块即{ } 代表语言有C 系列语言 二.词法作用域就是变量的作用范围,在书写代码时就已经决定作用的范围,与运行时无关 特点:分割作用域只有函数 变量名提升 函数名提升 函数的声明比变量的声明优先级高 function a(){ } var a; alert(a);//打印出a的函数体 var a; functio

js中函数的创建和调用都发生了什么?执行环境,函数作用域链,变量对象

博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/26/js%E4%B8%AD%E5%87%BD%E6%95%B0%E7%9A%84%E5%88%9B%E5%BB%BA%E5%92%8C%E8%B0%83%E7%94%A8%E9%83%BD%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88%EF%BC%9F%E6%89%A7%E8%A1%8C%E7%8E%AF%E5%A2%83%E5%87%B

js中理解函数作用域的实例

一.Javascript的变量的scope是根据方法块来划分的(也就是说以function的一对大括号{ }来划分).切记,是function块,而for.while.if块并不是作用域的划分标准,可以看看以下几个例子:           1 <script type ="text/javascript" > 2 function test2(){ 3 alert ("before for scope:"+i); // i未赋值(并不是未声明!使用未声

js里常用函数之高阶函数

高阶函数:将函数作为参数或者返回值的函数.将函数作为参数的用法通常称作回调函数,函数参数通常会在主函数被执行之后被高阶函数调用. 高阶函数的使用实例.可以把有相似操作的函数用一个高阶函数来重构,精简代码 如有一个比较函数:compareNumbers 1 function compareNumbers(x, y){ 2 3 if(x > y){ 4 5 return -1; 6 7 }else{ 8 9 return 1; 10 11 } 12 13 return 0; 14 15 } 16 1