0

私は OOP Javascript を初めて使用し、単純な効果を作成することで、それがどのように機能するかを理解しようとしています。私が遭遇している問題は、プロトタイプ遷移関数内のコンストラクター関数から変数を参照できないように見えることです。これに関するヘルプは素晴らしいでしょう。ありがとう。

jsフィドル

function AniSize( ele, nH, nW ) {
    this.element = ele;
    var origWidth = ele.width(),
    origHeight = ele.height(),
    newHeight = nH,
    newWidth = nW;
}

AniSize.prototype.transition = function() {
    this.element.hover(function() {
        $(this).animate({
            width: newWidth, // error: newWidth is not defined
            height: newHeight // error: newHeight is not defined
        });
    }, function() {
        $(this).animate({
            width: origWidth, // error: origWidth is not defined
            height: origHeight // error: origHeight is not defined
        });
    });
};

var box = new AniSize( $('div#box'), 200, 200 );
box.transition();
4

1 に答える 1

4

varスコープ外では使用できないローカル変数を宣言します。プロトタイプでアクセスできるように、AniSizeそれらをアタッチする必要があります。次に、イベントが作成している追加のスコープ内でこれらの変数を参照できるようthisに、キャッシュする必要があります。this

function AniSize( ele, nH, nW ) {
    this.element = ele;
    this.origWidth = ele.width();
    // same with the others...
}

AniSize.prototype.transition = function() {
    var self = this; // cache `this`

    this.element.hover(function() {
        $(this).animate({
            width: self.newWidth,
            height: self.newHeight
        });
    }, function() {
        $(this).animate({
            width: self.origWidth,
            height: self.origHeight
        });
    });
};
于 2013-08-03T00:14:04.623 に答える