从另一个方法调用javascript类方法

Call javascript class method from another method

本文关键字：javascript 类方法 调用 方法 另一个      更新时间：2023-09-26

我在Javascript类中从另一个方法调用一个方法时遇到问题。

这是代码

    function Spinner( max_value , min_value , div_id ){
    var MAX_VALUE = 25;
    var MIN_VALUE = -25;
    var DEFAULT_VALUE = 0;

    this.maxValue = max_value;
    this.minValue = min_value;
    this.divId    = div_id;
    this.spinnerControl; //spinner control object that is populated in getSpinner() method.

    this.rotateSpinner = function (spinnerTextBoxId,up) {
        document.getElementById(spinnerTextBoxId).value = up ? parseInt(document
                .getElementById(spinnerTextBoxId).value) + 1 : parseInt(document
                .getElementById(spinnerTextBoxId).value) - 1;
    };

    this.getSpinner = function( ){
        spinnerControl = $('<input type="text"></input>')
                .attr('id' , 'spinner')
                .attr('val' , DEFAULT_VALUE)
                    .add( $('<ul></ul>')
                        .addClass("spinner")
                        .append(
                            $('<li></li>')
                            .append($('<input type="button"></input>') 
                                .attr({
                                    id    : 'upButton',
                                    value : '&#9650;'
                                }).appendTo( $('<li></li>') )
                            )   

                        ).append( $('<li></li>')
                            .append($('<input type="button"></input>') 
                                    .attr({
                                        id    : 'downButton',
                                        value : '&#9660;'
                                    }).appendTo( $('<li></li>') )
                            )
                        )   
                    );
            var timeoutId = 0;
            $('#upButton' , spinnerControl).mousedown(function() {
                console.log('mouse down');
                timeoutId = setInterval(this.rotateSpinner('spinner' , true ) , 200);
            }).bind('mouseup mouseleave', function() {
                console.log('mouse left');
                //clearTimeout(timeoutId);
            });

//      $('#downButton').mousedown(function() {
//          alert('herer');
//          //timeoutId = setInterval("rotateSpinner('spinner' , false ) ", 200);
//      }).bind('mouseup mouseleave', function() {
//          clearTimeout(timeoutId);
//      });
        return spinnerControl;
    };



//class END 
}

在这个js文件中，错误显示在firebug中：没有定义"引用错误：rotatePinner"。

为什么会出现？

this引用的是DOM元素，在本例中为'#upButton'。如果添加一个指向类的变量，那么在方法中定义函数时可以引用这个变量，而不是this。

function Spinner( max_value , min_value , div_id ){
var MAX_VALUE = 25;
var MIN_VALUE = -25;
var DEFAULT_VALUE = 0;

this.maxValue = max_value;
this.minValue = min_value;
this.divId    = div_id;
this.spinnerControl; //spinner control object that is populated in getSpinner() method.

this.rotateSpinner = function (spinnerTextBoxId,up) {
    document.getElementById(spinnerTextBoxId).value = up ? parseInt(document
            .getElementById(spinnerTextBoxId).value) + 1 : parseInt(document
            .getElementById(spinnerTextBoxId).value) - 1;
};

this.getSpinner = function( ){
    var self = this;
    spinnerControl = $('<input type="text"></input>')
            .attr('id' , 'spinner')
            .attr('val' , DEFAULT_VALUE)
                .add( $('<ul></ul>')
                    .addClass("spinner")
                    .append(
                        $('<li></li>')
                        .append($('<input type="button"></input>') 
                            .attr({
                                id    : 'upButton',
                                value : '&#9650;'
                            }).appendTo( $('<li></li>') )
                        )   

                    ).append( $('<li></li>')
                        .append($('<input type="button"></input>') 
                                .attr({
                                    id    : 'downButton',
                                    value : '&#9660;'
                                }).appendTo( $('<li></li>') )
                        )
                    )   
                );
        var timeoutId = 0;
        $('#upButton' , spinnerControl).mousedown(function() {
            console.log('mouse down');
            timeoutId = setInterval(self.rotateSpinner('spinner' , true ) , 200);
        }).bind('mouseup mouseleave', function() {
            console.log('mouse left');
            //clearTimeout(timeoutId);
        });

//      $('#downButton').mousedown(function() {
//          alert('herer');
//          //timeoutId = setInterval("rotateSpinner('spinner' , false ) ", 200);
//      }).bind('mouseup mouseleave', function() {
//          clearTimeout(timeoutId);
//      });
    return spinnerControl;
};



//class END 
}

取决于如何调用此函数。

如果你这样称呼它：

Spinner().rotateSpinner(arg1, arg2);

你会犯你提到的错误。

正确的用法是：

new Spinner().rotateSpinner(arg1, arg2);

您最好了解更多关于javascript变量范围的信息。

相关文章：