JavaScript 原型扩展:函数组合、柯里化与格式化实用工具
本文介绍了四个基于 JavaScript 原型扩展的实用函数:$concat 用于实现类似事件委托的函数胶水功能,$curry 提供函数柯里化支持,$bind 实现对象闭包绑定,以及 $format 模拟 C# 风格的字符串格式化。这些工具旨在提升代码优雅度与复用性,暂命名为 p.js。
JavaScript 原型扩展工具集概述
这里分享几个设计理想的 JavaScript 原型函数。大部分内容整理并修改自月影的博客。
另外推荐月影的著作《王者归来》,如果你每周在 JavaScript 编码上的时间超过 5 小时,这本书值得一读。
函数组合:$concat
1. 函数胶水。很多开发者习惯了 jQuery,有时仅仅为了使用类似 C# 中 event+=delegate 的功能而引入 jQuery,这似乎有些得不偿失。使用以下几个原型函数即可满足需求。
代码如下:
Function.prototype.$concat = function(){
var funcs = [this].concat(Array.apply([], arguments));
return function(){
var ret = [];
for(var i = 0; i < funcs.length; i++){
var func = funcs[i] instanceof Function ? funcs[i] : new Function(funcs[i]);
ret.push(func.apply(this, arguments));
}
return ret;
}
}
//var concat = (function a(a){
// alert("a:"+a);
//}).$concat(function b(b){
// alert("b:"+b);
//});
//concat(1);函数柯里化:$curry
2. 函数柯里化。柯里化是面向函数式语言的一个重要特性,与大多数人所持有的面向过程的编程思想区别很大。就个人见解而言,在日常工作中,函数柯里化除了能让部分代码写得更加优雅(或许也略显诡异)之外,并非特别“必要”。
代码如下:
Function.prototype.$curry=function(){
with({that:this})
return function()
{
var args = Array.prototype.slice.call(arguments);
if(args.length<that.length)
{
return function(){
var _args = args.concat(Array.prototype.slice.call(arguments));
return that.$curry().apply(this,_args);
}
}
else return that.apply(this,args);
}
}
//var curry=(function f(a,b,c){
// alert([a,b,c]);
// }).$curry();
//curry(1)(2)(3);
//curry(1,2)(3);对象闭包:$bind
3. 对象闭包。这个词是我自创的,不过查看注释中的调用方式即可理解。这个函数原本是为了证明 with 语句和闭包的等价性,但却提供了一个极具价值的模式。
代码如下:
Function.prototype.$bind=function(object){
var callback = function () {
return arguments[0];
}
with(object){
return eval('callback(' + this.toString() + ')');
}
}
//var obj = {a:1,b:2};
//var bind=(function (){
// a=10;
// b=11;
//}).$bind(obj);
//bind();
//alert(obj.a);字符串格式化:$format
4. string.Format。恐怕很多 JavaScript 开发者都渴望拥有一个类似 C#(或 Java)中的 string.Format 方法,其实实现起来并不麻烦。
代码如下:
String.prototype.$format=function(){
var ret;
for(var i=1;i<arguments.length;i++){
var exp = new RegExp('\\{' + (i-1) + '\\}','gm');
ret = (ret||this).replace(exp,arguments[i-1]);
}
return ret;
}
//alert("{0},{1},{4}".$format(0,1,2);未来有机会还会陆续分享更多这类犀利的函数。暂且将这些函数集合命名为 p.js。
什么时候该用JS构造器:与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选?场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38
