Question

function InfoImage(path,title){
    this.path = path;
    this.title = title;
    this.color = undefined;
    this.maxPixels = undefined;

    this.init = function(){
        var canvas = document.querySelector("canvas");
        var img_Color = new Image_Processing_Color(canvas);
        var img = new Image();
        img.onload = function () {
            img_Color.init(img);
            this.color = img_Color.getDominantColor(); //this doesnt work
            this.maxPixels = img_Color.getDominantColorPixels();
        };
        img.src = path;
    };


    this.init();
}

通过这个例子，我如何将这些变量保存为InfoImage变量？我知道使用this会影响Image而不是InfoImage ......

Answer 1

如果我理解正确，通常的答案是使用变量来引用this，init然后关闭：

function InfoImage(path,title){
    this.path = path;
    this.title = title;
    this.color = undefined;
    this.maxPixels = undefined;

    this.init = function(){
        var canvas = document.querySelector("canvas");
        var img_Color = new Image_Processing_Color(canvas);
        var img = new Image();
        var infoimg = this;                                         // <===

        img.onload = function () {
            img_Color.init(img);
            infoimg.color = img_Color.getDominantColor();           // <===
            infoimg.maxPixels = img_Color.getDominantColorPixels(); // <===
        };
        img.src = path;
    };
}

您还可以使用Function#bind：

function InfoImage(path,title){
    this.path = path;
    this.title = title;
    this.color = undefined;
    this.maxPixels = undefined;

    this.init = function(){
        var canvas = document.querySelector("canvas");
        var img_Color = new Image_Processing_Color(canvas);
        var img = new Image();

        img.onload = function () {
            img_Color.init(img);
            this.color = img_Color.getDominantColor();
            this.maxPixels = img_Color.getDominantColorPixels();
        }.bind(this);                                             // <===
        img.src = path;
    };
}

使用ES6（下一版本的JavaScript），您将能够使用箭头功能，因为与普通函数不同，箭头函数从它们所依赖的上下文继承它们的this值。定义：

function InfoImage(path,title){
    this.path = path;
    this.title = title;
    this.color = undefined;
    this.maxPixels = undefined;

    this.init = function(){
        var canvas = document.querySelector("canvas");
        var img_Color = new Image_Processing_Color(canvas);
        var img = new Image();

        img.onload = () => {                              // <===
            img_Color.init(img);
            this.color = img_Color.getDominantColor();
            this.maxPixels = img_Color.getDominantColorPixels();
        };
        img.src = path;
    };
}

Answer 2

您需要this和that模式：

function InfoImage(path, title) {
    var _this = this;
    this.init = function(){
        var img = new Image();
        img.onload = function () {
            _this.color = img_Color.getDominantColor();
        };
    };
};

Answer 3

function InfoImage(path,title){
    var self = this;

    this.path = path;
    this.title = title;
    this.color = undefined;
    this.maxPixels = undefined;

    this.init = function(){
        var canvas = document.querySelector("canvas");
        var img_Color = new Image_Processing_Color(canvas);
        var img = new Image();
        img.onload = function () {
            img_Color.init(img);
            self.color = img_Color.getDominantColor(); //this doesnt work
            self.maxPixels = img_Color.getDominantColorPixels();
        };
        img.src = path;
    };

    this.init();
}

这很容易。 this是一个关键字，取决于函数的绑定调用上下文，但它可以像JavaScript中的任何其他内容一样存储到变量中。

JavaScript保存这个。 image.onLoad中的变量

3 个答案: