对象方法的Javascript替换答案

【问题标题】：Javascript substitution of object's method对象方法的Javascript替换
【发布时间】：2013-10-25 00:00:18
【问题描述】：

我在 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");
};

}

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

在我的代码的其他部分实例化我的对象后，我还有其他几行：

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

其中 targetController 是对我的对象的引用，而 targetMethodeName 是方法 OnUpdate()。然后我尝试为这个方法分配一个新函数，换句话说，尝试用另一个对象的另一个方法替换原始方法 OnUpdate。（它确实没用，因为它无论如何都不起作用，即使调用 alert("core")。）

所以，当我尝试像这样调用此方法时：MyObject.OnUpdate() - 结果是一个带有“来自直接对象的 Hello world”的警报窗口。

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

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

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 等等...没有任何帮助！

【问题讨论】：

我不明白的一件事是您将新方法放在 targetController.prototype 而不是实例本身上。
Grape_mao，在这些行之前对象已经创建但没有被 Init() 方法初始化，所以我将新方法放在具体对象的实例而不是类对象或 targetController.prototype 中。但是之后的事件处理程序设置！通过调用 Init() 方法。这是在做'当然，如果我之前调用 Init，它总是指向初始函数，即使我在第二个变体中进行了这个替换！
我还是不明白...这是你想做的吗？ jsfiddle.net/m5XYe
如果还是有问题，重现它的jsfiddle会有很大帮助。
我没有看到任何结果，但是有一些变化是这样的：事件不是在调用 Init() 时发生，而是在按下键时发生... Init 只是设置回调。

标签： javascript object methods

【解决方案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/

【讨论】：