Question

为简单起见，代码已被删除，以解决需求：
我理解这些方法毫无意义。我只是想知道什么是非法的，以及如何以一种方式将方法结合在一起，我将在下面描述。

问题来自 bindContentOverlay 方法：

this.setContentOverlayHeight is not a function
this.setContentHeight is not a function

这就是我正在使用的东西：
使用这种风格的OOP上的任何指针也非常受欢迎。

$(document).ready(function(){
    var p = new Properties();
    p.bindContentOverlay();
});

var Properties = function()
{
    this.initialize();
}

Properties.prototype.initialize = function()
{
    this.menu = {"#power" : null,"#services" : "#services_menu","#cashback" : null,"#schedule" : "#schedule_menu"};
    this.a = 22;
    this.b = 33;
}

Properties.prototype.getHeights = function()
{
    this.initialize();
    this.q = this.a;
    this.w = this.b;
}

Properties.prototype.setContentOverlayHeight = function()
{   
    this.getHeights();
    alert(this.q);
}

Properties.prototype.setContentHeight = function()
{
    this.getHeights();
    alert(this.w);
}


Properties.prototype.bindContentOverlay = function()
{
    for(var i in this.menu)
    {
        (function(x, y) {
             $(x+','+y).hover(
                 function () {
                    console.log(x);
                    this.setContentOverlayHeight();
                 },
                 function () {
                    this.setContentHeight();
                    console.log(y);
                 }
            );
        })(i, this.menu[i]);
    }   
}

Answer 1

悬停回调中的this是指悬停在其上的元素，而不是当前的Properties对象。

最简单的解决方法是将本地引用绑定到this顶部的.bindContentOverlay：

Properties.prototype.bindContentOverlay = function()
{
    var self = this;
    ...
}

然后在回调中使用self.setContentOverlayHeight()。

Answer 2

无论何时在函数中定义函数，都可能会丢失上下文（this的值）。

问题在于你如何编写bindContentOverlay方法。当那些最深层的函数执行时，this不是你所期望的。

防止这种情况的最简单方法是将this保存到局部变量并改为使用它。

Properties.prototype.bindContentOverlay = function()
{
    // Save "this" to local var, and use the var instead for any inner functions.
    var instance = this;

    for(var i in this.menu)
    {
        (function(x, y) {
             $(x+','+y).hover(
                 function () {
                    console.log(x);
                    instance.setContentOverlayHeight();
                 },
                 function () {
                    instance.setContentHeight();
                    console.log(y);
                 }
            );
        })(i, instance.menu[i]);
    }   
}

在jquery bind中调用javascript原型方法

2 个答案: