Question

我在项目中看到了这段代码，以下代码行让我感到不安

function toggleClass(elem, c) {
    var fn = hasClass(elem, c) ? removeClass : addClass;
    fn(elem, c); 
}

我的困惑是变量fn在第三行被调用，但它几乎不是函数。我在这里失踪了什么。

Answer 1

为什么不呢。三元运算符检查条件并返回该情况的适当值。该值也可以是对函数的引用。你可以亲自试试。

您的fn被调用，然后通过()执行。

三元运营商这样做。如果条件返回true，则将removeClass 的引用分配给fn。这只是复制引用并将其放入fn变量 - 不执行它。条件返回false时也是如此。在此之后，当您致电fn()时，fn包含对函数的引用，该函数将返回三元组。它通过该引用并调用适当的函数。

＆＃13;

function remove() {
  console.log('Remove');
}

function add() {
  console.log('Add');
}

function toggle(data){
  var fn = data ? remove : add;
  fn();
}

toggle(true);
toggle(false);

＆＃13;

Answer 2

为了便于解释，给定的代码等同于以下内容：

removeClass(elem, c) {
    // removes class 'c' from element 'elem'
}

addClass(elem, c) {
    // adds class 'c' in element 'elem'
}

function toggleClass( elem, c ) {
    var fn;
    if( hasClass( elem, c ) )
        fn = removeClass;
    else
        fn = addClass;
    fn( elem, c ); 
}

函数基本上是javascript中的对象，函数可以分配给变量。在当前情况下，变量为fn。

Answer 3

您甚至可以直接调用ternay的结果，因为conditional (ternary) operator ?:会根据条件返回表达式。

(hasClass(elem, c) ? removeClass : addClass)(elem, c);

为变量分配函数（引用）是为调用此函数的第二部分选择合适函数的第一部分。

代码比标准if ... then ... else语法短。

Answer 4

我的困惑是变量fn在第三行被调用，但它几乎不是函数。我在这里失踪了什么。

函数是Javascript中的对象，使用引用复制对象。这是什么意思？

当您定义一个函数addClass时，它会存储在一个内存位置，例如 x1001 。在这里，addClass将保留此内存位置，并在其后跟()从此位置选择并执行的代码。

执行var fn = addClass时，您只是复制此引用。所以现在fn也有 x1001 而不是实际的功能。因此，当您执行fn()时，您可以调用必要的功能。

希望它有所帮助！

是否可以将三元表达式称为函数调用？

4 个答案: