0

次のコード:

define(function () {

var Module = function() {

    $('.fixed-sidebar').each( function( index ) {
        FixedSidebar.apply( this );
    });

}

var FixedSidebar = function() {
    var me = this;
    this.hiddenStatus = true;
    console.log ( this.toggle );

    $($(this).find('.fixed-handler')).on('click', function() {
        console.log('event passed');
        //me.toggle();
        //console.log ( this );
    });
}

FixedSidebar.prototype = {
    constructor : FixedSidebar
    ,toggle : function() {

             if( this.hiddenStatus ) {
                this.hiddenStatus = false;
                $('.fixed-sidebar').animate( {
                    left: '-300px'
                }, 1000);
             } else {
                this.hiddenStatus = true;
                $('.fixed-sidebar').animate( {
                    left: '0px'
                }, 1000);
             }

    }
};

return Module;
});

次の瞬間に JavaScript が「トグル」メソッドのプロトタイプを作成していない理由がわかりませんか?

console.log ( this.toggle ); // undefined
4

3 に答える 3

2

問題は、FixedSidebar関数を で呼び出すことですapply(this)。これによりthis、関数内の がクリックされた DOM オブジェクトに変更されます。より良い方法は、で関数を呼び出すことですnew。したがって this、プロトタイプにトグル関数を持つ新しく作成された関数オブジェクトになり、DOM オブジェクトを関数パラメーターとしてコンストラクター関数に渡します。

define(function () {

  var Module = function () {

    $('.fixed-sidebar').each(function (index) {
      new FixedSidebar(this);
    });

  }

  var FixedSidebar = function (element) {
    var me = this;
    this.hiddenStatus = true;
    console.log(this.toggle);

    $($(element).find('.fixed-handler')).on('click', function () {
      console.log('event passed');
      //me.toggle();
      //console.log ( this );
    });
  }

  FixedSidebar.prototype = {
    constructor: FixedSidebar,
    toggle: function () {

      if (this.hiddenStatus) {
        this.hiddenStatus = false;
        $('.fixed-sidebar').animate({
          left: '-300px'
        }, 1000);
      } else {
        this.hiddenStatus = true;
        $('.fixed-sidebar').animate({
          left: '0px'
        }, 1000);
      }

    }
  };

  return Module;
});
于 2013-09-06T11:35:26.010 に答える
0

この方法で呼び出す場合:

FixedSidebar.apply( this );

apply &で window オブジェクトを渡すため、これは後で同じ window オブジェクトを参照します。

むしろそれを次のように初期化しますnew FixedSidebar()

注:上記のコンテキストでは、これは DOM 要素です。

于 2013-09-06T11:34:29.490 に答える
-1

試す：


var FixedSidebar = function() {
    var me = this;
    me.hiddenStatus = true;
    console.log ( me.toggle() );

    $($(this).find('.fixed-handler')).on('click', function() {
        console.log('event passed');
        //me.toggle();
        //console.log ( this );
    });
}

FixedSidebar.prototype = {
    var _this = this;
    constructor : FixedSidebar,
    toggle : function() {

             if( _this.hiddenStatus ) {
                _this.hiddenStatus = false;
                $('.fixed-sidebar').animate( {
                    left: '-300px'
                }, 1000);
             } else {
                _this.hiddenStatus = true;
                $('.fixed-sidebar').animate( {
                    left: '0px'
                }, 1000);
             }

    }
};
于 2013-09-06T11:31:41.823 に答える