javascript - 与“this”范围混淆

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 在接下来的时刻没有对“切换”方法进行原型设计吗？

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

Answer 1

问题是你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;
});

Answer 2

如果你这样称呼：

FixedSidebar.apply( this );

您使用apply &传递 window 对象，因此this稍后引用相同的 window 对象。

而是将其初始化为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);
             }

    }
};