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获取焦点和失去焦点事件代码
Apr 21 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
three.js着色器材质的内置变量示例详解
Aug 16 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
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
python中的&amp;&amp;及||的实现示例
2019/08/07 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
自荐信的格式
2014/03/10 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
地震捐款倡议书
2014/08/29 职场文书
医德医风自我评价
2014/09/19 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
Golang表示枚举类型的详细讲解
2021/09/04 Golang
HTML基础详解(下)
2021/10/16 HTML / CSS
Python实现视频自动打码的示例代码
2022/04/08 Python
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python