Promise 创建中的“this”是什么？ [复制]答案

【问题标题】：What's "this" inside a promise creation? [duplicate]Promise 创建中的“this”是什么？ [复制]
【发布时间】：2018-11-25 12:05:12
【问题描述】：

有一个名为 pngjs-draw 的 github 包将图元绘制到 png 上。正是我需要的，但我希望它与其他使用 Promise 的异步代码一起运行。我正在尝试这样做，遇到了一些我对“这个”不了解的事情。来自 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'));
  });

它在“已解析”函数中使用“this”，this 似乎是具有所有绘图方法的实例。

我想做一个更通用的版本，除了返回一个承诺、处理错误等等。但似乎在创建承诺时我不能以同样的方式使用“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 创建中访问绘图对象的方法吗？

【问题讨论】：

这与promise构造函数无关，与.on('parsed', function() {到.on('parsed', () => {的变化有关
谢谢@Bergi。副本帮助我理解我误诊错误是关于承诺，而不是箭头函数。 SO规则是否具有相同答案的不同问题是重复的？似乎将一个人的问题标记为 dup（不做作业等）会带来一些耻辱，但考虑到我的基本误解，我认为我不会通过研究发现那个 dup。无论如何，很高兴得到帮助解决这个问题。再次感谢。
关闭问题没有故意的污名。作为受骗者被关闭只是用来快速将您和可能遇到此问题的任何其他人与答案联系起来。作为骗子被关闭并不表明另一个问题更好，只是你的答案已经存在；有时，关闭的问题写得更好，但另一个问题已经有了答案。在这种情况下，前提是基于对错误来自何处的误解，因此仅作为骗子关闭可能还不够，但像 Bergi 那样关闭并留下评论就足够了。

标签： javascript promise fs

【解决方案1】：

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

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

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

【讨论】：

谢谢。希望我能将它们都标记为正确。

【解决方案2】：

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

【讨论】：