JavaScript’te “Explicit Binding”: “call()” – “apply()” – “bind()” Metotları
Bu yazımızda, JavaScript’te fonksiyonların çağrıldıkları bağlamı (yani “this” değerini) özellikle belirlememize olanak tanıyan “explicit binding” kavramını inceleyeceğiz.
“Explicit Binding” ve “call()”, “apply()”, “bind()” Metotları
JavaScript’te, this anahtar kelimesinin referans aldığı nesneyi bazen doğrudan belirtmek isteyebiliriz. “Explicit binding” olarak adlandırılan bu işlemi gerçekleştirebilmek için call, apply ve bind metodlarından faydalanarak this‘in hangi nesneye karşılık geleceğini spesifik olarak belirleyebiliriz.
“Explicit binding”, özellikle dinamik doğası nedeniyle JavaScript’teki this değerinin tahmin edilmesi zor olabileceği durumlarda oldukça kullanışlı olmaktadır. Bu metodları daha yakından inceleyelim:
- call() metodu, bir fonksiyonu çağırmak ve bu çağrıyı belirli bir nesne içinde gerçekleştirmek için kullanılır. Bu yöntemi kullanarak, fonksiyonun hangi nesneye ait olduğunu belirleyebiliriz. Metodumuzun ilk argümanı, fonksiyonun çağrıldığı bağlamı (yani this değerini) belirlerken, diğer argümanlar, fonksiyona iletilir.
|
1 2 3 4 5 |
function greet(greeting) { console.log(greeting + ", " + this.name); } var person = { name: "John" }; greet.call(person, "Merhaba"); // "Merhaba, John" |
Yukarıdaki örneğimizde, call metodu greet fonksiyonunu person nesnesi içinde çağırdık ve this.name ifadesi ile person nesnesinin name özelliğini kullandık. Ayrıca, “Merhaba” şeklinde yazılmış argümanı da fonksiyona ilettik. Örneğimizi biraz daha genişletelim:
|
1 2 3 4 5 6 |
function greet(greeting, location) { console.log(greeting + ", " + this.name + " , " + location + " gezin nasıldı? "); } var person = { name: "John" }; greet.call(person, "Merhaba", "Istanbul"); // "Merhaba, John , Istanbul gezin nasıldı? " |
Bu örneğimizde ise call metodu iki argüman almıştır. İlk argüman, fonksiyonun çağrıldığı bağlamı (yani this değerini) belirler (person nesnesi). İkinci argüman "Merhaba" greeting parametresine ve üçüncü argüman "Istanbul" ise location parametresine atanmıştır.
- apply() metodu da call() metodu ile benzerlik göstermektedir. Ancak argümanları bir dizi içinde alır. Haliyle, fonksiyona birden fazla argümanı tek bir dizi içinde iletmemiz gerektiğinde kullanışlıdır. Örneğin:
|
1 2 3 4 5 6 |
function greet(greeting, location) { console.log(greeting + ", " + this.name + " , " + location + " gezin nasıldı?"); } var person = { name: "John" }; greet.apply(person, ["Merhaba", "Istanbul"]); // "Merhaba, John , Istanbul gezin nasıldı?" |
Bu örnekte, apply yöntemini kullanarak greet fonksiyonunu person nesnesi bağlamında çağırdık ve “Merhaba” ve “Istanbul” argümanlarını ilettik. Bu işlem sonucunda “Merhaba, John , Istanbul gezin nasıldı?” çıktısını ürettik
- bind() metodu ise diğer ikisinden farklı olarak bir fonksiyonu belirli bir bağlama bağlar, ancak hemen çağırmaz. Bunun yerine, bağlanmış yeni bir fonksiyon döndürür. Özellikle, fonksiyonun ileride çağrılması gerektiği durumlarda kullanışlıdır. Örneğin:
|
1 2 3 4 5 6 7 |
function greet() { console.log("Merhaba, " + this.name); } var person = { name: "John" }; var boundGreet = greet.bind(person); boundGreet(); // "Merhaba, John" |
Yukarıdaki son örneğimizde, bind metodunu kullanarak greet fonksiyonunu person nesnesi bağlamına bağladık ve bu bağlanmış fonksiyonu boundGreet adıyla tanımladık. Sonrasında boundGreet fonksiyonunu çağırdığımızda, “Merhaba, John” çıktısını elde ettik.
Bu metotlar genellikle this değerini belirli bir objeye zorlaama amacıyla implicit binding yerine kullanılır.