javascript.bind可以升级到多个级别吗?

javascript.bind可以升级到多个级别吗?,javascript,jquery,bind,Javascript,Jquery,Bind,我在JavaScript和JQuery中有一个钢琴键盘对象,如下所示: function Keyboard(name, size, xPos, yPos, octaves) { this.name = name; this.size = size; this.setDimensions = function (){}; this.highlightKeyboard = function (){}; ... etc. } 它有一系列的方法来设置

我在JavaScript和JQuery中有一个钢琴键盘对象,如下所示:

function Keyboard(name, size, xPos, yPos, octaves) {
    this.name = name;
    this.size = size;

    this.setDimensions = function (){};

    this.highlightKeyboard = function (){};
    ...
    etc.
}
它有一系列的方法来设置尺寸,使用div为键生成键盘,生成引用div类的主要和次要刻度,等等

我写了4种方法,当我按某个键时突出显示大音阶,当我按另一个键时突出显示小音阶,用另外两个键突出显示大音阶和小音阶。它们都很有效,但在编写它们之后,我意识到所有4个方法都使用了大量相同的代码,因此我一直在尝试通过将大部分代码放在主键盘对象中的不同方法中来进行整合,以便可以重复调用它们

我现在合并的问题是获取
$(document).keypress
对象以更好地处理外部代码

我想要的是这样的东西(部分代码示例-我省略了生成键盘的所有代码和其他所有不相关的代码,因为它似乎工作正常,而不是这个问题):

理想的效果是,当我加载页面时,它会生成一个空白键盘,但当我按下“m”键时,它会使用
this.highlightKeyboard
方法突出显示E大调音阶。因此,我想传递不带参数的
this.findMajorScales
方法a
this.highlightKeyboard
方法,然后填充参数并在按下“m”键时执行该方法。大多数东西都能工作,包括
($document).keypress
对象它执行其他代码,而不是带有正确参数的
this.highlightKeyboard
方法

我如何做到这一点?宾德和这事有关系吗?我真的不知道它是否适用于这里,或者我是否需要做其他事情

非常感谢


Jake

键盘对象中没有名为
highlightScales
的方法。我想你的意思是这个。highlightKeyboard

也就是说-
bind()
用于将上下文传递给方法。它允许您手动设置
,而不是使用该范围内的任何

因此,我想传递this.findMajorScales方法一个this.highlightKeyboard方法,不带任何参数,然后填充参数,并在按下“m”键时执行该方法

您正在收听M fine,因此唯一的问题是在正确的上下文中调用
highlightKeyboard

考虑

var foo = {bar: function () {return this}),
    bar = foo.bar;
foo.bar()
将返回什么?(
foo

bar()
将返回什么?(
window
null
或抛出错误等)


你有很多选择 有几种方法可以解决这个问题,您已经提到过,从概念上讲,它可能更容易使用,甚至可以通过使用另一个标识符来传递
this
变量

在这两种情况下,处理程序中的默认
this
将不再是键盘的实例,因为事件来自
文档

使用
Function.prototype.bind
您有几个选项

var highlightKeyboard = this.highlightKeyboard.bind(this);
$(document).keypress(function (event) {        
    if (event.which === 109) {
        highlightKeyboard(scale, scale_classes);
    }
});

// or binding args ahead of time too

var highlightKeyboard = this.highlightKeyboard.bind(this, scale, scale_classes);
$(document).keypress(function (event) {        
    if (event.which === 109) {
        highlightKeyboard();
    }
});

// or binding the handler

$(document).keypress(function (event) {        
    if (event.which === 109) {
        this.highlightKeyboard(scale, scale_classes);
    }
}.bind(this));
使用
函数.prototype.call
应用
,需要引用

var highlightKeyboard = this.highlightKeyboard;
var me = this;

$(document).keypress(function (event) {        
    if (event.which === 109) {
        highlightKeyboard.call(me, scale, scale_classes);
    }
});
var me = this;

$(document).keypress(function (event) {        
    if (event.which === 109) {
        me.highlightKeyboard(scale, scale_classes);
    }
});
只需使用ref来

var highlightKeyboard = this.highlightKeyboard;
var me = this;

$(document).keypress(function (event) {        
    if (event.which === 109) {
        highlightKeyboard.call(me, scale, scale_classes);
    }
});
var me = this;

$(document).keypress(function (event) {        
    if (event.which === 109) {
        me.highlightKeyboard(scale, scale_classes);
    }
});

最后,还有一个解决方案是编写一个函数来生成所需的内容,这与
.bind
的功能非常相似,但在不支持
.bind
的环境中受支持(阅读:legacy)


jQuery中的
.bind
类似于
上的
,不同于您在这里描述的普通JavaScript中的绑定。不过,OP并不是很清楚他们的意思。肯定是指
highlightKeyboard
,谢谢!但是发现有点晚了:-)
highlightScales
不在我的原始代码中,只是我在这里输入的。我不知道jQuery和JavaScript中的
.bind
是不同的!非常感谢。我想我指的是JavaScript版本。这行开头好像有语法错误。highlightKeyboard
;您可以立即关闭该函数,但继续,就像它仍然打开一样。这可能是复制粘贴错误。在使用分隔符
后不久,您又出现了另一个SyntaxError在为您的侦听器关闭括号之前。确认,我总是得到
})零件错误。谢谢也就是说,这是重新键入的,因为原始代码是800行,所以语法错误只出现在这一页上……据我所知。
此.highlightKeyboard
中的所有代码过去都位于
$(document.keypress)
对象中;我没有在此页面上列出代码,因为我知道它在
$(document.keypress)
对象中工作,但当我尝试将它带到
this.findMajorScales
方法之外时,它就不起作用了。如果我只是链接到原始代码会有帮助吗?是的,如果你同意的话,链接到原始代码。谢谢,保罗。美国给了我需要的解决方案。感谢您的回复。谢谢,这是非常好的帮助!!我使用了第一个选项,但我将尝试其他选项以获得经验。非常感谢!!!!这帮我去掉了几百行代码!再次感谢!