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链接为所有按钮元素的原型对象。原型对象将具有函数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';
  }
}

Answer 2

你想要的是绑定或绑定参数。 Javascript提供了一种绑定函数的本机方式。如果您只想绑定参数，可以使用here引用的此方法：

Function.prototype.arg = function() {
    if (typeof this !== "function")
        throw new TypeError("Function.prototype.arg needs to be called on a function");
    var slice = Array.prototype.slice,
        args = slice.call(arguments), 
        fn = this, 
        partial = function() {
            return fn.apply(this, args.concat(slice.call(arguments)));
//                          ^^^^
        };
    partial.prototype = Object.create(this.prototype);
    return partial;
};

您可以这样使用它：

function setBorder(myobj) {     
            myobj.style.borderStyle = "inset";
        }  

var menubtn = document.getElementById("menu_btn");
menubtn.onactive = setBorder.arg(menubtn);

或者：

function setBorder() {     
            this.style.borderStyle = "inset";
        }  

var menubtn = document.getElementById("menu_btn");
menubtn.onactive = setBorder.bind(menubtn);

Answer 3

通过 CSS

#menuBtn:active{
   border-style:inset;
}

通过 Javascript

您应该将eventlistener属性视为

menubtn.addEventListener("mousedown", setBorder);

menubtn.addEventListener("mouseup", removeBorder);

在setBorder和removeBorder功能内，您可以使用this

Answer 4

将其分配给变量。

var functionName = function () { 
   //things
}

Answer 5

如果您希望this功能menubtn为setBorder，则需要绑定它：

menubtn.onclick = setBorder.bind(menubtn)

Answer 6

好吧，在JavaScript中，当您在this中的函数内使用this关键字时，它将指向您调用函数的对象。所以，你有这样的功能

function myFunc() {
    this.do_smth;
}

然后你调用它：my_obj.myFunc()，然后，在myFunc this内将指向my_obj。

假设您想用另一个对象调用您的函数：

obj_foo.myFunc()

在这种情况下，您的函数中的this将指向obj_foo

如果您想使用不同的对象调用您的函数（但必须确保您的对象具有相同的属性），最好使用call/apply或bind。

bind会对您的函数说“这是您应该使用的范围”。但是，在使用this的情况下，您应始终将函数绑定到不同的对象。更加美观和安全的方式是使用call/apply。您也应该每次都使用call/apply调用您的函数，例如bind，但它看起来更好。

因此，您的代码应如下所示：setBorder.call(menubtn)

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

6 个答案: