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

  • 相关阅读:
    30 algorithm questions study
    Binary Tree: Write a function to return count of nodes in binary tree which has only one child.
    分布式排序
    android开发中,工程前面有感叹号的解决办法
    android导入工程出现红色感叹号
    INSTALL_FAILED_MISSING_SHARED_LIBRARY错误解决方法
    安卓手机铃声怎么设置
    如何开启Mysql远程访问
    android 链接mysql数据库
    android 连接mysql数据库问题
  • 原文地址:https://www.cnblogs.com/cl94/p/11293841.html
Copyright © 2011-2022 走看看