javascript - Javascript 中的子类化

Question

我正在尝试创建 image library on github called Jimp 的子类.据我从文档中可以看出，您不会以通常的方式实例化该类。而不是说 new Jimp()，类似乎有一个名为 read 的静态方法，它充当构造函数。从文档...

Jimp.read("./path/to/image.jpg").then(function (image) {
    // do stuff with the image
}).catch(function (err) {
    // handle an exception
});

从文档看来，read() 返回的 image 是一个实例，允许调用者执行类似 image.resize( w , h[, mode] ); 等等。

我想让我的子类调用者从一个不同的静态方法开始，该方法读取图像并做一些事情，总结如下......

class MyJimpSubclass extends Jimp {

    static makeAnImageAndDoSomeStuff(params) {
        let image = null;
        // read in a blank image and change it
        return Jimp.read("./lib/base.png").then(_image => {
            console.log(`image is ${_image}`);
            image = _image;
            let foo = image.bar();  // PROBLEM!
            // ...
            // ...
        .then(() => image);
    }

    bar() {
        // an instance method I wish to add to the subclass
    }

// caller
MyJimpSubclass.makeAnImageAndDoSomeStuff(params).then(image => {
    //...
});

你可能会猜到 nodejs 在 let foo = image.bar(); 行上生气了，说

TypeError image.bar is not a function

.

我认为这是可以理解的，因为我使用 Jimp.read() 获得了该图像。当然，这不会返回我的子类的实例。

1. 第一个想法:将其更改为 MyJimpSubclass.read()。同样的问题。

2. 第二个想法:实现我自己的静态读取方法。同样的问题。

   static read(params) {
       return super.read(params);
   }
   

3. 第三个想法:Ask SO

Answer 1

implementation of Jimp.read具体指的是 Jimp，所以你必须在你的子类中复制和更改它(恶心，但不会破坏任何东西，因为构造函数也是 API 的一部分)或发出拉取请求它更改为此并明确支持子类化:

static read(src) {
    return new Promise((resolve, reject) => {
        void new this(src, (err, image) => {
            if (err) reject(err);
            else resolve(image);
        });
    });
}

或者，您可以将所有功能作为模块上的一组函数来实现。在发出拉取请求后，这将是我列表中的下一个。不推荐代理。

const makeAnImageAndDoSomeStuff = (params) =>
    Jimp.read("./lib/base.png").then(image => {
        console.log(`image is ${image}`);
        let foo = bar(image);
        // …
        return image;
    });

function bar(image) {
    // …
}

module.exports = {
    makeAnImageAndDoSomeStuff,
    bar,
};

即使更改原型(prototype)也比代理更好(但这只是第一个选项的更差版本，重新实现 read):

static read(src) {
    return super.read(src)
        .then(image => {
            Object.setPrototypeOf(image, this.prototype);
            return image;
        });
}