Javascript：创建一个等同于 new Image() 的类答案

【问题标题】：Javascript: creating a class equivalent to new Image()Javascript：创建一个等同于 new Image() 的类
【发布时间】：2023-01-05 19:14:18
【问题描述】：

如何创建一个类新图片（）？例子：

我向此类添加了一个原型，例如：Image.prototype.convert = function() {}

const img = new Image();
console.log(img) //will return the <img> element

而且我仍然可以执行 img.convert();

所以我创建了一个这样的类：

class Video {

    constructor() {

        return document.createElement("VIDEO");

    }

    convert() {

        console.log("converted");

    }

}

这样我将无法访问 new Video.convert()，因为我得到的只是元素。然而，如果我不在构造函数中返回一个元素，new Video 将只返回一个类。

所以并排：

const img = new Image();
const vid = new Video();
console.log(img) //<img>
console.log(vid) //<<video>
img.convert() // *converted*
vid.convert() //error: vid.convert is not a function

【问题讨论】：

您不得 return 构造函数中的对象。您的 vid 不是 Video 实例。
“新视频只会返回一个类“ - 不确定你的意思，还有，那有什么问题？
如果您想像在Image.prototype 上创建属性一样，为什么不直接在HTMLVideoElement.prototype 上创建属性？（注意 either is a bad idea 仍然）
dev.to/giantmachines/stop-using-javascript-classes-33ij
这很有趣@Bergi 谢谢，这篇文章已经超过 12 年了，并且讨论了当时的浏览器版本，它在今天是否仍然相关？

标签： javascript class prototype

【解决方案1】：

在收到有用的命令后，我意识到扩展 DOM 并不像我最初想的那样是个好主意。因为它可能会导致与潜在的其他库发生冲突，降低性能等等。即使包装可以解决碰撞问题，编写它也不会那么方便并且仍然存在性能问题。

我想有些替代方案只是编写实用程序函数、Helper 对象，甚至使用 CustomElementRegistry。

【讨论】：