Question

以下代码：

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在下一刻没有为'toggle'方法制作原型？

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

Answer 1

使用FixedSidebar调用apply(this)函数的问题。这会将函数中的this更改为单击的DOM对象。更好的方法是使用new调用函数，因此this将是新创建的函数对象，它将在其原型中具有toggle函数，并将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;
});

Answer 2

如果你这样打电话：

FixedSidebar.apply( this );

您使用apply＆amp;传递窗口对象。因此这个稍后会引用同一个窗口对象。

将其初始化为new FixedSidebar()

注意：在上面的上下文中，这是一个DOM元素。

Answer 3

尝试：


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);
             }

    }
};

与'this'范围相混淆

3 个答案: