js之函数表达式

函数表达式的特征
    函数表达式是js中一种既强大又容易令人困惑的特性。定义函数的方式有两种：一种是函数声明，另一种是函数表达式.

            function functionName(arg0,arg1,arg2){
                // 函数体
            }
            console.log(functionName.name); // functionName
            // Firefox，Safari，Chrome和Opera都给函数定义了一个非标准的name属性，通过这个属性可以访问到给函数指定的名字。
            // 这个属性的值永远都等于跟在function关键词后面的标识符
    关于函数声明，它的一个重要特征就是 函数声明提升 ，意思是在执行代码之前会读取函数声明，这就意味着可以把函数声明放到调用它的语句后面：

            sayHi();  // Hi
            sayYes(); // 错误：函数还不存在
            function sayHi(){
                console.log('Hi');
            }
            var sayYes = function () {
                console.log('Yes');
            }
            // 这种形式看起来好像是常规的变量赋值语句，即创建一个函数并将它赋值给变量sayYes。
            // 这种情况下创建的函数叫做匿名函数。因为function 后面没有标识符，匿名函数的name属性是空字符串
    理解函数声明与函数表达式之间的区别：
            if(true){
                function sayHi(){
                    console.log("Hi");
                }
            }else{
                function sayHi(){
                    console.log("Yo!");
                }
            }
            // 上述代码在ECMAScript中属于无效语法，js引擎会尝试修复错误，将其转换为合理的状态，但问题是浏览器尝试修正错误的做法并不一致。
                // 但是如果使用函数表达式，那就没什么问题了

            var sayHi;
            if(true){
                sayHi = function (){
                    console.log("Hi");
                }
            }else{
                sayHi = function(){
                    console.log("Yo!");
                }
            }
            sayHi(); // Hi

 

递归
    递归函数是在一个函数通过名字调用自身的情况下构成的。

        // 一个经典的递归阶乘函数
            function factorial(num){
                if(num <= 1){
                    return 1;
                }else{
                    return num * factorial(num - 1);
                }
            }
            console.log(factorial(10));

            // 看起来没什么问题，但是下面的代码却导致它出错：
            var antherFactorial = factorial;
            factorial = null;
            console.log(antherFactorial(4)) // 出错！
            // 在这种情况下，使用arguments.callee可以解决这个问题。我们知道，arguments.callee是一个指向正在执行的函数的指针，因此可以用它来实现对函数的递归调用


            -------------隔断------------------
            function factorial(num){
                if(num <= 1){
                    return 1;
                }else{
                    return num * arguments.callee(num - 1);
                }
            }
            var antherFactorial = factorial;            factorial = null;
            console.log(antherFactorial(4)) // 24
                // 因此，在编写递归函数时，通过使用arguments.callee代替函数名，可以确保无论怎样调用函数都不会出现问题
                // 但是在严格模式下，不能通过脚本访问arguments.callee，访问这个属性会导致出错。不过，可以通过命名函数表达式来达成相同的效果:


                var ff = (function f(num){
                    if(num <= 1){
                        return 1;
                    }else{
                        return num * f(num - 1);
                    }
                })
            console.log(ff(100));  //9.33262154439441e+157
                // 以上代码创建了一个名为f() 的命名函数表达式，然后将它赋值给变量ff。即便把函数赋值给另一个变量，函数的名字f依然有效，所以递归调用照样
                //  能正确完成。这种方式在严格模式和非严格模式下都行得通

 

闭包
    有不少开发人员总是搞不清匿名函数和闭包这两个概念，因此经常混用。闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式
        就是在一个函数内部创建另一个函数：

            function createCF(propertyName){
                return function(obj1,obj2){
                    var val1 = obj1[propertyName];
                    var val2 = obj2[propertyName];
                    // 上面两行代码是内部函数(一个匿名函数)中的代码，这两行代码访问了外部函数中的变量propertyName。即使这个内部函数被返回了，而且是在其他
                    // 地方被调用了，但它依然可访问变量propertyName。之所以还能访问这个变量，是因为内部函数的作用域链中包含createCF()的作用域
                    if(val1 < val2){
                        return -1;
                    }else{
                        return 0;
                    }
                }

            }
            var o1 = {age : 14};
            var o2 = {age : 13};
            var CF = createCF('age');
                /*
                 有匿名函数从createCF（）被返回后，它的作用域链被初始化为包含createCF()函数的活动对象和全局变量对象。这样，匿名函数
                 就可以访问在createCF（）中定义的所以变量，更为重要的是，createCF（）函数在执行完毕时，其活动对象也不会被销毁，因为匿名函数的
                 作用域链仍然在引用这个活动对象。换句话说，当createCF（）函数返回后，其执行环境的作用域链会被销毁，但它的活动对象仍然会留在内存中
                 。直到匿名含函数被销毁后，createCF（）函数的活动对象才会被销毁。
                 */
            var res = CF(o1,o2);
            CF = null;
            //解除对匿名函数的引用(以便释放内存
                /*
                首先，创建的比较函数被保存在变量CF中。通过将CF设置为null解除该函数的引用，就等于通知垃圾回收例程将其清除。
                随着匿名函数的作用域链被销毁，其他作用域（除了全局作用域）也都可以安全的销毁了。
                 */

 

    当函数被调用时，会创建一个执行环境及相应的作用域链。然后使用arguments 和 其他命名参数和初始化函数的活动对象。
        但在作用域链中，外部函数的活动对象始终处于第二位，外部函数的外部函数的活动对象处于第三位。。。直至作为作用域终点的全局执行环境。
        无论什么时候在函数中访问一个变量时，就会从作用域链中搜索具有相应名字的变量。一般来讲，当函数执行完毕后，局部活动对象就会被销毁，内存
        中仅保存全局作用域（全局执行环境的变量对象）。但是，闭包的情况又有所不同：
        在另一个函数内部定义的函数会将包含函数（即外部函数）的活动对象添加到它的作用域链中。因此，在createCF()函数内部定义的匿名函数的作用域链中
            实际上会包含外部函数createCF()的活动对象
    注意：由于闭包会携带包含它的函数的作用域，因此会比其他和函数占用更多的内存。过度使用闭包可能会导致内存占用过多，我们建议读者只在必要时再
        考虑使用闭包


别忘了闭包所保存的是整个变量对象，而不是某个特殊的变量。    作用链的这种配置机制引出了一个值得注意的副作用，即闭包只能取得包含函数中任何变量的最后一个值。

   function createFunctions(){
        var result = [];
        for(var i = 0; i < 10; i++){
            result[i] = function () {
                return i;
            };
        }
        return result;
    }
    var res = createFunctions();
    for( var i in res){
        console.log(res[i]());   // 每个函数返回的都是10
    }
    //当createFunctions（）函数返回后，变量i的值是10，此时每个函数都引用着保存着变量i的同一个变量对象。所以在每个函数内部i的值都是10.
        // 但是，我们可以创建另一个匿名函数强制让闭包的行为符合预期。



    function _createFunctions(){
        var result = [];
        for(var i = 0; i < 10; i++){
            result[i] = function (num){
                return function () {
                    return num;
                };
            }(i);
        }
        return result;
    }
    var _res = _createFunctions();
    for( var i in _res){
        console.log(_res[i]());   // 返回 0 - 9
    }
    // 这个版本，我们没有直接把闭包赋值给数组，而是定义了一个匿名函数，并将立即执行该匿名函数的结果赋值给数组。
        // 这里的匿名函数有一个参数num，也就是最终的函数要返回的值。在调用每个匿名函数时，我们传入了变量i。
        // 由于函数的参数是按值传递的，所以就会将变量i的值赋值给参数num。而在这个匿名函数内部，又创建了一个访问num的闭包。
        // 这样一来，result数组中的每个函数都有自己num变量的一个副本，因此就可以返回各自不同的数值了。

 

关于this对象
    在闭包中使用this对象也可能会导致一些问题。我们直到this对象是在运行时基于函数的执行环境绑定的：
        在全局函数中，this等于window
        而当函数与被作为某个对象的方法调用时，this等于那个对象
        不过，匿名函数的执行环境具有全局性，因此其this对象通常指向window。但有时候由于编写闭包的方式不同，这一点可能不会那么明显。

        var name = "the window";
            var object = {
                name : "my object",
                getNameFunc : function () {
                    return function () {
                        return this.name;
                    }
                }
            };
            console.log(object.getNameFunc()());  // the window
            // 为什么匿名函数没有取得其包含作用域（或外部作用域）的this对象呢？
                /*
                前面已经提到过，每个函数被调用时，都会自动取得两个特殊变量：this 和 arguments 。内部函数在搜索这两个变量时，只会搜索到其活动对象为止
                因此永远不可能直接访问外部函数中的这两个变量。不过，把外部作用域的this对象保存到在一个闭包能够访问到的变量，就可以让闭包访问该对象了。
                 */


            var name = "the window";
            var object = {
                name : "my object",
                getNameFunc : function () {
                    var that = this;
                    return function () {
                        return that.name;
                    }
                }
            };
            console.log(object.getNameFunc()());   //my object

 

    注意： 闭包会引用包含函数的整个活动对象，即使闭包不直接引用，包含函数的活动对象也仍然会保存一个引用，设为null可以解决这个问题
模仿块级作用域

 (function () {
       //在这里面的是块级作用域
        console.log(123);
    })()

 

    这种技术经常被用在函数外部，从而限制向全局作用域中添加过多的变量和函数。一般来说在一个由很多开发人员参与的大型运用程序中，过多的全局变量很容易
        导致命名冲突。而创建私有作用域，每个开发人员可以使用自己的变量，又不用担心搞乱全局作用域

私有变量
    严格来讲，js中没有私有成员的概念；所以对象属性都是公有的，不过，倒是有一个私有变量的概念。任何在函数中定义的变量，都可以认为是私有变量。
        因此，不能在函数的外部访问这些变量。私有变量包含函数的参数，局部变量和再函数内部定义的其他函数

      function Person(name){
             this.getName = function () {
                 return name;
             }
             this.setName = function (value) {
                name = value;
             }
         }
         var person = new Person('tom');
         console.log(person.getName()); // tom
         person.setName('bob');
         console.log(person.getName()); // bob


            /*
            以上代码的构造函数中定义了两个特权方法：getName()和 setName()。这两个方法都可以在构造函数外部使用，而且都有权访问私有变量name。
            私有变量name在Person中的每个实例中都不相同，因此每次调用构造函数都会重新创建这两个方法。不过在构造函数中定义特权方法也有一个缺点，
            那就是你必须使用构造函数模式来达成这个目的。构造函数的缺点就是针对每个实例都会创建同样一组新方法，而使用静态私有变量来实现特权方法
            就可以避免这个问题。
             */
静态私有变量
        (function () {
            var name = '';
            Person = function (value) {
                name = value;
            }
            Person.prototype.getName = function () {
                return name;
            }
            Person.prototype.setName = function (value) {
                name = value;
            }
        })();
        var p1  = new Person('ni');
        console.log(p1.getName());
        /*
            以这种方式创建静态私有变量会因为使用原型而增进代码复用，但每个实例都没有自己的私有变量。
            多查找作用域链中的一个层次，就会在一定程度上影响查找速度，而这正是使用闭包和私有变量的一个显明的不足之处
         */

 

模块模式
    前面的模式是用于为自定义类型创建私有变量和特权方法的。而道格拉斯所说的模块模式，则是为单例创建私有变量和方法的。所谓单例，指的就是只有一个实例的
        对象。按照惯例，js是以对象字面量的方式来创建单例对象的。

     var singleton = function () {
            // 私有变量和函数
            var privateVariable = 10;
            function privateFunction () {
                return false;
            }
            // 特权 / 公有方法和属性
            return {
                publicProperty : true,
                publicMethod : function () {
                    privateVariable++;
                    return privateFunction();
                }
            }
        }();
            console.log(singleton);  // {publicProperty: true, publicMethod: ƒ}
            /*
                这个模块模式使用了一个返回对象的匿名函数。在这个匿名函数内部，首先定义了私有变量和函数。
                然后，将一个对象字面量作为函数的值返回。由于这个对象是在匿名函数内部定义的，因此它的公有方法有权访问私有变量和函数。从本质上来讲，
                这个对象字面量定义的是单例的公共接口。这种模式在需要对单例进行某些初始化，同时又需要维护其私有变量时非常有用
             */

            var app = function (){
                var data = [];
                return {
                    joinData : function (val) {
                        data[data.length] = val;
                    },
                    getData : function(){  // ！！这里有闭包，私有变量的原理还是闭包！
                        console.log(data);
                    }
                }
            }();
            app.joinData('demo');
            app.getData();
            /*
            简言之，如果必须创建一个对象并以某些数据对其进行初始化，同时还要公开一些能够访问这些私有数据的方法，那就可以使用模块模式
             */

 

转载于:https://www.cnblogs.com/cl94/p/11293841.html