zoukankan      html  css  js  c++  java
  • js高级程序设计匿名函数和闭包理解

    /*********匿名函数*************/

    //函数声明会在代码执行以前被加载到作用域中,而函数表达式是在代码执行到那一行的时候才会有定义
    //函数声明
    function functionName(arg0, arg1, arg2) {
        //函数体
    }
    //函数表达式
    var functionName = function (arg0, atg1, arg2) {
        //函数体
    };
     
    //定义有效匿名函数的方式,将函数作为参数传入另一个函数,或者从一个函数中返回另一个函数
    function createComparisonFunction(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;
            }
        }
    }
     
    //在编写递归函数时,使用arguments.callee总比使用函数名更保险
    function factorial(num) {
        if (num <= 1) {
            return 1;
        } else {
            return num * arguments.callee(num - 1);     //使用arguments.callee代替函数名
        }
    }
    var anotherFactorial = factorial;
    factorial = null;
    alert(anotherFactorial(4));     //24,如果使用函数名会出错
     
     
    /**********闭包************/
    //闭包是指有权访问另一个作用域的变量的函数
    //创建闭包的常见方式,就是在一个函数内部创建另一个函数
    //闭包会使函数的作用域一直驻留在内存中
    /* 由于闭包会携带包含它的函数的作用域,因此会比其他函数占用更多的内存。过度使用闭包可能会导致内存占用过多,建议只在绝对必要时再考虑使用闭包 */
    //创建函数
    var compareNames = createComparisonFunction("name");
    //调用函数
    var result = compareNames({name:"Nicholas"}, {name:"Greg"});
    //解除对匿名函数的引用(以便释放内存)
    compareNames = null;
     
    //注意:由于作用域链的配置机制,闭包只能取得包含函数中任何变量的最后一个值,闭包所保存的是整个变量对象
    function createFunctions() {
        var result = new Array();
        for (var i = 0; i < 10; i++) {
            result[i] = function () {
                return i;
            };
        }
        return result;
    }
    var funcs = createFunctions();
    //每个函数都输出10
    for (var i = 0; i < funcs.length; i++) {
        document.write(funcs[i]() + "<br/>>");
    }
     
    //解决:可以通过创建另一个匿名函数强制让闭包的行为符合预期
    function createFunctions() {
        var result = new Array();
        for (var i = 0; i < 10; i++) {
            /* -------------------- */
            result[i] = function (num) {
                return function () {
                    return num;
                };
                //传入了变量i。由于函数是按值传递的,所以就会将变量i的当前值复制给参数num
            }(i);
            /* -------------------- */
        }
        return result;
    }
    var funcs = createFunctions();
    //分别输出0,1,2,。。。9
    for (var i = 0; i < funcs.length; i++) {
        document.write(funcs[i]() + "<br/>>");
    }
     
    //匿名函数的执行环境具有全局性,因此其this对象通常指向window
    var name = "The Window";
    var object = {
        name:"My Object",
        getNameFunc:function () {
            return function () {
                return this.name;
            };
        }
    };
    alert(object.getNamefunc()());      //The Window
    //内部函数在搜索this和arguments变量时,只会搜索到其活动对象为止
    //解决:把外部作用域中的this对象保存在一个闭包能够访问到的变量里,就可以让闭包访问该对象了,同理arguments也一样
    var name = "The Widnow";
    var object = {
        name:"my Object",
        getNameFunc:function () {
            var that = this;
            return function () {
                return that.name;
            };
        }
    };
    alert(object.getNameFunc()());      //my Object
     
    //内存泄漏
    //在IE中,如果闭包的作用域中保存着一个HTML元素,那么就意味着该元素将无法被销毁
    function assignHandler() {
        var element = document.getElementById("someElement");
        element.onclick = function () {
            alert(element.id);
        };
    }
    //解决:
    function assignHandler() {
        var element = document.getElementById("someElement");
        var id = element.id;          //保存在一个变量中
        element.onclick = function () {
            alert(id);          //消除了循环引用
        };
        element = null;           //解除对DOM对象的引用,减少其引用数
    }
     
    //模仿块级作用域
    //javascript没有块级作用域的概念
    //用作块级作用域(通常称为私有作用域)的匿名函数,定义并立即调用了一个匿名函数
    //可以减少闭包占用的内存问题,因为没有指向匿名函数的引用,只要函数执行完毕,就可以立即销毁其作用域链了
    (function () {
        // 这里是块级作用域
    })();
     
    (function () {
        var now = new Date();
        if (now.getMonth() == 0 && now.getDate() == 1) {
            alert("Happy new year!");
        }
    })();
     
    //私有变量包括函数的参数,局部变量和在函数内部定义的其他函数
    //有权访问私有变量和私有函数的公有方法称为特权方法。
    //第一种是在构造函数中定义特权方法
    //缺点:针对每个实例都会创建同样一组新方法
    function MyObject() {
        //函数的私有变量
        var privateVarialble = 10;
     
        function privateFunction() {
            return false;
        }
     
        //特权方法
        this.publicMethod = function () {
            privateVarialble++;
            return privateFunction();
        };
    }
     
    //静态私有变量,可以解决构造函数模式的缺点
    //通过在私有作用域中定义私有变量和函数
    (function () {
        //私有变量和私有函数
        var privateVariable = 10;
     
        function privateFunction() {
            return false;
        }
     
        //构造函数,初始化未经申明,总是会创建一个全局变量
        MyObject = function () {
     
        };
        //共有/特权方法
        MyObject.prototype.publicMethod = function () {
            privateVariable++;
            return privateFunction();
        };
    })();
     
    //与在构造函数中定义特权方法的主要区别,就在于私有变量和函数是有实例共享的
    //由于特权方法是在原型上定义的,因此所有实例都是用同一个函数
    //使用原型增进代码复用,但每个实例都没有自己的私有变量
    (function () {
        var name = "";
        Person = function (value) {     //全局变量
            name = value;
        };
        Person.prototype.getName = function () {
            return name;
        };
        Person.prototype.setName = function (value) {
            name = value;
        };
    })();
    var person = new Person("Nicholas");
    alert(person.getName());    //Nicholas
    person.setName("Greg");
    alert(person.getName());    //Greg
    var person2 = new Person("Mick");
    alert(person1.getName());       //Nick
    alert(person2.getName());       //Nick
     
    /************模块模式*********/
    //前面的模式是用于自定义类型创建私有变量和特权方法,模块模式则是为单例创建私有变量和特权方法
    //单例,就是只有一个实例的对象
    //模块模式通过为单例添加私有变量和特权方法
    //如果需要创建一个对象并以某些数据对其进行初始化,同时还要公开一些能够访问这些私有数据的方法,那么就可以使用模块模式
    var singleton=function(){
        //私有变量和私有函数
        var privateVariable=10;
        function privateFunction(){
            return false;
        }
        //特权公有方法和属性
        return {
            publicProperty:true,
            publicMethod:function(){
                privateVariable++;
                return privateFunction();
            }
        };
    }();
    /* 这个模块模式使用了一个返回对象的匿名函数(注意:对于函数声明必须把函数封装在一对括号中,但对于函数表达式就不需要了)。在这个匿名函数的内部,首先定义了私有变量和函数。然后将一个对象字面量作为函数的值返回。返回的对象字面量只包含可以公开的属性和方法 */
     
    //这种模式在需要对单例进行某些初始化,同时又需要维护其私有变量时是非常有用的
    function BaseComponent(){
     
    }
    function OtherComponent(){
     
    }
    var application=function(){
        //私有变量和函数
        var components=new Array();
        //初始化
        components.push(new BaseComponent());
        //公共
        return {
            getComponentCount:function(){
                return components.length;
            },
            registerComponent:function(component){
                if(typeof component=="object"){
                    components.push(component);
                }
            }
        };
    }();
    application.registerComponent(new OtherComponent());
    alert(application.getComponentCount());
     
    //增强的模块模式
    //适合单例必须是某种类型的实例,同时还必须添加某些属性和方法对其加以增强的情况
    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;
    }();
    //如果前面演示模块模式的例子中application对象必须是BaseComponent的实例,可以使用如下代码
    var application=function(){
        //私有变量和函数
        var components=new Array();
        //初始化
        components.push(new BaseComponent());
        //创建application的一个局部副本
        var app=new BaseComponent();
        //公共接口
        app.getComponentCount=function(){
            return components.length;
        };
        app.registerComponent=function(component){
           if(typeof component=="object"){
               components.push(component);
           }
        };
        //返回这个副本
        return app;
    }();
  • 相关阅读:
    网络编程--requests模块
    python连接oracle--cx_Oracle模块
    操作excel
    操作mysql数据库
    枚举--enumerate
    邮箱
    匿名函数
    使用spring security jwt 、spring security oauth2权限控制遇到的坑记录
    基于element-ui定义自己的Menu 菜单组件并以component方式去定渲染
    VUE同域情况下父窗体打开子窗口,关闭子窗口时刷新父窗体
  • 原文地址:https://www.cnblogs.com/webFrontDev/p/2753490.html
Copyright © 2011-2022 走看看