Question

我有这个原型链：

对象 - ＆gt;面板原型 - ＆gt; IllustrationPanel的原型 - ＆gt; ModernPW3IllustrationPanel的原型

ModernPW3IllustrationPanel的一些功能继承自IllustrationPanel。

但当我调用其中一个继承函数时，ModernPW3IllustrationPanel现在为'null'。

这是我的代码：

function Panel(n, t){
    this.name = n;
    this.title = t;
    this.element = null;
}

Panel.ID_PREFIX = 'fcm-panel-';
Panel.CLASS_TOGGLE = 'active';

Panel.CONTAINER_ELEMENT = $('.fcm-panel-container');
Panel.MENU_ELEMENT = $('#fcm-menu');
Panel.TEMPLATE_CONTAINER_ELEMENT = $('#fcm-template-panel');
Panel.TEMPLATE_MENU_ELEMENT = $('#fcm-template-menu');

Panel.prototype.getId = function(){ return Panel.ID_PREFIX + this.name; }

// Retourne l'élément jQuery du panneau /!\Il peut être vide, si le panneau n'a pas été chargé
Panel.prototype.get = function(){ return Panel.CONTAINER_ELEMENT.find('#' + this.getId()); }

// Appelé quand le panneau est affiché
Panel.prototype.onFocus = function(){
    // À redéfinir
}

// Appelé quand le panneau est caché
Panel.prototype.onBlur = function(){
    // À redéfinir
}

// Appelé quand le panneau est activé
Panel.prototype.onActivate = function(){
    // À redéfinir
}

/**
 * Affiche le panneau et met son lien du menu en surbrillance
 */
Panel.prototype.show = function(){
    this.get().addClass(Panel.CLASS_TOGGLE);
    Panel.MENU_ELEMENT.find('[data-panel="'+this.name+'"]').parent('li').addClass(Panel.CLASS_TOGGLE);
    this.onFocus();
}

/**
 * Cache le panel
 */
Panel.prototype.hide = function(){
    this.get().removeClass(Panel.CLASS_TOGGLE);
    Panel.MENU_ELEMENT.find('[data-panel="'+this.name+'"]').parent('li').removeClass(Panel.CLASS_TOGGLE);
    this.onBlur();
}

/**
 * Ajoute le panel au menu et l'active
 * (Le contenu du panel doit déjà avoir été ajouté au DOM)
 */
Panel.prototype.activate = function(){
    Panel.TEMPLATE_MENU_ELEMENT.append('<li><a href="#" data-panel="'+this.name+'">'+this.title+'</li>');
    this.element = $('#'+Panel.ID_PREFIX+this.name);
    this.onActivate();
}





function IllustrationPanel(n, t){
    Panel.call(this, n, t);

    this.cropSelector = null;
}
IllustrationPanel.prototype = Object.create(Panel.prototype);

IllustrationPanel.prototype.onFocus = function(){
    // Gestion du plugin ImgAreaSelect
    //console.log('illustration onFocus');
    console.log(this.cropSelector);
    if(this.cropSelector != null){
        this.cropSelector.setOptions({show:true, hide:false});
        this.cropSelector.update();
    }
}

IllustrationPanel.prototype.onBlur = function(){
    // Gestion du plugin ImgAreaSelect
    console.log('illustration onBlur');
    console.log(this.cropSelector);
    if(this.cropSelector != null){
        this.cropSelector.setOptions({show:false, hide:true});
        this.cropSelector.update();
    }
}

IllustrationPanel.prototype.onActivate = function(){

    var varthis = this;

    Panel.CONTAINER_ELEMENT.on('uploadSuccess', '#fcm-form-illustration', function(){
        varthis.onImageLoad();
    });

    Panel.CONTAINER_ELEMENT.on('uploadFailure', '#fcm-form-illustration', function(){
        varthis.onImageUnload();
    });

    Panel.CONTAINER_ELEMENT.on('click', '#fcm-illsutration-center-viewport', function(){
        varthis.centerImage();
        return false;
    });
}

IllustrationPanel.prototype.onImageLoad = function(){
    var image = this.element.find('.file-preview');
    var centerbutton = this.element.find('#fcm-illsutration-center-viewport');
    centerbutton.addClass('active');
    image.load(function(){
        // init imgAreaSelect
        centerbutton.trigger('click');
    });
}

IllustrationPanel.prototype.onImageUnload = function(){
    var image = this.element.find('.file-preview');
    var centerbutton = this.element.find('#fcm-illsutration-center-viewport');
    centerbutton.removeClass('active');
    image.imgAreaSelect({remove:true});
}

IllustrationPanel.prototype.centerImage = function(){

    // init imgAreaSelect
    var form = this.element.find('form');
    var image = form.find('.file-preview');
    var axis = true;    // true = X(portait), false = Y(paysage)
    if(image.width() / image.height() > myFuncard.illusWidth / myFuncard.illusHeight)
        axis = false;
    //console.log(axis);

    var cx1 = 0, cx2 = 0, cy1 = 0, cy2 = 0;

    if(axis){
        cx2 = image.width();
        var height = image.width() / (myFuncard.illusWidth / myFuncard.illusHeight);
        //console.log('height:', height);
        cy1 = (image.height() - height) / 2;
        cy2 = cy1 + height;
    } else {
        var width = image.height() * (myFuncard.illusWidth / myFuncard.illusHeight);
        //console.log('width:', width);
        cx1 = (image.width() - width) / 2;
        cx2 = cx1 + width;
        cy2 = image.height();
    }

    form.find('#fcm-field-illuscrop-x').val('');
    form.find('#fcm-field-illuscrop-y').val('');
    form.find('#fcm-field-illuscrop-w').val('');
    form.find('#fcm-field-illuscrop-h').val('');

    //console.log(cx1, cy1, cx2, cy2);

    this.cropSelector = image.imgAreaSelect({
        instance: true,
        handles: true,
        persistent: true,
        aspectRatio: myFuncard.illusWidth + ':' + myFuncard.illusHeight,
        x1: cx1,
        y1: cy1,
        x2: cx2,
        y2: cy2,
        onSelectEnd: function (img, selection) {
            img = $(img);
            var px = selection.x1 / img.width();
            var py = selection.y1 / img.height();
            var pw = selection.width / img.width();
            var ph = selection.height / img.height();
            form.find('#fcm-field-illuscrop-x').val(px*100);
            form.find('#fcm-field-illuscrop-y').val(py*100);
            form.find('#fcm-field-illuscrop-w').val(pw*100);
            form.find('#fcm-field-illuscrop-h').val(ph*100);
        }

    });

}




function ModernPW3IllustrationPanel(n, t){
    IllustrationPanel.call(this, n, t);
}
ModernPW3IllustrationPanel.prototype = Object.create(IllustrationPanel.prototype);

ModernPW3IllustrationPanel.prototype.centerImage = function(){
    IllustrationPanel.prototype.centerImage.call(this);

    if(this.cropSelector != null){
        this.cropSelector.setOptions({classPrefix:'mpw3-imgareaselect', handles:true});
        this.cropSelector.update();
    }

    console.log(this.cropSelector);
}

// (...)

existingPanels['mpw3-illustration'] = new ModernPW3IllustrationPanel('illustration', 'Illustration');

单击“centerbutton”时以及加载图像时

将调用IllustrationPanel.prototype.centerImage

我的问题如下：

当我加载图像时，this.cropSelector已初始化良好：console.log(this.cropSelector);中的ModernPW3IllustrationPanel.prototype.centerImage打印好的$ .imgAreaSelect对象。
当我调用ModernPW3IllustrationPanel.onBlur（因此原型层次结构调用IllustrationPanel.prototype.onBlur）时，console.log（）语句将打印null。
- ＆GT;我的$ .imgAreaSelect对象去了哪里？：（

感谢您的帮助！

Javascript继承 - “this”发生了什么？

0 个答案: