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

【问题标题】：Call javascript class method from another method从另一个方法调用 javascript 类方法
【发布时间】：2013-07-08 06:14:16
【问题描述】：

我在 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 中出现错误：“Reference error : rotateSpinner”未定义。

为什么会出现？

【问题讨论】：

stackoverflow.com/questions/2233710/…
我已经看过帖子但还没有弄清楚问题，rotateSpinner 没有被调用。我没有按照那个问题的建议使用 new 运算符。
尝试将 rotateSpinner 变量定义为全局变量。

标签： javascript jquery

【解决方案1】：

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 
}

【讨论】：

同意这个:)。一种最佳实践是我们可以分配一个变量var that = this。

【解决方案2】：

取决于你如何调用这个函数。

如果你这样称呼它：

Spinner().rotateSpinner(arg1, arg2);

你会遇到你提到的错误。

正确的用法是：

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

你最好多了解一下 javascript 的变量范围。

【讨论】：

它与新的 Spinner().rotateSpinner(,) 方法一起使用。所以这意味着在javascript中没有私有方法或从内部方法调用方法的概念？？我认为它只是一个声明的方法并从另一个方法调用它。但是从对象引用中调用它对我来说很奇怪。
@TahaIqbal 是的，你可以从其他方法调用其他方法。但是在您的情况下，您正在调用 dom-element 的方法，而不是您的类。下面看看我的回答
这是关于调用者是谁！？如果像“Spinner().rotateSpinner(arg1, arg2);”这样称呼它，表示调用者是“window”，那么脚本引擎会尝试在全局env中查找“rotateSpinner”，显然没有这样的方法在里面。然后发生错误。