Викликання функції без дужок

Сьогодні мені сказали, що функцію можна використовувати без дужок. Єдиний спосіб, про який я міг придумати, - це використання таких функцій, як applyабо call.

f.apply(this);
f.call(this);

Але для цього потрібні дужки applyта callзалишати нас на першій площі. Я також розглядав ідею передачі функції деяким обробникам подій, таким як setTimeout:

setTimeout(f, 500);

Але тоді стає питання "як ви звертаєтесь setTimeoutбез дужок?"

То яке рішення цієї загадки? Як можна викликати функцію в Javascript без використання дужок?

Існує кілька різних способів викликати функцію без дужок.

Припустимо, у вас визначена ця функція:

function greet() {
    console.log('hello');
}

Потім виконайте кілька способів дзвінка greetбез дужок:

1. Як конструктор

З newвами може викликати функцію без дужок:

new greet; // parentheses are optional in this construct.

Від MDN на newоратора :

Синтаксис

new constructor[([arguments])]

2. Як toStringчи valueOfреалізація

toStringі valueOfце спеціальні методи: вони викликаються неявно, коли необхідна конверсія:

var obj = {
    toString: function() {
         return 'hello';
    }
}

'' + obj; // concatenation forces cast to string and call to toString.

Ви можете (ab) використовувати цей шаблон для дзвінка greetбез дужок:

'' + { toString: greet };

Або з valueOf:

+{ valueOf: greet };

valueOfі toStringнасправді викликаються методом @@ toPrimitive (починаючи з ES6), і ви також можете реалізувати цей метод:

+{ [Symbol.toPrimitive]: greet }
"" + { [Symbol.toPrimitive]: greet }

2.b Переопределення valueOfв прототипі функції

Ви можете взяти попередню ідею, щоб замінити valueOfметод на Functionпрототипі :

Function.prototype.valueOf = function() {
    this.call(this);
    // Optional improvement: avoid `NaN` issues when used in expressions.
    return 0; 
};

Після цього ви можете написати:

+greet;

І хоча в дужці задіяні круглі дужки, фактичне викликання виклику не має дужок. Детальніше про це див. У блозі "Методи виклику в JavaScript, не дійсно викликаючи їх"

3. Як генератор

Ви можете визначити функцію генератора (з *), яка повертає ітератор . Ви можете викликати його за допомогою синтаксису розповсюдження або за допомогою for...ofсинтаксису.

Спочатку нам потрібен варіант генератора вихідної greetфункції:

function* greet_gen() {
    console.log('hello');
}

І тоді ми називаємо це без дужок, визначаючи метод @@ iterator :

[...{ [Symbol.iterator]: greet_gen }];

Зазвичай у генераторів є yieldдесь ключове слово, але воно не потрібно для виклику функції.

Останнє твердження викликає функцію, але це також можна зробити з деструктуризацією :

[,] = { [Symbol.iterator]: greet_gen };

або for ... ofконструкція, але вона має власні дужки:

for ({} of { [Symbol.iterator]: greet_gen });

Зауважте, що ви можете виконати вищезазначене і з оригінальною greetфункцією, але це призведе до виключення в процесі після greet його виконання (протестовано на FF та Chrome). Ви можете керувати винятком за допомогою try...catchблоку.

4. Як Геттер

@ jehna1 має повну відповідь на це, тому дайте йому кредит. Ось спосіб викликати дужки без функцій у глобальній області, уникаючи застарілого__defineGetter__ методу. Він використовує Object.definePropertyзамість цього.

Для цього нам потрібно створити варіант вихідної greetфункції:

Object.defineProperty(window, 'greet_get', { get: greet });

І потім:

greet_get;

Замініть windowбудь-яким вашим глобальним об’єктом.

Ви можете викликати оригінальну greetфункцію, не залишаючи сліду на глобальному об'єкті так:

Object.defineProperty({}, 'greet', { get: greet }).greet;

Але можна стверджувати, що у нас тут є круглі дужки (хоча вони не задіяні у фактичному виклику).

5. Як функція тегів

Оскільки ES6 ви можете викликати функцію, передаючи їй шаблон буквально з цим синтаксисом:

greet``;

Див. "Літеральні теги шаблонів" .

6. Як проксі-обробник

Оскільки ES6, ви можете визначити проксі :

var proxy = new Proxy({}, { get: greet } );

Тоді читання будь-якого значення властивості призведе до greet:

proxy._; // even if property not defined, it still triggers greet

Існує багато варіацій цього. Ще один приклад:

var proxy = new Proxy({}, { has: greet } );

1 in proxy; // triggers greet

7. Як перевірка екземплярів

instanceofОператор виконує @@hasInstanceметод на другий операнд, коли визначається:

1 instanceof { [Symbol.hasInstance]: greet } // triggers greet

Найпростіший спосіб зробити це з newоператором:

function f() {
  alert('hello');
}

new f;

Хоча це неортодоксально і неприродно, воно працює і є абсолютно законним.

newОператор не вимагає дужок , якщо не використовується ніяких параметрів.

Можна використовувати геттери та сетери.

var h = {
  get ello () {
    alert("World");
  }
}

Запустіть цей сценарій лише за допомогою:

h.ello  // Fires up alert "world"

Редагувати:

Ми можемо навіть робити аргументи!

var h = {
  set ello (what) {
    alert("Hello " + what);
  }
}

h.ello = "world" // Fires up alert "Hello world"

Редагувати 2:

Ви також можете визначити глобальні функції, які можна запустити без дужок:

window.__defineGetter__("hello", function() { alert("world"); });
hello;  // Fires up alert "world"

І з аргументами:

window.__defineSetter__("hello", function(what) { alert("Hello " + what); });
hello = "world";  // Fires up alert "Hello world"

Відмова від відповідальності:

Як заявив @MonkeyZeus: Ніколи не використовуйте цей фрагмент коду у виробництві, незалежно від того, наскільки ваші наміри.

Ось приклад для конкретної ситуації:

window.onload = funcRef;

Незважаючи на те, що заява не на самому ділі виклик , але призведе до майбутнього викликом .

Але я вважаю, що сірі області можуть бути нормальними для таких загадок :)

Якщо ми приймаємо підхід до бокового мислення, у браузері є декілька API, які ми можемо зловживати для виконання довільного JavaScript, включаючи виклик функції, без реальних символів дужок.

1. locationіjavascript: протокол:

Однією з таких методик є зловживання javascript:протоколом наlocation дорученні.

Приклад роботи:

location='javascript:alert\x281\x29'

Хоча технічно \x28 і \x29все ще є дужки, коли код оцінюється, фактичний (і )символ не відображається. Круглі дужки виводяться в рядок JavaScript, який оцінюється при призначенні.

2. onerrorіeval :

Аналогічно, залежно від браузера, ми можемо зловживати глобальним onerror, встановлюючи йогоeval і кинувши щось, що буде строковим до дійсного JavaScript. Цей складніше, тому що браузери непослідовні в такій поведінці, але ось приклад для Chrome.

Робочий приклад для Chrome (не Firefox, інші перевірені):

window.onerror=eval;Uncaught=0;throw';alert\x281\x29';

Це працює в Chrome, тому що він throw'test'буде переданий 'Uncaught test'як перший аргумент onerror, що є майже дійсним JavaScript. Якщо ми замість цього зробимо, throw';test'це пройде 'Uncaught ;test'. Тепер у нас дійсний JavaScript! Просто визначте Uncaughtі замініть тест корисним навантаженням.

На закінчення:

Такий код справді жахливий , і його ніколи не слід використовувати , але інколи використовується в атаках XSS, тому мораль історії не покладатися на фільтрування дужок для запобігання XSS. Використання CSP для запобігання такого коду також було б хорошою ідеєю.

У ES6 у вас є те, що називається літерами з тегами шаблонів .

Наприклад:

function foo(val) {
    console.log(val);
}

foo`Tagged Template Literals`;