如何在javascript中复制构造函数中的对象

Question

我要创建自定义图像构造函数：

var image1 = new imgConstructor("picture.png", 100, 50);

我试过了：

var imgConstructor = function(src, width, height) {
    this = new Image(width, height);
    this.src = src;
}

但是this = new Image()无效。

我知道我可以使用工厂函数来做到这一点：

var imgConstructor = function(src, width, height) {
    var img = new Image(width, height);
    img.src = src;
    return img;
}
var image1 = imgConstructor("picture.png", 100, 50);

但我想使用构造函数，使用 "new"。有什么想法吗？

Answer 1

但我想使用new 来处理构造函数。有什么想法吗？

不，这是不可能的。毕竟你不能继承Image。如果您需要使用自己的方法的“实例”，最好创建一个包装器对象（例如在构造函数中执行 this.img = new Image(…)）。

使用工厂函数完全没问题，在这里似乎很合适。如果你出于某种原因想使用new，你可以在你的工厂函数上使用new，它仍然可以工作（尽管产生Image，而不是imgConstructor的实例）。

Answer 2

继承在这里帮不了你。因为Image 不能被继承。 See why here

基本解释：

var a = new Image();
console.log(a.constructor); // Should be function Image() { [native code] }
// OUTPUT: function HTMLImageElement() { [native code] }

var b = new HTMLImageElement();
// Uncaught TypeError: Illegal constructor

所以，你的解决方案是正确的。

编辑： @user86745458 的解决方案有效，但正如 @Bergi 所说：

当有人调用 new imgConstructor 时，通常会期望 结果是 imgConstructor 的一个实例。并非总是如此 构造函数显式返回一个可能是某物的对象 不同。

尝试应用旧的解决方案（来自@user86745458）并检查：

new imgConstructor() instanceof imgConstructor
// OUTPUT: false 
imgConstructor() instanceof imgConstructor
// OUTPUT: false
imgConstructor() instanceof Image
// OUTPUT: true

Answer 3

尝试添加类似这样的内容

var imgConstructor = function(src, width, height) {
    var img = this;
    img = new Image(width, height);
    img.onload = function(){
      // image  has been loaded
    };
    img.src = src;
    return img;
}