Question

有一个名为pngjs-draw的github包将基元绘制到png上。正是我需要的，但我希望它与使用promises的其他异步代码一起运行。我试图这样做，遇到一些我不了解的事情＆＃34;这个＆＃34;。来自github的pngjs-draw示例代码如下所示......

var fs = require('fs');
var drawing = require('pngjs-draw');
var png = drawing(require('pngjs').PNG);

fs.createReadStream("blue.png")
  .pipe(new png({ filterType: 4 }))
  .on('parsed', function() {
    // Draws a pixel with transparent green
    this.drawPixel(150,200, this.colors.black())
    // more examples snipped
    // Writes file
    this.pack().pipe(fs.createWriteStream('blue.out.png'));
  });

它使用＆＃34;这个＆＃34;解析＆＃39;内部函数，this似乎是具有所有绘图方法的事物的实例。

我希望制作更通用的版本，除了返回承诺，处理错误等等。但似乎我无法使用＆＃34;这个＆＃34;在创建承诺时以同样的方式。这是我的尝试......

function drawOnPNG(fileIn, fileOut, drawFunction) {
  return new Promise((resolve, reject) => {
      fs.createReadStream(fileIn).pipe(new png({ filterType: 4 })).on('parsed', () => {
          drawFunction(this);  // <--MY PROBLEM, I THINK
          this.pack().pipe(fs.createWriteStream(fileOut)).on('finish', () => resolve()).on('error', error => reject(error));
      }).on('error', error => reject(error));        
  });
}

我认为制作这样的绘图功能会很方便......

function someDrawFunction(pngThing) {
    pngThing.drawPixel(150,200, this.colors.black());
}

然后我可以这样画......

drawOnPNG('fileIn.png', 'fileOut.png', someDrawFunction).then(...

但是，当这个执行时，pngThing并不是我所希望的。使用调试器检查它，它是一个非常大的对象，似乎所有的JS类都定义在它上面。您能否建议一种在承诺创建中访问绘图对象的方法？

Answer 1

.on()正在使用某个特定的this（可能是png对象）调用其回调。

使用箭头功能从其词法范围继承this，而不是呼叫站点，因此您忽略this。

您应该使用正常的function() {}表达式，以便选择从呼叫站点传递的this。

Answer 2

您的问题与切换到使用Promise无关。您已经从常规功能切换到箭头功能，以便将回调转换为“已解析的”功能。事件。箭头函数没有自己的this。修复方法是将() =>切换回function () {并重新添加相应的}。

什么＆＃34;这＆＃34;在承诺创造中？

2 个答案: