Question

我正在尝试为myImage分配一个值。当我查看js目标文件时，myImage甚至不存在。显然这会引发错误。如何在打字稿类中保留此范围？

我在这里要做的是使用Jimp库加载图像。然后引用该加载的图像来执行操作，例如resize是一个在Jimp中加载图像的方法，所以我希望能够调用i.myImage.resize（100,100）。

"use strict";
var Promise = require('bluebird');
var Jimp = require("jimp/jimp");


class Image{
    public myImage:any;

    constructor(newImage:string){

         Promise.all([new Jimp(newImage)]).then(function(img){
            this.myImage = img;

         }).catch(function(e){
             console.log(e);
         })
       }
    }

var i = new Image('./jd.jpg');

console.log(i.myImage)

输出：

undefined
[TypeError: Cannot set property 'myImage' of undefined]

使用回调：

var Jimp = require("jimp/jimp");


class Image {

    public myImage: any;

    constructor(newImage: string, typeOfImage: string) {
        var self = this;
        new Jimp(newImage, function(e,img) {
           self.myImage = img;
        });
     }

}

var i = new Image('./jd.jpg');

console.log(i.myImage) // outputs undefined

Answer 1

Jimp构造函数不会返回一个承诺，所以你在这里使用Promise.all()可能不会做你想做的事情。由于有些人对此感到困惑，承诺没有任何神奇的力量以某种方式知道Jimp对象何时完成加载它的图像所以如果这是你在这里尝试做的，它就不会那样工作。 Jimp构造函数返回一个Jimp对象，而不是一个promise。

我没有看到任何特别的理由不仅仅使用你传递给构造函数的Jimp回调并使你的代码像这样工作：

var Jimp = require("jimp/jimp");

class Image {
    private myImage: any;

    constructor(newImage: string, typeOfImage: string) {
        var self = this;
        new Jimp(newImage, function(img) {
           self.myImage = img;
           // you can use the img here
        });
        // you cannot reliably use the img here
     }
}

但是，这样做看起来仍然会留下各种各样的松散结束，因为外界无法知道img何时完成加载并且你没有保存Jimp对象引用本身所以你不能在此图像上使用任何Jimp方法。正如我在评论中所说的那样，如果你分享了你在这里尝试做的事情的大局，那么我们可以更有可能帮助你找到更完整的问题解决方案。

打字稿：'this'的范围缩小

1 个答案: