Javascript Call, Apply & Bind

Herkese Merhaba :)

Bu yazımda yine mülakatlarda karşımıza çıkabilecek Advanced Javascript konularından biri olan Call, Apply ve Bind metodlarından bahsedeceğim. Ancak bu yazımı okumadan önce eğer bilginiz yok ise Javascript’in this konusuna ve Prototype özelliğine bakmanızı tavsiye ederim. Bu konular ile ilgili burada makaleler yazmıştım. Konuyu anlayabilmek adına bakmanızı öneriyorum.

O halde başlayalım 😎

Daha önceki “this” ile ilgili olan makalemde Explicit Binding başlığı altında bahsetmiştim.

Bazı durumlarda fonksiyonlarımızı bir objeye metod olarak ekleyemeyebiliriz. Belki obje bize ait değildir, belki bir kütüphaneden çektiğimiz bir objedir ya da immutable bir objedir ve değiştiremeyiz.

Ya da elimizde iki farklı obje vardır. Bu objeler birbirlerinin metod ve özelliklerine erişemezler.

İşte bu gibi durumlarda Javascript’in bind, call & apply metodlarını kullanabiliriz. Bu durumda bu metodlar aracılığı ile biz fonksiyonumuzu objeye bağlamış oluruz. Ve fonksiyon artık objenin metod ve özelliklerine erişebilir hale gelir. Bu sayede this, artık global window objesini değil fonksiyonumuzu bağladığımız objeyi işaret edecektir.

Bunu bir kod örneğiyle açıklayacağım fakat bu metodların hepsi aynı görevi yerine getirse de aralarında farklılıklar bulunuyor. Öncesinde bu farklılıklardan bahsedeceğim.

Apply Metodu

Apply metodu, fonksiyonumuzu hemen çalıştırır. Fonksiyon çağrılırken de iki parametre alır: Birincisi ‘this’ değeri ve ikincisi de fonksiyon argümanlarını içeren bir dizi ( array ).

Syntax: function.apply(thisArg, [arg1, agr2, …])

Call Metodu

Call metodu da fonksiyonu hemen çalıştırır. Ve fonksiyon çağrılırken ‘this’ değerini ilk parametre olarak ve geri kalan parametreleri de virgülle ayrılmış argümanlar olarak kabul eder.

Syntax: function.call(thisArg, arg1, agr2, …)

Bind Metodu

Bind metodu ise yeni bir fonksiyon yaratır. Fonksiyonu hemen çalıştırmaz. Gelecekte çağırmamız/kullanmamız için hazırlar. ‘this’ değerini ilk parametre olarak ve geri kalan parametreleri de virgülle ayrılmış argümanlar olarak kabul eder.

Syntax: function.bind(thisArg, arg1, agr2, …)

Özetle

• Call metodu fonksiyonumuzu hemen çalıştırır ve virgülle ayrılmış bir parametre listesi kabul eder.
• Apply metodu fonksiyonumuzu hemen çalıştırır ve dizi ( array ) içinde bir parametre listesi kabul eder.
• Bind metodu fonksiyonumuzu hemen çağırmaz. Onu gelecekte kullanmamız için hazırlar. Bind da virgülle ayrılmış bir parametre listesi kabul eder.

Şimdi bir kod örneğine bakalım:

Bu örnekte fonksiyonumuz ilk etapta NaN dönecek. Neden ?

Çünkü fonksiyondaki this değeri global window objesine işaret ediyor. Ve orada bizim num1 isminde bir değerimiz yok. Dolayısı ile undefined bir değeri döndürmeye çalışıyor. Bizim num1 değerine ulaşmamız için bu fonksiyonu tanımladığımız objeye bağlamamız gerekli. Bunu da yukarıda görebildiğimiz gibi üç metodla yapabiliyoruz. Aralarındaki kullanım farklarını incelerseniz anlattıklarım şimdi daha mantıklı gelecektir.

Bahsedeceklerim bu kadardı.

Okuduğunuz için teşekkür ederim. Umarım faydalı bir yazı olmuştur. 🤗