Parantez olmadan bir işlevi başlatma

Bugün bana parantez olmadan bir işlevi çağırmanın mümkün olduğu söylendi. Aklıma gelen tek yol, applyveya gibi işlevler kullanmaktı call.

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

Ancak bunlar parantezleri gerektirir applyve callbizi birinci karede bırakır. Ayrıca, işlevi bir tür olay işleyicisine geçirme fikrini de düşündüm setTimeout:

setTimeout(f, 500);

Ama sonra soru " setTimeoutparantez olmadan nasıl çağırıyorsunuz ?"

Peki bu bilmecenin çözümü nedir? Javascript'te bir işlevi parantez kullanmadan nasıl çağırabilirsiniz?

Parantezsiz bir işlevi çağırmanın birkaç farklı yolu vardır.

Bu işlevin tanımlanmış olduğunu varsayalım:

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

Ardından greet, parantez olmadan arama yapmanın bazı yollarını izleyin :

1. Yapıcı Olarak

İle newparantez olmadan bir işlevi çağırabilirsiniz:

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

Gönderen üzerine MDN'yi newoprator :

Sözdizimi

new constructor[([arguments])]

2. Olarak toStringveya valueOfUygulama

toStringve valueOfözel yöntemlerdir: bir dönüşüm gerektiğinde dolaylı olarak çağrılırlar:

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

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

greetParantez olmadan aramak için bu deseni kullanabilirsiniz (ab) :

'' + { toString: greet };

Veya valueOf:

+{ valueOf: greet };

valueOfve toStringaslında çağrılan @@ toPrimitive (ES6 beri) yöntemiyle, ve böylece de uygulayabilirsiniz olduğunu yöntemi :

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

2.b Geçersiz Kılma valueOf İşlev Prototipinde

PrototipvalueOf üzerindeki yöntemi geçersiz kılmak için önceki fikri kullanabilirsiniz :Function

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

Bunu yaptıktan sonra şunları yazabilirsiniz:

+greet;

Ve çizgide yer alan parantezler olmasına rağmen, gerçek tetikleme çağrısının parantezleri yoktur. Bununla ilgili daha fazla bilgiyi "Gerçekten çağırmadan JavaScript'te arama yöntemleri" başlıklı blogda bulabilirsiniz.

3. Jeneratör Olarak

Yineleyici döndüren bir üreteç işlevi (ile *) tanımlayabilirsiniz . Forma sözdizimini kullanarak veyafor...of .

İlk önce orijinal greetfonksiyonun bir jeneratör varyantına ihtiyacımız var :

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

Ve sonra @@ iterator yöntemini tanımlayarak parantez olmadan çağırıyoruz :

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

Normalde jeneratörler yield yerde anahtar kelimesi , ancak işlevin çağrılması gerekmez.

Son ifade işlevi çağırır, ancak bu yıkımla da yapılabilir :

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

veya bir for ... ofyapı, ancak kendi parantezleri vardır:

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

Yukarıdakileri orijinal işlevle de yapabileceğinizi unutmayın greet, ancak yürütüldükten sonra işlemde bir istisna tetikleyecektir greet(FF ve Chrome'da test edilmiştir). İstisna birtry...catch blokla .

4. Getter olarak

@ jehna1 bu konuda tam bir cevabı var, bu yüzden ona kredi verin. Aşağıda, kullanım dışı yöntemden kaçınarak, genel kapsamda işlev parantezlerini çağırmanın bir yolu vardır . Bunun yerine kullanır .__defineGetter__Object.defineProperty

Bunun için orijinal greetfonksiyonun bir varyantını oluşturmamız gerekiyor :

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

Ve sonra:

greet_get;

windowGlobal nesneniz ne olursa olsun değiştirin .

Orijinal greetnesneye böyle bir iz bırakmadan orijinal işlevi çağırabilirsiniz :

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

Ancak burada parantezlerimiz olduğu iddia edilebilir (gerçek çağrıyla uğraşmasalar da).

5. Etiket Fonksiyonu Olarak

ES6'dan beri , bu sözdizimiyle bir şablon değişmezi ileten bir işlevi çağırabilirsiniz :

greet``;

Bkz. "Etiketli Şablon Değişmezleri" .

6. Proxy İşleyicisi Olarak

ES6'dan beri bir proxy tanımlayabilirsiniz :

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

Ve sonra herhangi bir özellik değerini okumak greet:

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

Bunun birçok varyasyonu var. Bir örnek daha:

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

1 in proxy; // triggers greet

7. Örnek denetleyicisi olarak

instanceofOperatör yürütür @@hasInstancetanımlandığı zaman ikinci işlenen hakkında bir yöntem:

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

Bunu yapmanın en kolay yolu newoperatördür:

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

new f;

Alışılmadık ve doğal olmayan bir şey olsa da, çalışır ve tamamen yasaldır.

newHiçbir parametre kullanılırsa operatör parantez gerektirmez.

Alıcıları ve ayarlayıcıları kullanabilirsiniz.

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

Bu betiği sadece şununla çalıştır:

h.ello  // Fires up alert "world"

Düzenle:

Tartışma bile yapabiliriz!

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

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

Düzenleme 2:

Parantez olmadan çalıştırılabilen genel işlevleri de tanımlayabilirsiniz:

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

Ve argümanlarla:

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

Yasal Uyarı:

@MonkeyZeus'un belirttiği gibi: Niyetleriniz ne kadar iyi olursa olsun, asla bu kod parçasını üretimde kullanamazsınız.

İşte belirli bir duruma bir örnek :

window.onload = funcRef;

Her ne kadar bu ifade aslında çağırmıyorsa da gelecekteki bir çağrışmaya yol açacaktır .

Ama, gri alanların böyle bilmeceler için iyi olabileceğini düşünüyorum.

Yanal düşünme yaklaşımını kabul edersek, bir tarayıcıda, herhangi bir gerçek parantez karakteri olmadan bir işlevi çağırmak da dahil olmak üzere rastgele JavaScript çalıştırmak için kötüye kullanabileceğimiz birkaç API vardır.

1. locationve javascript:protokol:

Böyle bir teknik atama javascript:protokolünü kötüye kullanmaktır location.

Çalışma Örneği:

location='javascript:alert\x281\x29'

Teknik olarak \x28 ve \x29kod değerlendirildikten sonra hala parantez olmasına rağmen , gerçek (ve )karakter görünmez. Parantezler, atama sırasında değerlendirilen bir JavaScript dizesinde kaçar.

2. onerrorve eval:

Benzer şekilde, tarayıcıya bağlı olarak, genel olarak kötüye kullanabilir onerror, ayarlayabilir evalve geçerli JavaScript'e yayılacak bir şey atabiliriz . Bu daha zordur, çünkü tarayıcılar bu davranışta tutarsızdır, ancak Chrome için bir örnek.

Chrome için çalışma örneği (Firefox değil, diğerleri test edilmemiştir):

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

Bu Chrome'da çalışır, çünkü neredeyse geçerli JavaScript olan ilk argüman olarak throw'test'geçecektir . Bunun yerine geçersek geçecek . Şimdi geçerli bir JavaScriptimiz var! Testi tanımlayın ve yükü yük ile değiştirin.'Uncaught test'onerrorthrow';test''Uncaught ;test'Uncaught

Sonuç olarak:

Böyle bir kod gerçekten korkunçtur ve asla kullanılmamalıdır , ancak bazen XSS saldırılarında kullanılır, bu nedenle hikayenin ahlaki XSS'yi önlemek için parantezin filtrelenmesine dayanmaz. Böyle bir kodu önlemek için bir CSP kullanmak da iyi bir fikir olacaktır.

ES6'da, Etiketli Şablon Değişmezleri olarak adlandırılan şeye sahipsiniz .

Örneğin:

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

foo`Tagged Template Literals`;