如何访问类原型Javascript中定义的事件处理程序中的类成员变量

How to access class member variables inside an event handler defined in a class prototype - Javascript

本文关键字：定义 程序 变量 成员 事件处理 原型 何访问 访问 Javascript      更新时间：2023-09-26

我见过这样的解决方案，当在构造函数中定义事件时，它可以工作：

在Javascript 中访问事件处理程序内的类成员变量

但是，当在原型中定义处理程序时，它没有查看以前解决方案中的"var_self"的范围。是否有一种变体适用于下面类似的代码？

问题是"幻灯片"处理程序中的"this"。。。引用HTML元素而不是MyView中的成员变量。

function MyView(wrapperDiv)
{
    this.contentW = 1200;
    this.vboxW = 600;
    this.vboxH = 400;
    this.vboxX = 0;
    this.vboxY = 0;
}
MyView.prototype = {
    initHorizontalScrollBar : function ($bar)
    {
        //create the wrappers for the slider
        if($bar.find('.slider-wrap').length==0)
            $bar.append('<'div class="slider-wrap"><'div class="slider-horizontal"><'/div><'/div>');//append the necessary divs so they're only there if needed
        $bar.find('.slider-wrap').width(this.svgWidth);
        //initialize the JQueryUI slider
        $bar.find('.slider-horizontal').slider({
            orientation: 'horizontal',
            min: 0,
            max: 100,
            range:'min',
            value: 0,
            slide: function(event, ui) {
                var difference = this.contentW-this.vboxW;
                if(difference<=0)
                    return;
                this.vboxX =  (ui.value) / 100 * ( this.contentW-this.vboxW);       // 0 >= ui.value <= 100
                this.svg.setAttribute("viewBox", toViewBoxString(this.vboxX, this.vboxY, this.vboxW, this.vboxH));
                $('ui-slider-range').width(ui.value+'%');//set the height of the range element
            }
          });     

        this.sizeHScrollbar();
    }
};

您只需要在initHorizontalScrollBar方法中添加一个包含正确引用的变量：

MyView.prototype = {
    initHorizontalScrollBar : function ($bar)
    {
        var _self = this;
        //create the wrappers for the slider
        if($bar.find('.slider-wrap').length==0)
            $bar.append('<'div class="slider-wrap"><'div class="slider-horizontal"><'/div><'/div>');//append the necessary divs so they're only there if needed
        $bar.find('.slider-wrap').width(this.svgWidth);
        //initialize the JQueryUI slider
        $bar.find('.slider-horizontal').slider({
            orientation: 'horizontal',
            min: 0,
            max: 100,
            range:'min',
            value: 0,
            slide: function(event, ui) {
                var difference = _self.contentW - _self.vboxW;
                if(difference<=0)
                    return;
                _self.vboxX =  (ui.value) / 100 * ( _self.contentW - _self.vboxW);       // 0 >= ui.value <= 100
                this.svg.setAttribute("viewBox", toViewBoxString(_self.vboxX, _self.vboxY, _self.vboxW, _self.vboxH));
                $('ui-slider-range').width(ui.value+'%');//set the height of the range element
            }
          });     

        this.sizeHScrollbar();
    }
};
相关文章：