JavaScript 函数表达式 闭包 内存泄漏

1、定义函数的方式:函数声明 函数表达式

function functionName(arg0,arg1){ 
    //函数体
}

首先是function关键字 然后是函数的名字 这就是指定函数名的方式
关于函数声明 它的一个重要特征就是函数声明提升 意思是在执行代码前会先读取函数声明 这就意味着可以把函数声明放在调用它的语句后面

sayhi();
function sayhi(){
    alert("hi!");
}

第二种创建函数的方式是函数表达式 函数表达式有几种不同的语法形式 下面是最长见的一种形式

var functionName = function(arg0,arg1){
    //函数体;
}

这种形式看起来好像是常规的变量赋值语句 即创建一个函数并将它赋值给变量functionName 这种情况下创建的函数叫做匿名函数 因为function关键字后面没有标识符 函数表达式与其它表达式一样 在使用前必须先赋值
2、递归
递归函数是在一个函数通过名字调用自身的情况下构成的

function factorial(num){
    if(num <= 1){
        return 1;   
    } else {
        return num * factorial(num-1);
    } 
}

这是一个经典的递归阶乘函数 虽然这个函数表面上看起来没有什么问题 但下面的代码却可能导致它出错

var anotherFactorial = facorial;
factorial = null;
alert(anotherFactorial(3));//出错!

以上代码先把factorial() 函数保存在变量 anotherFactorial中,然后将factorial变量设为null 结果指向原函数的引用只剩下一个 但接下来调用anotherFactorial()时 由于必须执行 factorial() 而factorial已经不再是函数 所以就会导致错误 这种情况下 使用arguments.callee可以解决这个问题
arguments.callee是一个指向正在执行函数的指针 因此可以用它来实现对函数的递归调用

function factorial(num){
    if(num <= 1){
        return 1;
    } else {
        return num * arguments.callee(num-1);
    }
}

通过使用arguments.callee代替函数名 可以确保无论怎样调用函数都不会出问题 因此 在编写递归函数时 使用arguments.callee总比使用函数名更保险
在严格模式下 不能通过脚本访问arguments.callee 访问这个属性会导致错误 不过可以使用命名函数表达式来达成相同的结果

var factorial = (function f(num){
    if (num <= 1){
        return 1;
    } else {
        return num * f(num-1);
    }
})

以上代码创建了一个名为f()的命名函数表达式 然后将它复制给变量factorial 即便把函数赋值给了另一个变量 函数的名字f仍然有效 所以递归调用照样能完成 这种方式在严格模式和非严格模式下都行得通
3、闭包
闭包是指有权访问另一个函数作用域中的变量的函数 创建闭包的常见方式 就是在一个函数内部创建另一个函数

function createcom(propertyname){
    return function(object1,object2){
        var value1=object1[propertyname];
        var value2=object2[propertyname];
        
        if (value1 < value2){
            return -1;
        } else if (value1 > value2){
            return 1;
        } else {
            return 0;
        }
    }
}

在这个例子中 value1、2是内部函数(一个匿名函数中的代码)这两行代码访问了外部函数中的变量propertyname 即使这个内部函数被返回了 而且是在其他地方被调用了 但它仍然可以访问变量propertyname 之所以还能够访问这个变量 是因为内部函数的作用域链中包含 createcom() 的作用域 要彻底搞清楚其中的细节 必须从函数被调用的时候都会发生什么入手
当某个函数被调用时 会创建一个执行环境及相应的作用域链 然后 使用arguments和其他命名函数的值来初始化活动对象 但在作用域链中 外部函数的活动对象始终处于第二位 外部函数的外部函数的活动对象处于第三位… 直至作为作用域终点的全局执行环境
在函数执行过程中为读取和写入变量的值 就需要在作用域链中查找变量

function compare(value1,value2){
    if(value1<value2){
        return -1;
    }else if{
        return 1;
    }else {
        return 0;
    }
}
var result=compare(5,10);

以上代码先定义了compare()函数 然后又在全局作用域中调用了它 当调用compare()时 会创建一个包含arguments、value1、value2的活动对象 全局执行环境的变量对象(包含result和compare)在compare()执行环境作用域链中则处于第二位
在这里插入图片描述
后台的每个执行环境都有一个表示变量的对象——变量对象 全局环境的变量对象始终存在 而像compare()函数这样的局部环境的变量对象 则只在函数执行过程中存在 在创建compare()函数时 会创建一个预先包含全局变量对象的作用域链 这个作用域链被保存在函数内部的[[Scope]]属性中 当调用compare() 函数时 会为函数创建一个执行环境 然后通过复制函数的[[Scope]]属性中的对象构建起执行环境的作用域链 此后 又有一个活动对象(在此作为变量对象使用)被创建并推入执行环境作用域链的前端 对于这个例子中compare()函数的执行环境而言 其作用域链中包含两个变量对象 本地活动对象和全局变量对象 显然 作用域链本质上是一个指向变量对象的指针列表 它只引用但不实际包含变量对象
无论什么时候在函数中访问一个变量时 就会从作用域链中搜索具有相应名字的变量 一般来讲 当函数执行完毕后 局部活动对象就会被销毁 内存中仅保存全局作用域(全局执行环境的变量对象)但是 闭包的情况又有所不同
在这里插入图片描述
在另一个函数内部定义的函数会将包含函数(即外部函数)的活动对象添加到它的作用域链中 因此 在createcom()函数内部定义匿名函数的作用域链中 实际上将会包含外部函数createcom()的活动对象

function createcom(propertyName) { 
    return function(object1, object2){ 
        var value1 = object1[propertyName]; 
        var value2 = object2[propertyName]; 
        if (value1 < value2){ 
            return -1; 
        } else if (value1 > value2){ 
            return 1; 
        } else { 
            return 0; 
        } 
    }; 
}
var compare = createcom("name"); 
var result = compare({ name: "Nicholas" }, { name: "Greg" });

在匿名函数从createcom()中被返回后 它的作用域链被初始化为包含createcom()函数的活动对象和全局变量 这样 匿名函数就可以访问在createcom()中定义的所有变量 更为重要的是createcom()函数在执行完毕后 其活动对象也不会被销毁 因为匿名函数的作用域链仍然在引用这个活动对象 换句话说 当createcom()函数返回后 其执行环境的作用域链会被销毁 但它的活动对象仍然会留在内存中 直到匿名函数被销毁后 createcom()的活动对象才会被销毁

//创建函数
var compareNames = createComparisonFunction("name"); 
//调用函数
var result = compareNames({ name: "Nicholas" }, { name: "Greg" }); 
//解除对匿名函数的引用(以便释放内存)
compareNames = null;

首先 创建的比较函数被保存在变量compareName中 而通过将compareName设置为等于null解除该函数的引用 就等于通知垃圾回收例程将其清除 随着匿名函数的作用域链被销毁 其他作用域(除了全局作用域)也都可以安全的销毁了
4、闭包与变量
作用域链的这种配置机制引出了一个值得注意的副作用 即闭包只能取得包含函数中任何变量的最后一个值

function createfunction(){
    var result = new Array();
    for (var i=0;i<10;i++){
        result[i] = function(){
            return i;
        ]
    }
    return result;
}

这个函数会返回一个函数数组 表面上看 似乎每个函数都应该返回自己的索引值 即位置0的函数返回0 位置1的函数返回1 以此类推 但实际上 每个函数都返回10 因为每个函数的作用域链中都保存着createfunction()函数的活动对象 所以它们引用的都是同一个变量i 当createfunction()函数返回后 变量i的值是10 此时每个函数都引用着保存变量i的同一个变量对象 所以在每个函数内部i 的值都是10 但是我们可以通过创建另一个匿名函数强制让闭包的行为符合预期

function createfunction(){
    var result = new Array();
    for(var i=0;i<10;i++){
        result[i]=function(num){
            return function(){
                return num;
            };
        }(i);
    }
    return result;
}

在重写了前面的createfunction()函数后 每个函数就会返回各自不同的索引值了 这个版本中 我们没有直接把闭包赋值给数组 而是定义了一个匿名函数 并将立即执行该匿名函数的结果赋给数组 这里的匿名函数有一个参数num 也就是最终的函数要返回的值 在调用每个匿名函数时 我们传入了变量i 由于函数参数是按值传递的 所以就会将变量i 的当前值复制给参数num 而在这个匿名函数内部 又创建并返回了一个访问num的闭包 这样一来 result数组中的每个函数都有自己num变量的一个副本 因此就可以返回各自不同的数值了。
5、this对象
在闭包中使用this对象可能会导致一些问题 我们知道 this对象是在运行时基于函数的执行环境绑定的 在全局函数中 this等于window 而当函数被作为某个对象的方法调用时 this等于那个对象 不过 匿名函数的执行环境具有全局性 因此其this对象通常指向window

var name = "the wiondow";
var object = {
    name:"my object",
    getnamefunc : function(){
        return function(){
            return this.name;
        }
    }
};
alert(object.getnamefunc()()); //the winodw

不过把外部作用域中的this对象保存在一个闭包能够访问到的变量里 就可以让闭包访问该对象了 在定义匿名函数之前 我们把this对象赋值给了一个名叫that的变量 而在定义了闭包之后 闭包也可以访问这个变量 因为它是我们在包含函数中特意声明的一个变量 即使在函数返回之后 that也仍然引用着object

var name = "the winodw";
var object = {
    name : "my object";
    getnamefunc : function(){
        var that=this;
        return function(){
            return that.name;
        }
    }
};
alert(object.getnamefunc()()); //my object

6、内存泄露
由于IE9之前的版本对JavaScript对象和COM对象使用不同的垃圾收集例程 因此闭包在IE的这些版本中会导致一些特殊的问题 具体来说 如果闭包的作用域链中保存着一个HTML元素 那么就意味着该元素将无法被销毁

function assignhandler(){
    var element = document.getElementById("someElement");
    element.onclick = function(){
        alert(element.id);
    };
}

以上代码创建了一个作为element元素事件处理程序的闭包 而这个闭包则又创建了一个循环引用 由于匿名函数保存了一个对assignhandler()的活动对象的引用 因此就会导致无法减少element的引用数 只要匿名函数存在element的引用数至少是1 因此它所占的内存就永远不会被回收 不过这个问题可以通过稍微改写一下代码解决

function assignhandler(){
    var element = document.getElementById("someElement");
    var id = element.id;
    element.onclick = function(){
        alert(id);
    };
    element = null;
}
发布了75 篇原创文章 · 获赞 0 · 访问量 3381

猜你喜欢

转载自blog.csdn.net/E_ISOLATE/article/details/102568268