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 相关文章推荐
checkbox 复选框不能为空
Jul 11 Javascript
Dom与浏览器兼容性说明
Oct 25 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
jQuery链使用指南
Jan 20 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 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时间和日期函数详解
2015/05/08 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
python图像处理之镜像实现方法
2015/05/30 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
pandas通过索引进行排序的示例
2018/11/16 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
使用Python函数进行模块化的实现
2019/11/15 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
python 画图 图例自由定义方式
2020/04/17 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
社区志愿者心得体会
2014/01/03 职场文书
如何写好升职自荐信
2014/01/06 职场文书
珍珠奶茶店创业计划书
2014/01/11 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
MySQL GRANT用户授权的实现
2021/06/18 MySQL