如何使用三元运算符来选择函数

Question

以下代码段有效

if (condition)
  node.addClass('myclass');
else
  node.removeClass('myclass');

但不是这个

node[condition ? 'addClass' : 'removeClass']('myclass');

也不是这个

(condition ? node.addClass : node.removeClass)('myclass');

如果我测试它

console.log(node[condition ? 'addClass' : 'removeClass']);

浏览器打印出它是一个功能。为什么我不能打电话给它？

Answer 1

它显然与我在这里给出的例子一样。它不适用于一个额外的间接级别。

function print(x) {
  console.log(x);
  return x;
}

print(condition ? node.addClass : node.removeClass)('myclass');

使用此代码，Chrome会告诉我：

未捕获的TypeError：无法读取未定义的属性“0”

但我发现我可以通过使用call将node作为this传递给函数来规避问题。

print(condition ? node.addClass : node.removeClass).call(node,'myclass');

显然，在这个特定情况下正确的解决方案是使用toggleClass，正如@epascarello指出的那样。我有点惊讶this迷失在这种情况下。

Answer 2

可以用vanilla javascript切换

node.classList.toggle('myclass',condition);

Answer 3

您可以通过将函数分配给变量来完成此操作。

var twoLevel = {
  "foo" : {
    log: console.log
  },
  "bar" : {
    log: window.alert
  }
}

var fn = true ? twoLevel["foo"].log : twoLevel["bar"].log;
fn('test')