javascriptのメソッドでの再帰処理は？

Question

練習がてら画面上部にある要素のtopをマイナスにして上にひっこめてしまう関数をall javascriptで作成しました。
使いまわしができるようにオブジェクトにしてしまおうと考えとりあえず関数名をメソッドに変えて試しに動かしてみたらエラーが出ました。
メソッドで再帰処理をしようとしているのが原因の様ですが
再帰処理には知識が無いため、メソッドで再帰をするいいやり方が思い浮かびませんでした。
再帰処理をやめて書き直すべきなのでしょうか？

あと再帰処理に関していい参考書があればお教え願えるとありがたいです

//hiddenElement.js
//hiddenElement.
//4つのメソッド
//登録
//      hiddenElement.entry(Ypx,element);
//
//Ypxは反応するスクロール量、elementは隠したいエレメント
//スクロール量が規定に達すると画面上の隠したいエレメントをtopを操作することで隠してしまう。
//問題点
//      1.操作量が15pxごとなので中途半端な大きさのエレメントだと全部隠れてくれない
//      2.再読み込みに対応していない
//      3.IEだと動かない(はず)、setTimeoutの引数渡し方法を修正すると治るはず
//

//エレメントを隠す
//該当エレメントのtopとheightを調べ、一定間隔ごとにtopを減らしていきheightと同値になると終了

var hiddenElement={
        hide:function (element){
                var top=element.offsetTop;
                var height=element.offsetHeight;
                if(0>=(top+height)){
                        return;
                }
                setTimeout(
                        function(element,top){
                                element.style.top=top-15+"px";
                                this.hide(element);
                        }
                ,10,element,top);
        },
        show:function(element){
                var top=element.offsetTop;
                var height=element.offsetHeight;
                if(0<=top){
                        return;
                }
                setTimeout(
                        function(element,top){
                                element.style.top=top+15+"px";
                                this.show(element);
                        }
                ,10,element,top);
        },
        //スクロール検知()
        senseEvent:function(Ypx,element){
                var a=document.body.scrollTop;
                var b=document.documentElement.scrollTop;
                c= a || b;
                //条件成立なら
                if(c>Ypx){
                        this.hide(element);
                }else if(0>element.offsetTop){
                        this.show(element);
                };
        },

        entry:function (Ypx,element){
                window.addEventListener("scroll",function(){    hiddenElement.senseEvent(Ypx,element);  },false);
        }



}

Answer 1

JavaScript のよくある問題として、下記のような呼び方だと (1) の部分で this が Windows オブジェクトになるため、(2) は undefined になります。

var obj = {
    aaa: function(){
        setTimeout(function(){
            console.log(this);      // (1) Windows
            console.log(this.bbb);  // (2) undefined
        }, 1);
    },
    bbb: function(){
        console.log("this is bbb");
    },
};

obj.aaa();

次のように setTimeout の外側で this を self などの変数に入れて、setTimeout の中のクロージャーに束縛させることで回避できます。

var obj = {
    aaa: function(){
        var serf = this;
        setTimeout(function(){
            serf.bbb();
        }, 1);
    },
    bbb: function(){
        console.log("this is bbb");
    },
};

obj.aaa();

もしくは Function.bind を使うこともできます。このようにすれば setTimeout に渡しているクロージャーの中の this が bind の引数に渡したオブジェクトになります。

var obj = {
    aaa: function(){
        setTimeout((function(){
            this.bbb();
        }).bind(this), 1);
    },
    bbb: function(){
        console.log("this is bbb");
    },
};

obj.aaa();

Comments

[gyojin]

ありがとうございます。Function.bindは面白いですね。
setTimeout内でのthis使用に問題があるとは気が付きませんでした。

素人ゆえの発想ですがthisではなくオブジェクト名を直書きでもいいのでしょうか？

[ngyuki]

「setTimeout内での」というより、クロージャーの中ので、です、setTimeout はあまり関係ありません。

この例ではオブジェクト名を直書きでも大丈夫かもしれません。
が prototype を使って普通のクラスベースの書き方になるとその方法は使えなくなります。