如何在不使用javascript执行的情况下为函数分配参数

How to assign a function with parameters without executing it in javascript?

本文关键字：情况下 函数 参数 分配 执行 javascript      更新时间：2023-09-26

我的目标是在用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;

此解决方案通过使用函数闭包来实现您想要的功能。

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';
  }
}

好吧，在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。您还应该像使用bind一样每次使用call/apply调用函数，但它看起来更好。

因此，您的代码应该是这样的：setBorder.call(menubtn)

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

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);

通过CSS

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

通过Javascript

您应该尝试将eventlistener属性作为

menubtn.addEventListener("mousedown", setBorder);

menubtn.addEventListener("mouseup", removeBorder);

在setBorder和removeBorder函数中，您可以使用this

将其分配给一个变量。

var functionName = function () { 
   //things
}

如果您希望this是setBorder函数中的menubtn，则需要绑定它：

menubtn.onclick = setBorder.bind(menubtn)

相关文章：