JavaScript重复委托创建

我正在为HTML5画布创建一个小包装，我正在做的一件事是从我的每个包装方法返回self/this，以简化调用链接

因为没有更好的名字，我叫我的包装画布。它基本上将画布和上下文包装在一起

我做的一件事是将以下方法添加到Canvas.prototype

Canvas.fn = Canvas.prototype = {
    save: function () { this.ctx.save(); return this; },
    restore: function () { this.ctx.restore(); return this; },
    scale: function (x, y) { this.ctx.scale(x, y); return this; },
    rotate: function (angle) { this.ctx.rotate(angle); return this; },
    translate: function (x, y) { this.ctx.translate(x, y); return this; },
    transform: function (a,b,c,d,e,f) { this.ctx.transform(a,b,c,d,e,f); return this; },

有没有更简单的方法可以使用一些委托添加这些方法？可能使用数组或函数名？请注意，有些方法采用参数，我希望将它们按原样传递给实际的self.ctx方法。

类似的内容

var functionNames = ['save', 'restore', 'scale', 'rotate', 'translate', 'transform'];

for(var i = 0; i < functionNames.length; i++) {
    (function(funcName) {
        this[funcName] = function() {
            this.ctx[funcName].apply(this.ctx, arguments);
            return this;
        };
    )(functionNames[i]);
}

var functionNames=['save'，'restore'，'scale'，'rotate'，'translate'，'transform']；
对于（var i=0；i

下面是Eric的答案的延续：

var funs = ['save', 'restore', 'scale', 'rotate', 'translate',
    'transform'];
var f;
for(var i = 0; i < funs.length; i++) {
    f = funs[i];
    self[f] = new Function("this.ctx." + 
            f + ".apply(this.ctx, arguments);  return this;");
}

var funs=[“保存”、“恢复”、“缩放”、“旋转”、“平移”，
“转换”]；
var f；
对于（变量i=0；i

但是我不喜欢使用

函数

构造函数，我的函数是由字符串构成的。

类似于，也基于：

函数CanvasWrapper（canvas）
{
//用新的…或不用新的…来称呼这个
如果（！（画布包装器的此实例））{
返回新画布包装器（画布）；
}
var self=这个，
ctx=canvas.getContext（'2d'），
道具=[
“fillStyle”、“strokeStyle”
// ...
],
方法=[
“fillRect”、“strokeRect”、“clearRect”，
“beginPath”、“closePath”，
“移动到”、“行到”、“弧”，
“中风”
// ...
],
非链元素=[
“createLinearGradient”
],
i、 兴奋剂；
//创建和设置类似jQuery的属性访问器
//如果没有参数，则返回prop值
//用一个参数设置prop值并返回self
函数createAccessor（ctx、prop、self）
{
返回函数（）{
if（arguments.length==1）
{
ctx[prop]=参数[0]；
回归自我；
}
其他的
{
返回ctx[prop]；
}
}
}
对于（i=0；i

您有一些输入错误：int=>var，functions=>functionNames。这不起作用，因为在调用时，functionNames[i]不知道，所以我在未定义时调用了apply时出错。@Ayman:好的，我想现在应该修复。我修复了打字错误，并引入了一些闭包。如果您认为它看起来更干净，您还可以从委托创建者函数的签名中删除

ctx

和

self

；所以

createAccessor（ctx，prop，self）

变为

createAccessor（prop）

等。这些creator函数充当闭包，安全地保存属性名，因此可以在内部的匿名函数中使用`

function CanvasWrapper(canvas)
{
    // Call this with new ... or not
    if(!(this instanceof CanvasWrapper)){
        return new CanvasWrapper(canvas);
    }

    var self = this,
        ctx = canvas.getContext('2d'),
        props = [
            'fillStyle', 'strokeStyle'
            // ...
        ],
        meths = [
            'fillRect', 'strokeRect', 'clearRect',
            'beginPath', 'closePath',
            'moveTo', 'lineTo', 'arc',
            'stroke'
            // ...
        ],
        nonChainableMeths = [
            'createLinearGradient'
        ],
        i, prop, meth;

    // Create and set jQuery-like property accessors
    // With no arguments they return the prop value
    // With one argument they set the prop value and return self
    function createAccessor(ctx, prop, self)
    {
        return function(){
            if(arguments.length == 1)
            {
                ctx[prop] = arguments[0];
                return self;
            }
            else
            {
                return ctx[prop];
            }
        }
    }
    for(i = 0; i < props.length; ++i)
    {
        prop = props[i];
        self[prop] = createAccessor(ctx, prop, self);
    }

    // Create and set chainable delegate methods
    function createDelegate(ctx, meth, self)
    {
        return function(){
            ctx[meth].apply(ctx, arguments);
            return self;
        }
    }
    for(i = 0; i < meths.length; ++i)
    {
        meth = meths[i];
        self[meth] = createDelegate(ctx, meth, self);
    }

    // Create and set non-chainable delegate methods
    function createNCDelegate(ctx, meth, self)
    {
        return function(){
            return ctx[meth].apply(ctx, arguments);
        }
    }
    for(i = 0; i < nonChainableMeths.length; ++i)
    {
        meth = nonChainableMeths[i];
        self[meth] = createNCDelegate(ctx, meth, self);
    }
    return self;
}