Как использовать троичный оператор для выбора функции

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 сообщает мне:

Uncaught TypeError: Невозможно прочитать свойство '0' из неопределенного

Но я обнаружил, что могу обойти проблему, используя call для передачи node как this функции.

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

Очевидно, что правильным решением в данном конкретном случае является использование toggleClass, как указывал @epascarello. Я немного удивлен, что this теряется в этом сценарии.

Answer 2

Вы можете сделать это, назначив функцию переменной.

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

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

Answer 3

Может переключаться с помощью ванильного сценария Java

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