1

次のコードを実行しようとすると、「未定義」エラーが発生します。それはライン上で起こりthis.xPositionForPageAtIndex(selectedPageNumber)ます。ログに記録しようとするとthis、関数を除くすべてのインスタンスプロパティがそこにあります。

function Gallery(div) {
    this.count = 5;
    this.pageWidth = 500;
    this.selectedPage = 1;

    this.xPositionForPageAtIndex = function(pageIndex) {
        if (pageIndex < 1 || pageIndex > this.count) {
            return 0.0;
        }

        return (pageIndex - 1) * this.pageWidth;
    }
}

Gallery.prototype = {
    set selectedPage(selectedPageNumber) {
        var page = this.pages[((selectedPageNumber) + 1)];

        if (!page.classList.contains("animate")) {
            page.classList.add("animate");
        }

        if (!page.classList.contains("final")) {
            page.classList.add("final");
        }

        console.log(this);

        this.binder.setAttribute("-webkit-transform", "translateX(" -this.xPositionForPageAtIndex(selectedPageNumber) + "px)");

        this.selectedPage = page;
    }
}

私はJavascriptOOPに少し慣れていませんが、この答えを適切に調査するのに十分な用語を本当に知っているとは思いません。

4

1 に答える 1

1

コンキャットの問題

あなたが問題を抱えていると言った行で、プラスではなくマイナスがありました：

"translateX(" -this.xPositionForPageAtIndex(selectedPageNumber)

する必要があります

"translateX("  + this.xPositionForPageAtIndex(selectedPageNumber)

プロトタイプにパブリックメソッドを入れて最適化する

xPositionForPageAtIndexまた、プライベートフィールドに依存しないため、プロトタイプも入れることをお勧めします。すべてのパブリック関数（つまり、プライベートフィールドに依存しない）をプロトタイプに入れることができます。そうすれば、作成しているオブジェクトの各インスタンスの関数のコピーはありません。

あなたのコードに基づいて、Galleryこれが問題になるのに十分なインスタンスがあるとは思わないが、それでもそれは良い習慣である。

一方、関数がある種のプライベートフィールドに依存している場合、それは特権関数であり、プロトタイプに入ることができないことを意味します。このようなもの：

function Gallery(someParam){
    //this is a private variable
    var hiddenVar = someParam + "bar";

    // this is a privileged method: publicly accessible, but
    // can "see" private variables
    this.showHidden = function() {
        return hiddenVar
    };      
};
var gal = new Gallery("foo");
gal.hiddenVar; // undefined
gal.showHidden(); // "foobar"

意図しない無限再帰

より大きな問題は次の行です。

this.selectedPage = page;

その行は、プロパティのセッター内にありますselectedPage。

その行はselectedPage再帰的に自分自身を呼び出し、で終わることができるだけRangeErrorです。

関数の観点からそれを書くことはそれをもう少し明確にするので、ここで何が起こっているのかです：

var a = {
    foo: function(param){
        // do some stuff
        this.foo(4);
    }
};

呼び出すa.foo(2)と。になりRangeErrorます。

ES5セッターの動作方法のため、少し隠されています。セッターを使用すると、次のようになります。

var a = {
    set foo(){
        // do some stuff
        this.foo = 3;
    }
};

setter関数が再帰的に呼び出されているため、呼び出すa.foo = 2 と結果が返されます。RangeError

それが少し役立つことを願っています。Douglas Crockfordをまだチェックアウトしていない場合は、YouTubeで彼をチェックしてください。あなたをかなり助けるかもしれないいくつかの良い講義があります。

于 2013-01-02T05:26:07.780 に答える