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();
            /*
            简言之,如果必须创建一个对象并以某些数据对其进行初始化,同时还要公开一些能够访问这些私有数据的方法,那就可以使用模块模式
             */

 


posted @ 2019-08-03 09:49  cl94  阅读(2332)  评论(0编辑  收藏  举报