承诺创建中的 "this" 是什么？

Question

有一个名为 pngjs-draw 的 github 包，可以将图元绘制到 png 上。正是我所需要的，但我希望它运行与其他使用承诺的异步代码一起使用。我正在尝试这样做，运行进入一些我不理解的东西 "this"。 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'));
  });

它在'parsed'函数中使用了"this"，this似乎是一个拥有所有绘图方法的实例。

我想制作一个更通用的版本，除了 return 承诺、处理错误等等。但似乎我在创建承诺时不能以相同的方式使用 "this" 。这是我的尝试...

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 类。你能建议一种在 promise 创建中访问绘图对象的方法吗？

Answer 1

.on() 正在用一些特定的 this（可能是 png 对象）调用它的回调。

使用箭头函数从其词法作用域而不是调用点继承 this，因此您忽略 this。

您应该使用正常的 function() {} 表达式，以便获取从调用站点传递的 this。

Answer 2

您的问题与切换到使用 Promise 无关。就是你从常规函数切换到箭头函数，用于回调到 'parsed' 事件。箭头函数没有自己的 this。解决方法是将 () => 切换回 function () { 并重新添加相应的 }。

承诺创建中的 "this" 是什么？

What's "this" inside a promise creation?

javascript

fs

promise