对象方法的Javascript替换

Question

我在 javascript 中对对象的操作有疑问

我的代码:

SearchField = function(){
this.Init = function()
{
    this.input = this.view.getElementsByTagName("input");
    this.input[0].onkeyup = this.UpdateEvent2;
    self = this;                        
}

this.UpdateEvent = function(){
    this.OnUpdate();
}

this.UpdateEvent2 = this.UpdateEvent.bind(this);

this.OnUpdate = function(){
    alert("Hello world from direct object");
};  

对此代码的一些解释:我使用绑定(bind)方法将对象本身作为参数传递，而不是事件对象。所以，我有一个函数 OnUpdate，里面有一些代码。

在代码的其他部分实例化我的对象后，我还有一些其他行:

...
targetController.prototype[targetMethodName] = function(targetController){
alert("core");
return selfController[selfMethodName](targetController);
}
...

其中 targetController 是对我的对象的引用，targetMethodeName 是方法 OnUpdate()。然后我尝试为该方法分配一个新函数，换句话说，尝试用另一个对象的另一个方法替换原始方法 OnUpdate。 (它不会消失，因为它无论如何都不起作用，即使调用警报(“核心”)也是如此。)

因此，当我尝试这样调用此方法时:MyObject.OnUpdate() - 结果是一个带有“Hello world from direct object”的警告窗口。

第一个问题是如何用另一种方法替换这种方法？

但是，如果我像这样将此方法直接分配给事件处理程序，则会出现一些有趣的行为:

SearchField = function(){
this.Init = function()
{
    this.input = this.view.getElementsByTagName("input");
    this.input[0].onkeyup = this.OnUpdate;
    self = this;                        
}


this.OnUpdate = function(){
    alert("Hello world from direct object");
};  

在这种情况下，一切正常，所以我有一个警告窗口，里面有“核心”，另一个对象的另一个方法用正确的参数调用...

那么，第二个问题是……第一个变体有什么问题？？？我不想将我的方法直接分配给事件处理程序!我想在我的代码的任何部分调用这个方法!如何做到这一点？

附言如您所见，我尝试用 self 而不是 this 等等来做这件事……没有任何帮助!

Answer 1

看起来您正在尝试在创建类后覆盖 keyup 函数？

您可以这样做的一种方法是使用原始函数进行初始化，然后覆盖它:

<div id="field">
    <input type="text" value="search1" />
</div>

<div id="field2">
    <input type="text" value="search2" />
</div>

<script>
var SearchField = function (id) {
    this.init = function () {
        var me = this;
        this.el = document.getElementById(id);
        this.input = this.el.getElementsByTagName('input');
        this.input[0].addEventListener('keyup', function (e) {
            me.onKeyUp(e);
        });
        self = this;
    }
    this.onKeyUp = function (e) {
        console.log('onKeyUp');
    };
    this.init();
};

var search1 = new SearchField('field');

var search2 = new SearchField('field2');

// overwrite the key up function
search2.onKeyUp = function(e) {
    console.log('onKeyUp2');
};
</script>

http://jsfiddle.net/kmturley/CHK96/