javascript创建函数的20种方式汇总


Posted in Javascript onJune 23, 2015

工作中常常会创建一个函数来解决一些需求问题,以下是个人在工作中总结出来的创建函数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();

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

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Javascript Math对象
Aug 13 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 #Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 #Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 #Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 #Javascript
Js+php实现异步拖拽上传文件
Jun 23 #Javascript
javascript框架设计之类工厂
Jun 23 #Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 #Javascript
You might like
PHP syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
php随机输出名人名言的代码
2012/10/07 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
python 查找字符串是否存在实例详解
2017/01/20 Python
Python AES加密模块用法分析
2017/05/22 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
生物技术专业研究生自荐信
2013/09/22 职场文书
英语系毕业生自荐信
2013/10/31 职场文书
小学生家长评语集锦
2014/01/30 职场文书
个人承诺书
2014/03/26 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
化验室岗位职责
2015/02/14 职场文书
教师求职自荐信范文
2015/03/04 职场文书
李强优秀员工观后感
2015/06/16 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS