javascript创建函数的20种方式汇总
http://www.jb51.net/article/68285.htm
工作中常常会创建一个函数来解决一些需求问题,以下是个人在工作中总结出来的创建函数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创建函数的20种方式汇总的更多相关文章
- JavaScript创建函数的三种方式
㈠函数(function) ⑴函数也是一个对象 ⑵函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码) ⑶函数中可以保存一些代码在需要的时候调用 ⑷使用typeof检查一个函数对象时,会返 ...
- javascript创建类的6种方式
javascript创建类的7种方式 一 使用字面量创建 1.1 示例 var obj={}; 1.2 使用场景 比较适用于临时构建一个对象,且不关注该对象的类型,只用于临时封装一次数据,且不适合代码 ...
- JS中创建函数的三种方式及区别
1.函数声明 function sum1(n1,n2){ return n1+n2; }; 2.函数表达式,又叫函数字面量 var sum2=function(n1,n2){ return n1+n2 ...
- JavaScript创建表格的两种方式
方式一: var data = [ { id: 1, name: "first", age: 12 }, { id: 2, name: "second", ag ...
- javaScript定义函数的三种方式&变量的作用域
一.函数定义 方式1.普通方式定义函数 function 函数名(參数n){ 函数体 } function add(a,b){ return a+b; } 方式2.直接量定义函数 var 函数名=fu ...
- JavaScript创建类的三种方式
//第一种 创建类方法. // 用方法模拟 构造函数. function classobj() { this.name = 'xiaoming'; } classobj.text = 'text'; ...
- JavaScript定义函数的三种方式
直接定义函数 function f1(x,y){ return x+y; } 使用Function构造函数 var f2=new Function("x","y" ...
- javascript中构造函数的三种方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS创建对象,数组,函数的三种方式
害怕自己忘记,简单总结一下 创建对象的3种方法 ①:创建一个空对象 var obj = {}; ②:对象字面量 var obj = { name: "Tom", age: 27 ...
随机推荐
- redis 性能建议
因为 RDB 文件只用作后备用途,建议只在 Slave 上持久化 RDB 文件,而且只要15分钟一次就够了,只保留 save 900 1 这条规则. 如果 Enable AOF,好处是在恶劣请看下也只 ...
- CSS布局实战
1. ul li中上图下字,图片.文字居中. <ul> <li> <img src="dash.png" style="display:bl ...
- Hive中如何快速的复制一张分区表(包括数据)
Hive中有时候会遇到复制表的需求,复制表指的是复制表结构和数据. 如果是针对非分区表,那很简单,可以使用CREATE TABLE new_table AS SELECT * FROM old_tab ...
- java设计模式之动态代理的概述和实现
概述 1.代理:本来应该自己做的事情,请了别人来做,被请的人就是代理对象. 举例:春节回家买票让人代买 2.在Java中java.lang.reflect包下提供了一个Proxy类和一个Invocat ...
- 【转载】selenium与自动化测试成神之路
Python selenium —— selenium与自动化测试成神之路 置顶 2016年09月17日 00:33:04 阅读数:43886 Python selenium —— selenium与 ...
- sql server启动服务和还原bak文件
sql server启动服务和还原bak文件, sql server启动要: mysql数据库备份是psc后缀文件, sql server还原数据库备份bak文件: 三张图简介明了: ok:
- jenkins1
持续集成工具: Jenkins 和 Hudson是同源的. 甲骨文和开源社区之间的关系破裂,该项目被分成两个独立的项目. Jenkins:由大部分原始开发人员组成,Hudson:由甲骨文公司继续管理 ...
- 用Javascript,DHTML控制表格的某一列的显示与隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
- python colorama模块
colorama是一个python专门用来在控制台.命令行输出彩色文字的模块,可以跨平台使用. 1. 安装colorama模块 pip install colorama 可用格式常数: Fore: B ...
- SpringMVC实现 MultipartFile 文件上传
1. Maven 工程引入所需要的依赖包 2. 页面需要开放多媒体标签 3. 配置文件上传试图解析器 4. 接收图片信息,通过 IO 流写入磁盘(调用解析其中的方法即可) 如下: 1.1 引入所依赖的 ...