javascript - 如何在javascript中为函数分配参数而不执行它？

Question

我的目标是在使用 JavaScript 单击按钮元素时更改按钮元素的边框样式。我创建了一个函数 setBorder 并将其分配给所有按钮元素上的 onclick 事件，如下所示:

function setBorder(myobj) {     
            myobj.style.borderStyle = "inset";
        }  
var menubtn = document.getElementById("menu_btn");
menubtn.onactive = setBorder(menubtn);

这里的问题是，一旦页面加载，边框样式就会改变，因为解析 javascript 时，由于括号 ()，函数 setBorder() 被执行>。我认为的另一种选择是:

function setBorder() {      
            this.style.borderStyle = "inset";
        }  
var menubtn = document.getElementById("menu_btn");
menubtn.onactive = setBorder;

我以为 this 会获取对象 menubtn ——但这并没有发生。为什么this没有采用对象menubtn？

我认为可能有一种方法可以将 setBorder 链接为所有按钮元素的原型(prototype)对象。原型(prototype)对象将具有函数 func_SetBorder 作为其属性。然后我们可以将 func_setBorder 调用为:

menubtn.onclick = menubtn.func_setborder;

Answer 1

此解决方案通过使用 function closure 实现您正在寻找的目标.

var buttons = [ ... ];   // An array containing the buttons

for (let b of buttons) {
  b.onactive = onActive(b);
}

function onActive(button) {
  return function () {
    button.style.borderStyle = 'inset';
  }
}