zoukankan      html  css  js  c++  java
  • javascript创建函数的20种方式汇总

    http://www.jb51.net/article/68285.htm

    工作中常常会创建一个函数来解决一些需求问题,以下是个人在工作中总结出来的创建函数20种方式,你知道多少?

    function sayHello(){
        console.log('hello');
    }
    function leave(){
        console.log('goodbye');
    }
    //test
    sayHello();
    

    为完成需求,赶紧声明一个函数吧

     
    var sayHello = function(){
        console.log('hello');
    }
    var leave = function(){
        console.log('goodbye');
    }
    //test
    leave();
    

    有求必应,函数表达数来解决

     
    var Action = {
        sayHello : function(){
            console.log('hello');
        },
        leave : function(){
            console.log('goodbye');
        }
    }
    //test
    Action.sayHello();
    

    创建一个方法对象类看起来更整洁

     
    var Action = function(){};
    Action.sayHello = function(){
        console.log('hello');
    }
    Action.leave = function(){
        console.log('goodbye');
    }
    //test
    Action.sayHello();
    

    为单体添加属性方法,净化命名空间

     
    var Action = function(){
        return {
            sayHello : function(){
                console.log('hello');
            },
            leave : function(){
                console.log('goodbye');
            }
        }
    }
    // //test
    var a = Action();
    a.leave();
    

    返回新对象我们还有更多的事情可以做

     
    var Action = function(){};
    Action.prototype.sayHello = function(){
        console.log('hello');
    }
    Action.prototype.leave = function(){
        console.log('goodbye');
    }
    //test
    var a = new Action();
    a.sayHello();
    

    原型链指向防止创建多次

     
    var Action = function(){};
    Action.prototype = {
        sayHello : function(){
            console.log('hello');
        },
        leave : function(){
            console.log('goodbye');
        }
    }
    //test
    var a = new Action();
    a.leave();
    

    对象赋给原型看上去更整洁

     
    var Action = function(){
        this.sayHello = function(){
            console.log('hello');
        }
        this.leave = function(){
            console.log('goodbye');
        }
    }
    //test
    var a = new Action();
    a.leave();
    

    别忘了还可以在类的内部添加属性

     
    Function.prototype.sayHello = function(){
        console.log('hello');
    }
    Function.prototype.leave = function(){
        console.log('leave');
    }
    //test
    var f = function(){};
    f.sayHello();
    

    基类原型拓展,新的一片空间

     
    Function.prototype.addMethod = function(name, fn){
        this[name] = fn;
    }
    var methods = function(){};
    methods.addMethod('sayHello', function(){
        console.log('hello');
    });
    methods.addMethod('leave', function(){
        console.log('leave');
    });
    //test
    methods.sayHello();
    

    通用定义方法函数使用更方便

     
    Function.prototype.addMethod = function(name, fn){
        this.prototype[name] = fn;
    }
    var Methods = function(){};
    Methods.addMethod('sayHello', function(){
        console.log('hello');
    });
    Methods.addMethod('leave', function(){
        console.log('leave');
    });
    //test
    var a = new Methods();
    a.leave();
    

    原形赋值我们还可以用类操作

    Function.prototype.addMethod = function(name, fn){
        this[name] = fn;
        return this;
    }
    var methods = function(){};
    methods.addMethod('sayHello', function(){
        console.log('hello');
    }).addMethod('leave', function(){
        console.log('leave');
    });
    //test
    methods.leave();
    

    链式操作有何不可

     
    Function.prototype.addMethod = function(name, fn){
        this.prototype[name] = fn;
        return this;
    }
    var Methods = function(){};
    Methods.addMethod('sayHello', function(){
        console.log('hello');
    }).addMethod('leave', function(){
        console.log('leave');
    });
    //test
    var a = new Methods();
    a.leave();
    

    原型+链式=更进一步

     
    Function.prototype.addMethod = function(obj){
        for(var key in obj){
            this[key] = obj[key];
        }
    }
    var methods = function(){};
    methods.addMethod({
        sayHello : function(){
            console.log('hello');
        },
        leave : function(){
            console.log('goodbye');
        }
    });
    //test
    methods.leave();
    

    添加对象一次做得更多

     
    Function.prototype.addMethod = function(obj){
        for(var key in obj){
            this.prototype[key] = obj[key];
        }
    }
    var Methods = function(){};
    Methods.addMethod({
        sayHello : function(){
            console.log('hello');
        },
        leave : function(){
            console.log('goodbye');
        }
    });
    //test
    var a = new Methods();
    a.leave();
    

    原型有什么不可以

     
    Function.prototype.addMethod = function(obj){
        for(var key in obj){
            this[key] = obj[key];
        }
        return this;
    }
    var methods = function(){};
    methods.addMethod({
        sayHello : function(){
            console.log('hello');
        }
    }).addMethod({
        leave : function(){
            console.log('goodbye');
        }
    });
    //test
    methods.leave();
    

    函数式添加对象也可以链式操作

     
    Function.prototype.addMethod = function(obj){
        for(var key in obj){
            this.prototype[key] = obj[key];
        }
        return this;
    }
    var Methods = function(){};
    Methods.addMethod({
        sayHello : function(){
            console.log('hello');
        }
    }).addMethod({
        leave : function(){
            console.log('goodbye');
        }
    });
    //test
    var a = new Methods();
    a.leave();
    

    类的链式操作也可以做得更多

     
    Function.prototype.addMethod = function(){
        if(arguments.length < 1)
            return;
        var tostring = Object.prototype.toString;
        if(tostring.call(arguments[0]) === '[object Object]'){
            for(var key in arguments[0]){
                this[key] = arguments[0][key];
            }
        }else if(typeof arguments[0] === "string" && tostring.call(arguments[1]) === '[object Function]'){
            this[arguments[0]] = arguments[1];
        }
        return this;
    }
    

    函数添加封装一下

     
    Function.prototype.addMethod = function(){
        if(arguments.length < 1)
            return;
        var tostring = Object.prototype.toString;
        if(tostring.call(arguments[0]) === '[object Object]'){
            for(var key in arguments[0]){
                this.prototype[key] = arguments[0][key];
            }
        }else if(typeof arguments[0] === "string" && tostring.call(arguments[1]) === '[object Function]'){
            this.prototype[arguments[0]] = arguments[1];
        }
        return this;
    }
    

    类式添加追求的就是个性化

     
    Function.prototype.addMethod = function(){
        if(arguments.length < 1)
            return;
        var cout = 0,
            tostring = Object.prototype.toString,
            that;
        if(typeof arguments[0] === "boolean" && arguments[0]){
            cout++;
            that = this;
        }else{
            that = this.prototype;
        }
        if(tostring.call(arguments[cout]) === '[object Object]'){
            for(var key in arguments[cout]){
                that[key] = arguments[cout][key];
            }
        }else if(typeof arguments[cout] === "string" && tostring.call(arguments[cout + 1]) === '[object Function]'){
            that[arguments[cout]] = arguments[cout + 1];
        }
        return this;
    }
    //text
    var Text1 = function(){};
    Text1
    .addMethod('sayHello', function(){console.log('last say hello!')})
    .addMethod('leave', function(){console.log('last goodbye!')});
    var t = new Text1();
    t.sayHello();
    t.leave();
    var test2 = function(){};
    test2
    .addMethod(true, 'sayHello', function(){console.log('last say hello!')})
    .addMethod(true, 'leave', function(){console.log('last goodbye!')});
    test2.sayHello();
    test2.leave();
    

    追求个性化,这么做不必说为什么

  • 相关阅读:
    solus系统配置
    Linux中常用操作命令
    安装debian 9.1后,中文环境下将home目录下文件夹改为对应的英文
    Java学习之路(书籍推荐)
    tomcat实现文件打开下载功能
    mysql导入sql文件过大或连接超时的解决办法
    启动tomcat不出现命令窗口
    @Transactional注解*
    session处理超时的三种方式
    spingmvc 返回json数据日期格式化方法
  • 原文地址:https://www.cnblogs.com/daysme/p/7662990.html
Copyright © 2011-2022 走看看