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 扩展对input的一些操作方法
Oct 30 Javascript
input的focus方法使用
Mar 13 Javascript
js的一些常用方法小结
Jun 29 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 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 不同编码下的字符串长度区分
2009/09/26 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
jquery.validate使用攻略 第一部
2010/07/01 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
python中cPickle用法例子分享
2014/01/03 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
Python求凸包及多边形面积教程
2020/04/12 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
优秀教师主要事迹
2014/02/01 职场文书
医药营销个人求职信
2014/04/12 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
css3新特性的应用示例分析
2022/03/16 HTML / CSS