Question

如何将回调传递给函数和该函数以使用callee需要的原始参数调用回调（但用结果替换第一个参数）？

我有这个例子：

this.createImage: function(base64, callback) {
 var img = new Image();
 img.src = base64;
 img.onLoad = function() {
  callback(this); // I also want to pass position here (this + arbitrary number of arguments)
 }
} 

this.addToCanvas: function(item, position) {

  if(!this.isImage(item)) { // assume `isImage()` check if item is Image, & skips if true 
    var item = this.createImage(item, this.addToCanvas);
    return;
  }

  item.position = position;
  // Supposedly here I am certain that image is an Image() and not a 
  // base64 string
}

所以我基本上想知道如何让createImage回复addToCanvas，而是通过原来的position但item代替加载img。

这里的想法是能够使用addToCanvas()或Image来呼叫base64 String，并且如果需要，仍然可以在内部转换。< / p>

但是，我仍然希望能够将createImage()重用于需要使用其他（任意）数量的参数回调的其他函数。我想知道是否可能不会将上述功能结合在一起。

Answer 1

我建议只使用本地功能。

如果数据已经是图像，则只需立即调用本地函数即可处理它。如果它还不是图像，则将其转换为图像，然后从回调中调用本地函数。

因为本地函数可以访问传递给原始函数调用的所有参数，所以这可以解决您的问题，而无需进行任何特殊的参数传递。它也是Javascript的强大功能之一（函数可以访问所有父参数）：

this.createImage = function (base64, callback) {
    var img = new Image();
    img.onLoad = function () {
        callback(img);
    }
    img.src = base64;
}

this.addToCanvas = function (item, position) {

    function addIt(img) {
        // we know that img is an actual image here so you can process it now
        img.position = position;

        // other processing of the image here ...
    }

    if (!this.isImage(item)) {
        // have to make it an image before addIt
        this.createImage(item, addIt);
    } else {
        // already an image, can call addIt now
        addIt(item);
    }

}

Answer 2

您正在寻找部分参数申请。这是一种函数式编程技术：在纯JavaScript中，您可以这样做：

var that = this; // necessary because this has another vaue inside the wrapper function
var item = this.createImage(item, function(x) {
   return that.addToCanvas(x, position)
});

// here you are passing a wrapper function, that 'waits' for an x to be passed in order to call finally addToCanvas, with x and position.

img.onLoad = function() {
  callback(this);  // this goes into the above's x
}

使用像underscore.js这样的函数库的东西看起来更优雅如下：

var item = this.createImage(item, _.partial(this.addToCanvas, _, position));

函数中的拾取参数和原始参数的回调

2 个答案: