我正在编写一个简短的课程(第一次使用Javascript中的类)来处理我网站的菜单图标。此菜单图标需要能够在同一页面上多次实例化。
使用滚动事件触发函数时出现问题似乎不会影响到正确的类实例,这是我的伪代码:
var DynMenu = function(Name) {
this.Name = Name;
this.scrollHandler = function() {
alert("Scroll: "+this.Name);
};
DynMenu.prototype.Pause = function() {
alert("Pausing menu: "+this.Name);
$(window).off("scroll", this.scrollHandler);
};
DynMenu.prototype.Start = function() {
alert("Starting menu: "+this.Name);
$(window).scroll(this.scrollHandler);
};
}
调用此代码并使用以下内容:
var RevendMenu = new DynMenu("MenuIcon1");
RevendMenu.Start();
RevendMenu.Pause();
滚动页面时(在调用RevendMenu.Start()之后但在调用RevendMenu.Pause()之前),我收到消息“Scroll:undefined”
你可以告诉我为什么我没有得到this.Name的值以及如何解决这个问题?
非常感谢 问候 Florent的
答案 0 :(得分:1)
浏览器中的事件处理程序要么将this
设置为触发该事件的元素,要么在没有触发事件的元素的情况下设置为全局对象。在浏览器中,全局对象为window
。
为了将此绑定到方法所属的对象,您可以使用.bind()
:
$(window).off("scroll", this.scrollHandler.bind(this));
或者,在没有.bind()
的旧版浏览器中,您可以在闭包中捕获this
:
var that = this;
$(window).off("scroll", function() {that.scrollHandler()});
有关this
工作原理的详细说明,请参阅:How does the "this" keyword in Javascript act within an object literal?