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 相关文章推荐
jQuery 浮动广告实现代码
Dec 25 Javascript
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
jQuery实现可用于博客的动态滑动菜单完整实例
2015/09/17 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
javascript中new关键字详解
2015/12/14 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
vue实现PC端分辨率适配操作
2020/08/03 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
从零学Python之入门(三)序列
2014/05/25 Python
简介Django中内置的一些中间件
2015/07/24 Python
python决策树之CART分类回归树详解
2017/12/20 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
python使用Geany编辑器配置方法
2020/02/21 Python
Ruby如何创建一个线程
2013/03/10 面试题
班会关于环保演讲稿
2013/12/29 职场文书
会计专业导师推荐信
2014/03/08 职场文书
创文明城市标语
2014/06/16 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
校长师德表现自我评价
2015/03/05 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
react 路由Link配置详解
2021/11/11 Javascript