JavaScript OOP - 当为与事件绑定(bind)的方法传递参数时

Question

我试图将参数传递给 class 方法，但是当我将该方法与事件绑定(bind)时，它只能在类启动时工作一次。

但是当我尝试不传递参数时，它会照常工作，并正确处理事件。

我无法在类内为 displayMessageWithParam($param) 设置参数，因为它可能被其他人使用，我希望他们传递他们的参数。它可以在不绑定(bind)到事件的情况下工作，但为什么当我绑定(bind)到事件时就不行呢？

请告诉我我做错了什么:

jQuery(function() {

    // create document
    Klass.site = new Klass.site();
    // need to call init manually with jQuery
    Klass.site.initialize();

});

// namespace our code
window.Klass = {};

// my class (no Class.create in JQuery so code in native JS)
Klass.site = function() {};

// add functions to the prototype
Klass.site.prototype = {
    // automatically called
    initialize: function() {
        // this works as usual
        jQuery('#field').keyup( jQuery.proxy(this.displayMessage, this));

        // but this wont work
        jQuery('#field').keyup( jQuery.proxy(this.displayMessageWithParam('chanaged'), this));
    },
    displayMessage:function(){
        console.log('chanaged');
    }
    displayMessageWithParam:function($parm){
        console.log($parm);
    }

};

感谢您的帮助。

Answer 1

括号的存在(例如Obj.method(...))会立即调用方法。要引用方法，您必须使用不带括号表达式的名称。

如果您查看 API 文档，jQuery.proxy 可以采用其他参数作为参数传递。

jQuery('#field').keyup(jQuery.proxy(this.displayMessageWithParam, this, 'changed'));

没有对惰性求值的语言支持，因此在 jQuery.proxy 之外，您必须自己创建并传递可调用对象。通常可行的上述方法的替代方法是使用匿名函数:

jQuery('#field').keyup(jQuery.proxy(function () {
        this.displayMessageWithParam('changed');
    }, this));

请注意，您还可以使用此方法来绑定(bind)对象:

var self = this;
jQuery('#field').keyup(function () {
        self.displayMessageWithParam('changed');
    });

您还可以创建通用参数绑定(bind)函数:

function bindParam(f, param) {
    return function () {
        var args = [].slice.apply(arguments);
        args.unshift(param);
        return f.apply(this, args);
    };
}

请注意，这是 jQuery.proxy 本身所做的事情的变体。用法:

... bindParam(this.displayMessageWithParam, 'changed') ...;

如果浏览器支持Function.bind (另请参阅 MDN 和 MSDN 文档以了解实现描述/用法)，您可以使用它来代替 jQuery.proxy 和上面的内容。

jQuery('#field').keyup(this.displayMessageWithParam.bind(this, 'changed'));

如果浏览器不支持，则实现Function.bind作为练习。

此外，JS 不支持语言级别的类，因此它没有类和实例方法(一些库添加了基于类的继承，但这不是语言的一部分)。它使用所谓的“基于原型(prototype)的编程”。如果您想要另一种语言中所谓的“类方法”，请在构造函数上定义该方法，而不是在原型(prototype)上:

Klass.method = function () {...};

与其他一些语言不同，如果您尝试直接从实例调用此“类方法”，则不会调用它((new Klass).method 与 Klass 无关。方法)。