美文网首页
10 分钟搞定函数表达式、闭包、匿名函数

10 分钟搞定函数表达式、闭包、匿名函数

作者: 洗阳光 | 来源:发表于2016-09-03 16:14 被阅读80次

前面我们提到过,函数有两种创建方式,一种是使用函数声明,另外一种是函数表达式。前者可以声明提升,后者则不可以。然而初次之外,函数表达式还有其他有用的地方。

闭包

当在函数内部定义了其他函数时,就创建了闭包。闭包有权访问包含函数内部的所有变量,原理如下:

  • 在后台执行环境中,闭包的作用域包含着自己的作用域,函数的作用域和全局作用域。
  • 通常,函数的作用域及其所有变量都会在函数执行结束后被销毁。
  • 但是,当函数返回了一个闭包,这个函数的作用域将会一直在内存中保存到闭包不存在为止。

闭包与变量

由于 JS 是通过作用域链来获取变量的,因而使用闭包的时候,闭包只能获取包含函数中任何变量的最后一个值,看一下这个例子你就懂了。

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

上面的例子中,最终每一个 result[i] 都会绑定 return 10,而不是 return 0到9。

之所以这样,是因为每一个函数的作用域链中都保存着 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);
    }
}

这里我们定义了一个匿名函数,并将立即执行该匿名函数的结果赋给数组。这样一来,result 数组中的每一个函数都有自己 num 变量的一个副本,因此可以返回各自不同的数值了。

块级作用域

JavaScript 没有块级作用域的概念,然而我们可以通过匿名函数来模仿块级作用域。形式如下:

(function() {
    // 这里是块级作用域
})()

原理是,创建一个匿名函数,并且立刻执行。由于函数声明不能跟圆括号,所以我们可以加上一对圆括号将它变成函数表达式。

私有变量

任何在函数中定义的变量都可以认为是私有变量,因为不能再函数的外部访问这些变量。而通过闭包就可以在 JavaScript 中访问私有变量,我们把有权访问私有变量和私有函数的公有方法称之为特权方法

创建特权方法,有以下几种方法:

构造函数定义特权方法


function MyObject() {
    //  私有变量和私有函数
    var privateVariable = 10;
    function privateFunction() {
        return false;
    }

    // 特权方法
     this.publicMethod = function() {
        privateVariable++;
        return privateFunction();
    };
}

而这种方法有一个缺点,就是每个实例都会创建同样的一组新方法,使用静态私有变量可以实现特权方法来避免这个问题。

静态私有变量

(function() {
    // 私有变量和私有函数
    var privateVariable = 10;
    function privateFunction() {
        return false;
    }

    // 构造函数
    MyObject = function() {
    }

    // 公有,特权方法
    MyObject.prototype.publicMethod = function() {
            privateVariable++;
            return privateFunction();
    };
}) ();

这里我们在声明 MyObject 的时候没有用 var 关键字,因此 MyObject 就成为了以全局变量。但是,在严格模式下给未经声明的变量赋值会导致错误。

模块模式

按照惯例,JavaScript 是一对象字面量来创建单例对象:

var singleton = {
    name: value,
    method: function() {
    // 这里是方法的代码
    }
}

而使用模块模式,我们可以进一步增强单例模式:

var singleton = {
    // 私有变量和私有函数
    var privateVariable = 10;
    function privateFunction() {
        return False;
    }

    // 特权,公有方法和属性
    return {
        publicProperty: true,
        publicMethod: function() {
            privateVariable++;
            return privateFunction();
        }
    }
}

增强模块模式

这种增强的模块适合那些单例必须是某种类型的实例。

var singleton = function() {
    // 私有变量和私有函数
    var privateVariable = 10;
    function privateFunction() {
        return false;
    }

    //  创建对象
    var object = new CustomType();

    // 添加特权,公有属性和方法
    object.publicProperty = true;

    object.publicMethod = function() {
        privateVariable++;
        return privateFunction();
    };
    // 返回这个对象
    return object;
}

总结

函数表达式

相关文章

网友评论

      本文标题:10 分钟搞定函数表达式、闭包、匿名函数

      本文链接:https://www.haomeiwen.com/subject/rqjcettx.html