Question

我有以下一段代码。什么是在链接上使用悬停时它然后它控制this。

var Mod = function () {
    $('.link').hover(this.hover, this.out);
};

Mod.prototype = function () {
    var hover = function () {
        console.log(this);
    },

    out = function () {
        console.log(this);
    };

    return {
        hover: hover,
        out: out
    }
}();

在上面的代码this中引用$('.link')元素，但我想将它用于当前对象。所以为了实现这一点，我可以将构造函数修改为以下内容。

var Mod = function () {
    var self = this;
    $('.link').hover(function () {
        self.hover();
    }, function () {
        self.out();
    });
};

这很好但是构造函数现在看起来很乱。第二种方法是再次使用jquery $.proxy()这将使我的构造函数看起来很乱。

我的问题是如何在使用this时将jquery's hover function引用当前对象的内容传递给对象内的其余函数，因为我现在在上面的第一个示例中使用它？

Answer 1

你问题中的代码看起来很完美。您在正确的上下文中调用hover和out，使this有效并指向这些函数中的Mod实例。

成员函数中的

this应始终指向对象的实例，因此即使您认为它是一团糟，我也会继续这样做。一个好的IDE将能够帮助您或团队进行语法和自动完成，我认为这一点更为重要。

不要这样做

虽然您可以将this分配给.link的数据成员，但它会降低代码的可读性并容易出错：

var Mod = function () {
    $('.link').data("mod", this);
    $('.link').hover(this.hover, this.out);
};

Mod.prototype = function () {
    var hover = function () {
        console.log($(this).data("mod"));
    },

    out = function () {
        console.log($(this).data("mod"));
    };

    return {
        hover: hover,
        out: out
    }
}();

旁注：您可以简化原型定义，并按照以下方式编写：

Mod.prototype.hover = function() {
}
Mod.prototype.out = function() {
}

Answer 2

你可以这样做：

var Mod = function () {
    $('.link').hover(this.listener('hover'), this.listener('out'));
};
Mod.prototype = function () {
    var hover = function () {
        console.log(this);
        this.otherMethod();
    },
    out = function () {
        console.log(this);
        this.otherMethod();
    },
    listener = function(func) {
        var self = this;
        return function() {
            self[func]();
        }
    },
    otherMethod = function() {
        console.log("That's a method of Mod.");
    };
    return {
        hover: hover,
        out: out,
        otherMethod: otherMethod,
        listener: listener
    }
}();

只需使用一个返回函数的帮助器。你的构造函数是干净的，但你的原型不是这样：）

将“this”引用传递给on（）里面的函数

2 个答案: