JavaScript：在创建的对象上将变量设置为新函数，它仍会调用旧函数

Question

我有一个看起来像这样的“班级”：

export function IBXMReplay() {
    var onRow = function(){console.log("not right")};
    ....
}

稍后，在这样的函数中调用它：

var seqRow = function() {
    onRow();
    ....
}

Web音频getAudio的回调实际上调用了此函数。 我这样构造对象：

var replay = new IBXMReplay();
replay.onRow = function(){console.log("Right")};

但是，在调用onRow（）时，它始终显示"not right."

我究竟做错了什么？？？ 我尝试创建一个setter函数，但是那也不起作用。

Answer 1

问题在于onRow函数被定义为IBXMReplay本地作用域中的变量，并且我假设seqRow函数也位于IBXMReplay内部。 局部作用域变量不能直接访问，也不能从外部进行修改。

为此，您需要使onRow函数成为IBXMReplay对象的属性（在JS函数中也是对象）：

export function IBXMReplay() {
    this.onRow = function(){console.log("not right")};
    ....
}

或者更好的是，将其存储在原型中 ：

var IBXMReplay = function IBXMReplay() {
    ....
}
IBXMReplay.prototype.onRow = function(){console.log("not right")};
export IBXMReplay

无论哪种方式，您都可以稍后执行：

var replay = new IBXMReplay();
replay.onRow = function(){console.log("Right")};

它应该按预期工作。

现在，对此进行一些解释。 假设您有IBXMReplay '的100个实例。 将其存储为对象属性与原型属性之间的区别非常细微但很重要：

像这样存储方法this.onRow意味着在内存中将有100个副本。 如果您以后使用replay.onRow = something对其进行编辑，它将完全替换为该特定实例。

执行诸如delete replay.onRow不会使原始函数恢复原状，而是在执行该实例时引发“未定义不是函数”错误。

相反，将函数存储在对象的原型中将意味着所有实例都将仅引用onRow的单个副本。 当编辑与实例replay.onRow = something ，底层原型onRow仅由具有相同名称的对象属性阴影，所以内部的任何呼叫IBXMReplay类将引用覆盖函数来代替。

删除实例属性后delete replay.onRow将“发现”原始功能。

这就是JavaScript的工作方式，被称为原型链 。 每当您执行foo.bar ，都会在foo对象中直接搜索bar属性，但是如果找不到，则会在foo的原型中搜索该属性，然后在原型的原型中进行搜索，依此类推，直到达到null为止（没有原型）。