Confusment с 'этой области видимости

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

попробовать:

 

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

    } 
}; 
 

Answer 3

Если вы вызываете этот путь:

FixedSidebar.apply(this); 

Вы передаете объект окна с apply & следовательно это относится к тому же окна объекта позже.

Скорее инициализировать его как new FixedSidebar()

---

Примечание: В этом контексте это DOM элемент.