JavaScript geli\u015ftiricilerinin k\u00e2busu, s\u0131k\u00e7a kar\u0131\u015ft\u0131r\u0131lan bir gizem: Asl\u0131nda, Peki, bu karma\u015fan\u0131n temelinde ne yat\u0131yor? JavaScript, fonksiyonlar\u0131 “first-class citizens” olarak kabul eder, yani fonksiyonlar de\u011fi\u015fken gibi atanabilir, arg\u00fcman olarak ge\u00e7irilebilir ve bir fonksiyon taraf\u0131ndan geri d\u00f6nd\u00fcr\u00fclebilir. Bu esneklik, fonksiyonlar\u0131n farkl\u0131 yerlerde ve farkl\u0131 \u015fekillerde \u00e7a\u011fr\u0131lmas\u0131na olanak tan\u0131r. Her fonksiyon \u00e7a\u011fr\u0131s\u0131, kendine \u00f6zg\u00fc bir “execution context” olu\u015fturur ve Bir fonksiyon veya metodun d\u0131\u015f\u0131nda, yani global ba\u011flamda <\/code><\/p>\n G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere, taray\u0131c\u0131 ortam\u0131nda, herhangi bir fonksiyonun veya nesnenin d\u0131\u015f\u0131nda kullan\u0131lan Bir fonksiyon do\u011frudan \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda \u2013 yani bir nesnenin metodu olarak veya <\/code><\/p>\n Bu fark\u0131 anlamak, \u00f6zellikle eski kod tabanlar\u0131yla \u00e7al\u0131\u015f\u0131rken veya farkl\u0131 JavaScript ortamlar\u0131nda kod geli\u015ftirirken hayati \u00f6neme sahiptir. S\u0131k\u0131 mod, Belki de <\/code><\/p>\n Ancak, dikkat edilmesi gereken \u00f6nemli bir nokta var: metot bir ba\u015fka de\u011fi\u015fkene atan\u0131r ve do\u011frudan \u00e7a\u011fr\u0131l\u0131rsa, ba\u011flam kaybedilebilir. \u00c7\u00fcnk\u00fc art\u0131k bir nesnenin metodu olarak de\u011fil, basit bir fonksiyon olarak \u00e7a\u011fr\u0131lm\u0131\u015f olur. \u00d6rne\u011fin:<\/p>\n <\/code><\/p>\n Bu, JavaScript'te yeni bir nesne olu\u015fturmak i\u00e7in <\/code><\/p>\n Burada Bu s\u00fcre\u00e7, bir \"s\u0131n\u0131f\" \u015fablonundan birden fazla \"\u00f6rnek\" (instance) olu\u015fturmam\u0131za olanak tan\u0131r. ES6 ile birlikte gelen Bazen <\/code><\/p>\n <\/code><\/p>\n <\/code><\/p>\n ES6 ile birlikte hayat\u0131m\u0131za giren ok fonksiyonlar\u0131 (arrow functions), <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte, Ok fonksiyonlar\u0131n\u0131n bu \"lexical Bir web sayfas\u0131nda bir butona t\u0131kland\u0131\u011f\u0131nda \u00e7al\u0131\u015fan bir olay dinleyicisi d\u00fc\u015f\u00fcnelim. Genellikle, olay dinleyicisi fonksiyonunun i\u00e7indeki <\/code><\/p>\n Bu t\u00fcr bir ba\u011flam kayb\u0131n\u0131 \u00e7\u00f6zmek i\u00e7in \u00e7e\u015fitli y\u00f6ntemler kullanabiliriz:<\/p>\n <\/code><\/p>\n <\/code><\/p>\n <\/code>\n <\/ol>\n Bu stratejileri uygulayarak, ES6 s\u0131n\u0131flar\u0131, constructor fonksiyonlar\u0131 \u00fczerine in\u015fa edilmi\u015f sentaktik \u015fekerdir ve <\/code><\/p>\n Mobil uyumlu (responsive) web siteleri geli\u015ftirirken, JavaScript s\u0131kl\u0131kla DOM manip\u00fclasyonlar\u0131 veya kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) davran\u0131\u015flar\u0131n\u0131 dinamik olarak de\u011fi\u015ftirmek i\u00e7in kullan\u0131l\u0131r. Bu t\u00fcr durumlarda, ekran boyutuna veya cihaz \u00f6zelliklerine g\u00f6re farkl\u0131 davran\u0131\u015flar sergilemek isteyebiliriz. CSS media query'leri genellikle g\u00f6rsel d\u00fczenlemeler i\u00e7in kullan\u0131l\u0131rken, JavaScript de this<\/code> anahtar kelimesi. Peki ya size, this<\/code>‘in asl\u0131nda basit kurallara dayand\u0131\u011f\u0131n\u0131 ve bu kurallar\u0131 anlad\u0131\u011f\u0131n\u0131zda onunla dost olaca\u011f\u0131n\u0131z\u0131 s\u00f6ylesek? Bu kapsaml\u0131 rehberde, this<\/code>‘in karma\u015f\u0131k d\u00fcnyas\u0131n\u0131 ad\u0131m ad\u0131m ayd\u0131nlatacak, en temelden en ileri seviyeye kadar t\u00fcm ba\u011flamlar\u0131n\u0131 inceleyecek ve JavaScript kariyerinizde sizi bir ad\u0131m \u00f6ne ta\u015f\u0131yacak bilgi ve g\u00fcveni kazanman\u0131z\u0131 sa\u011flayaca\u011f\u0131z. this<\/code> art\u0131k sizi korkutamayacak; aksine, kodunuzu daha g\u00fc\u00e7l\u00fc k\u0131lmak i\u00e7in kullanaca\u011f\u0131n\u0131z bir araca d\u00f6n\u00fc\u015fecek!<\/p>\nthis<\/code> anahtar kelimesi, JavaScript’te nesne y\u00f6nelimli programlaman\u0131n ve dinamik kod yaz\u0131m\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r. Ancak, di\u011fer bir\u00e7ok dildeki benzer kavramlardan farkl\u0131 olarak, JavaScript’te this<\/code>‘in de\u011feri, fonksiyonun tan\u0131mland\u0131\u011f\u0131 yere de\u011fil, \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 ba\u011flama<\/i> g\u00f6re de\u011fi\u015fir. \u0130\u015fte bu dinamik yap\u0131, bir\u00e7ok geli\u015ftirici i\u00e7in ba\u015flang\u0131\u00e7ta b\u00fcy\u00fck bir kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131 yarat\u0131r. Bir an bakars\u0131n\u0131z bir nesneye i\u015faret ederken, bir sonraki an global objeye veya hatta undefined<\/code> de\u011ferine d\u00f6n\u00fc\u015febilir. Bu de\u011fi\u015fkenlik, this<\/code>‘i anlamay\u0131 bir bulmacaya d\u00f6n\u00fc\u015ft\u00fcr\u00fcrken, asl\u0131nda olduk\u00e7a mant\u0131kl\u0131 ve \u00f6ng\u00f6r\u00fclebilir kurallara dayan\u0131r.<\/p>\nthis<\/code>‘in de\u011feri, bir fonksiyonun nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na ba\u011fl\u0131 olarak belirlenen bir \u00e7al\u0131\u015fma zaman\u0131 (runtime) ba\u011flam\u0131d\u0131r. Bu, onu statik olarak atanm\u0131\u015f bir de\u011ferden ziyade, her \u00e7a\u011fr\u0131da yeniden de\u011ferlendirilen bir referans yapar. Bu esneklik, JavaScript’e g\u00fc\u00e7 katan bir \u00f6zellik olsa da, ayn\u0131 zamanda dikkatli kullan\u0131lmad\u0131\u011f\u0131nda veya ba\u011flam kurallar\u0131 iyi anla\u015f\u0131lmad\u0131\u011f\u0131nda beklenmedik sonu\u00e7lara yol a\u00e7abilir. \u00c7o\u011fu zaman, this<\/code>‘in neye i\u015faret etti\u011fini tahmin etmeye \u00e7al\u0131\u015f\u0131r\u0131z ve yan\u0131lg\u0131ya d\u00fc\u015feriz. Halbuki, bilmeniz gereken temel birka\u00e7 kural vard\u0131r ve bu kurallar\u0131 \u00f6\u011frendi\u011finizde, this<\/code>‘in davran\u0131\u015f\u0131n\u0131 tahmin etmek \u00e7ocuk oyunca\u011f\u0131 haline gelir. \u0130lk ad\u0131m\u0131m\u0131z, bu temel ba\u011flam kurallar\u0131n\u0131 ayr\u0131 ayr\u0131 incelemek ve her bir senaryoda this<\/code>‘in neden \u00f6yle davrand\u0131\u011f\u0131n\u0131 anlamakt\u0131r. B\u00f6ylece, art\u0131k “acaba this<\/code> burada ne anlama geliyor?” sorusunu sormak yerine, confidently “this<\/code> kesinlikle \u015funa i\u015faret ediyor” diyebileceksiniz.<\/p>\nthis<\/code>‘in de\u011feri de bu ba\u011flama g\u00f6re belirlenir. Bu mekanizma, fonksiyonlar\u0131 nesnelerin metotlar\u0131 olarak kullan\u0131rken veya olay dinleyicileri gibi asenkron operasyonlarda \u00e7ok \u00f6nemli bir rol oynar. Ancak, bu dinamik do\u011fa ayn\u0131 zamanda s\u0131k s\u0131k hata yap\u0131lmas\u0131na da neden olur. Bu rehberde, bu temel dinamiklerin \u00fczerine in\u015fa edilmi\u015f farkl\u0131 ba\u011flama kurallar\u0131n\u0131 derinlemesine inceleyecek ve her bir senaryoyu somut \u00f6rneklerle a\u00e7\u0131klayarak this<\/code>‘i tam anlam\u0131yla kavraman\u0131za yard\u0131mc\u0131 olaca\u011f\u0131z. Bu sayede, this<\/code>‘in sizi neden \u015fa\u015f\u0131rtamayaca\u011f\u0131n\u0131 bizzat deneyimleyeceksiniz.<\/p>\nthis<\/code>‘in Farkl\u0131 Ba\u011flamlar\u0131 ve \u00c7al\u0131\u015fma Kurallar\u0131: Derinlemesine Bir Analiz<\/h2>\nthis<\/code> anahtar kelimesinin de\u011feri, tahmin edece\u011finiz gibi tek bir senaryoya ba\u011fl\u0131 de\u011fildir; aksine, bir dizi kurala ve ba\u011flama g\u00f6re belirlenir. Bu kurallar\u0131 anlamak, JavaScript’teki this<\/code> gizemini \u00e7\u00f6zmenin anahtar\u0131d\u0131r. Her bir ba\u011flam t\u00fcr\u00fcn\u00fcn kendine \u00f6zg\u00fc bir davran\u0131\u015f kal\u0131b\u0131 vard\u0131r ve bu kal\u0131plar\u0131 \u00f6\u011frendi\u011finizde, kodunuzdaki this<\/code> referanslar\u0131n\u0131 do\u011fru bir \u015fekilde yorumlayabileceksiniz. \u0130\u015fte this<\/code>‘in d\u00f6rt ana ba\u011flama kural\u0131 ve ES6 ile gelen ok fonksiyonlar\u0131n\u0131n \u00f6zel davran\u0131\u015f\u0131:<\/p>\nK\u00fcresel Ba\u011flamda
this<\/code> Nas\u0131l Davran\u0131r?<\/h3>\nthis<\/code>‘in de\u011feri, \u00e7al\u0131\u015fma ortam\u0131na g\u00f6re de\u011fi\u015fir. Taray\u0131c\u0131 ortam\u0131nda (browser), global this<\/code> her zaman window<\/code> objesine i\u015faret eder. Node.js gibi sunucu taraf\u0131 JavaScript ortamlar\u0131nda ise global<\/code> objesine referans verir. Bu, herhangi bir \u00f6zel ba\u011flam belirtilmedi\u011finde, this<\/code>‘in varsay\u0131lan olarak en \u00fcst d\u00fczeydeki global objeyi temsil etti\u011fi anlam\u0131na gelir. \u00d6rne\u011fin, global bir de\u011fi\u015fkene veya fonksiyona eri\u015fmek istedi\u011finizde, taray\u0131c\u0131da do\u011frudan window.myVariable<\/code> veya myFunction()<\/code> yerine this.myVariable<\/code> veya this.myFunction()<\/code> kullanabilirsiniz, ancak genellikle do\u011frudan global objeye eri\u015fmek daha yayg\u0131nd\u0131r. Bu durum, \u00f6zellikle global scope’ta deklarasyon yaparken ve global objenin \u00f6zelliklerine eri\u015fmek isterken \u00f6nemlidir. Ancak, modern JavaScript geli\u015ftirmesinde global scope’ta \u00e7ok fazla \u015fey tan\u0131mlamaktan ka\u00e7\u0131n\u0131l\u0131r ve genellikle mod\u00fcl sistemleri kullan\u0131l\u0131r, bu da global this<\/code>‘in \u00f6nemini biraz azalt\u0131r. Yine de, legacy kodlarla \u00e7al\u0131\u015f\u0131rken veya taray\u0131c\u0131 ortam\u0131n\u0131n \u00f6zelliklerini kullan\u0131rken bu ba\u011flam\u0131 anlamak kritik bir rol oynar.<\/p>\n\n console.log(this === window); \/\/ Taray\u0131c\u0131da: true\n this.globalDegisken = \"Merhaba D\u00fcnya!\";\n console.log(window.globalDegisken); \/\/ Merhaba D\u00fcnya!\n <\/pre>\nthis<\/code>, do\u011frudan window<\/code> objesine e\u015fde\u011ferdir. Bu, global de\u011fi\u015fkenlerin ve fonksiyonlar\u0131n asl\u0131nda window<\/code> objesinin birer \u00f6zelli\u011fi veya metodu oldu\u011funu g\u00f6sterir. Node.js gibi di\u011fer ortamlarda ise bu davran\u0131\u015f farkl\u0131l\u0131k g\u00f6sterir, ancak temel prensip ayn\u0131d\u0131r: en \u00fcst d\u00fczeyde bir \"ana\" objeye referans verir.<\/p>\nBasit Fonksiyon \u00c7a\u011fr\u0131lar\u0131nda
this<\/code>: Varsay\u0131lan Ba\u011flama ve StrictMode<\/code><\/h3>\nnew<\/code> anahtar kelimesiyle de\u011fil \u2013 this<\/code>'in de\u011feri varsay\u0131lan ba\u011flama kural\u0131na tabidir. Taray\u0131c\u0131 ortam\u0131nda, s\u0131k\u0131 mod (strict mode) kullan\u0131lmad\u0131\u011f\u0131nda, this<\/code> yine global objeye (window<\/code>) i\u015faret eder. Bu, global kapsamda \u00e7a\u011fr\u0131lan bir fonksiyonun i\u00e7indeki this<\/code>'in de global objeyi g\u00f6sterdi\u011fi anlam\u0131na gelir. Ancak, s\u0131k\u0131 mod ('use strict';<\/code>) devreye girdi\u011finde durum tamamen de\u011fi\u015fir. S\u0131k\u0131 modda, varsay\u0131lan ba\u011flama kural\u0131 undefined<\/code> olarak ayarlan\u0131r. Bu, fonksiyonun kendi ba\u015f\u0131na bir objeye ba\u011fl\u0131 olmad\u0131\u011f\u0131n\u0131 ve yanl\u0131\u015fl\u0131kla global objeye referans vermesini engelledi\u011fi i\u00e7in daha g\u00fcvenli bir yakla\u015f\u0131md\u0131r. Modern JavaScript kodlar\u0131n\u0131n \u00e7o\u011fu s\u0131k\u0131 modda yaz\u0131ld\u0131\u011f\u0131 i\u00e7in, fonksiyonlar\u0131n varsay\u0131lan this<\/code> de\u011feri genellikle undefined<\/code>'d\u0131r, bu da global namespace'i kirletme riskini azalt\u0131r.<\/p>\n\n function merhabaDunya() {\n console.log(this);\n }\n merhabaDunya(); \/\/ Taray\u0131c\u0131da (strict mode yoksa): Window objesi\n\n function merhabaDunyaStrict() {\n 'use strict';\n console.log(this);\n }\n merhabaDunyaStrict(); \/\/ undefined\n <\/pre>\nthis<\/code>'in beklenen davran\u0131\u015ftan sapmas\u0131n\u0131 engelleyerek daha temiz ve \u00f6ng\u00f6r\u00fclebilir kod yaz\u0131m\u0131n\u0131 te\u015fvik eder. Dolay\u0131s\u0131yla, bir fonksiyonu do\u011frudan \u00e7a\u011f\u0131rd\u0131\u011f\u0131n\u0131zda this<\/code>'in neye i\u015faret etti\u011fini tahmin etmek i\u00e7in her zaman s\u0131k\u0131 modun etkin olup olmad\u0131\u011f\u0131n\u0131 kontrol etmelisiniz.<\/p>\nMetot \u00c7a\u011fr\u0131lar\u0131nda
this<\/code>: Nesnelerin Kalbi<\/h3>\nthis<\/code>'in en yayg\u0131n ve beklenen kullan\u0131m \u015fekli, bir nesnenin metodu olarak \u00e7a\u011fr\u0131lmas\u0131d\u0131r. Bu durumda, this<\/code> anahtar kelimesi, metodu \u00e7a\u011f\u0131ran nesnenin kendisine i\u015faret eder. Buna \"\u00f6rt\u00fck ba\u011flama\" (implicit binding) denir. Bir nesne \u00fczerinde bir metot \u00e7a\u011f\u0131rd\u0131\u011f\u0131n\u0131zda, JavaScript motoru otomatik olarak this<\/code>'i o nesneye ba\u011flar. Bu, metotlar\u0131n nesnenin kendi \u00f6zelliklerine ve di\u011fer metotlar\u0131na kolayca eri\u015fmesini sa\u011flar, b\u00f6ylece nesne odakl\u0131 programlaman\u0131n temelini olu\u015fturur. \u00d6rne\u011fin, bir kullanici<\/code> nesneniz ve bu nesnenin profilBilgisiGoster<\/code> ad\u0131nda bir metodu varsa, bu metodun i\u00e7indeki this<\/code> do\u011frudan kullanici<\/code> objesine referans verir. Bu sayede, metodun kullanici.ad<\/code> veya kullanici.soyad<\/code> gibi \u00f6zelliklere eri\u015fmesi m\u00fcmk\u00fcn olur.<\/p>\n\n const kullanici = {\n ad: \"Can\",\n soyad: \"Y\u0131lmaz\",\n profilBilgisiGoster: function() {\n console.log(${this.ad} ${this.soyad}<\/code>);\n }\n };\n kullanici.profilBilgisiGoster(); \/\/ Can Y\u0131lmaz\n <\/pre>\n\n const profilGoster = kullanici.profilBilgisiGoster;\n profilGoster(); \/\/ \"undefined undefined\" (e\u011fer strict mode yoksa Window, varsa undefined)\n <\/pre>\nthis<\/code>'in dinamik do\u011fas\u0131n\u0131n bir sonucudur ve metodun nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131n\u0131n, nerede tan\u0131mland\u0131\u011f\u0131ndan daha \u00f6nemli oldu\u011funu g\u00f6sterir. Bu t\u00fcr ba\u011flam kay\u0131plar\u0131, \u00f6zellikle olay dinleyicilerinde veya callback fonksiyonlar\u0131nda s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan bir sorundur ve bu durumu y\u00f6netmek i\u00e7in call<\/code>, apply<\/code>, bind<\/code> gibi a\u00e7\u0131k ba\u011flama y\u00f6ntemleri veya ok fonksiyonlar\u0131 kullan\u0131l\u0131r. Dolay\u0131s\u0131yla, metot \u00e7a\u011fr\u0131lar\u0131ndaki this<\/code> davran\u0131\u015f\u0131n\u0131 anlamak, nesne odakl\u0131 JavaScript kodunuzu do\u011fru bir \u015fekilde yap\u0131land\u0131rmak i\u00e7in esast\u0131r.<\/p>\nConstructor Fonksiyonlar\u0131nda
this<\/code>: Yeni Nesneler Yaratma Sanat\u0131<\/h3>\nnew<\/code> anahtar kelimesiyle \u00e7a\u011fr\u0131lan fonksiyonlara \"constructor fonksiyonlar\" denir. Bu senaryoda this<\/code>'in davran\u0131\u015f\u0131 \u00f6zeldir: new<\/code> operat\u00f6r\u00fc kullan\u0131ld\u0131\u011f\u0131nda, bo\u015f bir obje olu\u015fturulur ve bu bo\u015f obje this<\/code>'e atan\u0131r. Ard\u0131ndan, constructor fonksiyonunun i\u00e7indeki t\u00fcm i\u015flemler bu yeni olu\u015fturulan obje \u00fczerinde ger\u00e7ekle\u015ftirilir. Bu sayede, this.property = value;<\/code> gibi ifadelerle yeni objeye \u00f6zellikler ekleyebiliriz. Fonksiyonun sonunda, e\u011fer a\u00e7\u0131k\u00e7a ba\u015fka bir obje d\u00f6nd\u00fcr\u00fclmezse, JavaScript otomatik olarak bu yeni olu\u015fturulan this<\/code> objesini d\u00f6nd\u00fcr\u00fcr. Bu mekanizma, class tabanl\u0131 veya prototype tabanl\u0131 nesne yarat\u0131m\u0131n\u0131n temelini olu\u015fturur.<\/p>\n\n function Kisil(ad, yas) {\n this.ad = ad;\n this.yas = yas;\n this.tanit = function() {\n console.log(Benim ad\u0131m ${this.ad} ve ${this.yas} ya\u015f\u0131nday\u0131m.<\/code>);\n };\n }\n\n const can = new Kisil(\"Can\", 30);\n can.tanit(); \/\/ Benim ad\u0131m Can ve 30 ya\u015f\u0131nday\u0131m.\n <\/pre>\nnew Kisil(\"Can\", 30)<\/code> \u00e7a\u011fr\u0131s\u0131 yap\u0131ld\u0131\u011f\u0131nda, new<\/code> operat\u00f6r\u00fc a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 atar:<\/p>\n\n
this<\/code>'e ba\u011flar.<\/li>\nthis.ad<\/code> ve this.yas<\/code> \u00f6zellikleri yeni objeye atan\u0131r.)<\/li>\nthis<\/code> referans etti\u011fi yeni objeyi d\u00f6nd\u00fcr\u00fcr.<\/li>\n<\/ol>\nclass<\/code> sentaks\u0131 da temelde bu constructor mant\u0131\u011f\u0131 \u00fczerine kuruludur ve this<\/code>'in constructor i\u00e7indeki davran\u0131\u015f\u0131 ayn\u0131 kal\u0131r. Dolay\u0131s\u0131yla, yeni objeler yarat\u0131rken this<\/code>'in nas\u0131l davrand\u0131\u011f\u0131n\u0131 bilmek, \u00f6zellikle daha b\u00fcy\u00fck ve organize uygulamalar geli\u015ftirirken nesne modellerinizi do\u011fru bir \u015fekilde tasarlaman\u0131za yard\u0131mc\u0131 olur.<\/p>\nA\u00e7\u0131k Ba\u011flama:
call<\/code>, apply<\/code> ve bind<\/code> ile this<\/code>'i Kontrol Etmek<\/h3>\nthis<\/code>'in do\u011fal ba\u011flama kurallar\u0131na m\u00fcdahale etmek ve istedi\u011fimiz bir objeye ba\u011flamak isteriz. \u0130\u015fte bu noktada Function.prototype<\/code> \u00fczerinde bulunan call<\/code>, apply<\/code> ve bind<\/code> metotlar\u0131 devreye girer. Bu metotlar, bir fonksiyonu belirli bir this<\/code> ba\u011flam\u0131yla \u00e7a\u011f\u0131rmak veya yeni bir fonksiyon olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. Her \u00fc\u00e7\u00fc de olduk\u00e7a g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r ve JavaScript geli\u015ftiricilerinin ara\u00e7 kutusunda mutlaka bulunmal\u0131d\u0131r.<\/p>\ncall(thisArg, arg1, arg2, ...)<\/code>: Bir fonksiyonu \u00e7a\u011f\u0131r\u0131r ve ilk arg\u00fcman olarak belirtilen objeyi this<\/code> ba\u011flam\u0131 olarak ayarlar. Di\u011fer arg\u00fcmanlar ise fonksiyona do\u011frudan tek tek ge\u00e7irilir.<\/p>\n\n function hosGeldin() {\n console.log(Merhaba, benim ad\u0131m ${this.ad}.<\/code>);\n }\n\n const kisi1 = { ad: \"Ay\u015fe\" };\n const kisi2 = { ad: \"Fatma\" };\n\n hosGeldin.call(kisi1); \/\/ Merhaba, benim ad\u0131m Ay\u015fe.\n hosGeldin.call(kisi2); \/\/ Merhaba, benim ad\u0131m Fatma.\n <\/pre>\napply(thisArg, [argsArray])<\/code>: call<\/code> ile benzer \u015fekilde \u00e7al\u0131\u015f\u0131r, ancak fonksiyona ge\u00e7irilecek arg\u00fcmanlar\u0131 tek tek yerine bir dizi (array) olarak al\u0131r. Bu, dinamik arg\u00fcman listeleriyle \u00e7al\u0131\u015f\u0131rken olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n\n function bilgileriGuncelle(sehir, meslek) {\n console.log(${this.ad} ${sehir} \u015fehrinde ${meslek} olarak \u00e7al\u0131\u015f\u0131yor.<\/code>);\n }\n\n const kisi = { ad: \"Deniz\" };\n bilgileriGuncelle.apply(kisi, [\"\u0130zmir\", \"M\u00fchendis\"]); \/\/ Deniz \u0130zmir \u015fehrinde M\u00fchendis olarak \u00e7al\u0131\u015f\u0131yor.\n <\/pre>\nbind(thisArg, arg1, arg2, ...)<\/code>: call<\/code> ve apply<\/code>'dan farkl\u0131 olarak, bind<\/code> fonksiyonu hemen \u00e7a\u011f\u0131rmaz. Bunun yerine, belirtilen this<\/code> ba\u011flam\u0131na kal\u0131c\u0131 olarak ba\u011flanm\u0131\u015f yeni bir fonksiyon d\u00f6nd\u00fcr\u00fcr. Bu yeni fonksiyon, daha sonra \u00e7a\u011fr\u0131labilir ve this<\/code> ba\u011flam\u0131 her zaman ayn\u0131 kal\u0131r. \u00d6zellikle olay dinleyicileri veya callback fonksiyonlar\u0131 gibi durumlarda, bir fonksiyonun this<\/code> ba\u011flam\u0131n\u0131n kaybolmas\u0131n\u0131 engellemek i\u00e7in idealdir.<\/p>\n\n const butto = {\n label: \"T\u0131kla\",\n onClick: function() {\n console.log(Butonun etiketi: ${this.label}<\/code>);\n }\n };\n\n const t\u0131klaHandler = butto.onClick.bind(butto);\n \/\/ Diyelim ki bir HTML butonu t\u0131kland\u0131\u011f\u0131nda t\u0131klaHandler'\u0131 \u00e7a\u011f\u0131rd\u0131k\n t\u0131klaHandler(); \/\/ Butonun etiketi: T\u0131kla\n <\/pre>\nbind<\/code> metodu, \u00f6zellikle bir fonksiyonu farkl\u0131 bir ba\u011flamda \u00e7al\u0131\u015ft\u0131rman\u0131z gerekti\u011finde ve bu ba\u011flam\u0131n kal\u0131c\u0131 olmas\u0131n\u0131 istedi\u011finizde harika bir \u00e7\u00f6z\u00fcmd\u00fcr. \u00d6rne\u011fin, bir React bile\u015feninde olay i\u015fleyicilerini do\u011fru this<\/code> ba\u011flam\u0131yla ba\u011flamak i\u00e7in s\u0131k\u00e7a kullan\u0131l\u0131r. Bu a\u00e7\u0131k ba\u011flama metotlar\u0131, this<\/code>'i istedi\u011finiz gibi kontrol etmenizi sa\u011flayarak, JavaScript kodunuzda daha fazla esneklik ve g\u00fc\u00e7 sunar. B\u00f6ylece, ba\u011flam kay\u0131plar\u0131n\u0131 kolayca y\u00f6netebilir ve beklenmeyen davran\u0131\u015flar\u0131n \u00f6n\u00fcne ge\u00e7ebilirsiniz.<\/p>\nOk Fonksiyonlar\u0131 (
Arrow Functions<\/code>) ve this<\/code>: Lexical Scope'un G\u00fcc\u00fc<\/h3>\nthis<\/code> ba\u011flam\u0131 konusunda geleneksel fonksiyonlardan farkl\u0131 ve \u00e7ok daha basit bir davran\u0131\u015f sergiler. Geleneksel fonksiyonlar\u0131n aksine, ok fonksiyonlar\u0131n\u0131n kendi this<\/code> ba\u011flam\u0131 yoktur. Bunun yerine, this<\/code> de\u011ferini \u00e7evreleyen (lexical) ba\u011flamdan miras al\u0131rlar. Yani, ok fonksiyonu tan\u0131mland\u0131\u011f\u0131 anda \u00e7evresindeki kapsamdaki this<\/code> ne ise, ok fonksiyonunun i\u00e7indeki this<\/code> de o olacakt\u0131r. Bu durum, \u00f6zellikle callback fonksiyonlar\u0131 veya metot i\u00e7indeki i\u00e7 i\u00e7e fonksiyonlarda this<\/code> ba\u011flam\u0131n\u0131 kaybetme sorununa \u015f\u0131k bir \u00e7\u00f6z\u00fcm sunar.<\/p>\n\n const sayac = {\n deger: 0,\n artt\u0131r: function() {\n \/\/ Geleneksel fonksiyon\n setTimeout(function() {\n \/\/ Bu fonksiyonun this'i global objeye veya undefined'a i\u015faret eder (strict mode)\n console.log(Geleneksel fonksiyon: ${this.deger}<\/code>); \/\/ undefined veya NaN\n }, 1000);\n },\n artt\u0131rOkFonk: function() {\n \/\/ Ok fonksiyonu\n setTimeout(() => {\n \/\/ Bu fonksiyonun this'i 'sayac' objesine i\u015faret eder\n console.log(Ok fonksiyonu: ${this.deger}<\/code>); \/\/ 0 (ilk \u00e7a\u011fr\u0131da)\n this.deger++;\n console.log(Ok fonksiyonu (artt\u0131r\u0131ld\u0131): ${this.deger}<\/code>); \/\/ 1\n }, 1000);\n }\n };\n\n sayac.artt\u0131r();\n sayac.artt\u0131rOkFonk();\n <\/pre>\nartt\u0131r<\/code> metodundaki geleneksel fonksiyon i\u00e7indeki this<\/code>, kendi ba\u011flam\u0131n\u0131 olu\u015fturdu\u011fu i\u00e7in sayac<\/code> objesini i\u015faret etmez. Ancak, artt\u0131rOkFonk<\/code> metodundaki ok fonksiyonu, this<\/code>'i kendisini \u00e7evreleyen artt\u0131rOkFonk<\/code> metodundan miras al\u0131r; dolay\u0131s\u0131yla this<\/code> do\u011frudan sayac<\/code> objesine referans verir. Bu \u00f6zellik, bind<\/code> kullanma ihtiyac\u0131n\u0131 ortadan kald\u0131rarak kodu daha k\u0131sa ve okunabilir hale getirir. Arrow fonksiyonlar, \u00f6zellikle React, Vue gibi modern framework'lerde olay i\u015fleyicileri ve bile\u015fen metotlar\u0131nda this<\/code> ba\u011flam\u0131n\u0131 korumak i\u00e7in s\u0131k\u00e7a kullan\u0131l\u0131r.<\/p>\nthis<\/code>\" davran\u0131\u015f\u0131, onlar\u0131 dinamik olarak de\u011fi\u015fen this<\/code> ba\u011flamlar\u0131na kar\u015f\u0131 ba\u011f\u0131\u015f\u0131kl\u0131k kazand\u0131r\u0131r. Ancak bu, ayn\u0131 zamanda onlar\u0131 constructor fonksiyonlar\u0131 olarak kullanman\u0131n veya call<\/code>\/apply<\/code>\/bind<\/code> ile this<\/code> ba\u011flam\u0131n\u0131 de\u011fi\u015ftirmeye \u00e7al\u0131\u015fman\u0131n mant\u0131ks\u0131z oldu\u011fu anlam\u0131na gelir. \u00c7\u00fcnk\u00fc ok fonksiyonlar\u0131, this<\/code>'i do\u011frudan \u00fcst kapsamdan ald\u0131klar\u0131 i\u00e7in, bu metotlarla dahi this<\/code>'lerini de\u011fi\u015ftiremezsiniz. Bu nedenle, ok fonksiyonlar\u0131 genellikle bir s\u0131n\u0131f\u0131n metotlar\u0131 i\u00e7inde veya bir callback olarak, \u00fcst objeye eri\u015fimin kritik oldu\u011fu yerlerde tercih edilir. Bu ba\u011flamda, ok fonksiyonlar\u0131n\u0131n ne zaman kullan\u0131laca\u011f\u0131n\u0131 ve ne zaman geleneksel fonksiyonlara ba\u011fl\u0131 kalman\u0131z gerekti\u011fini bilmek, verimli ve hatas\u0131z JavaScript kodu yazman\u0131n \u00f6nemli bir par\u00e7as\u0131d\u0131r.<\/p>\nPratik Senaryolar ve Yayg\u0131n Hatalar:
this<\/code> Tuzaklar\u0131ndan Nas\u0131l Ka\u00e7\u0131n\u0131r\u0131z?<\/h2>\nthis<\/code> anahtar kelimesinin farkl\u0131 ba\u011flama kurallar\u0131n\u0131 anlad\u0131ktan sonra, ger\u00e7ek d\u00fcnya senaryolar\u0131nda kar\u015f\u0131m\u0131za \u00e7\u0131kan yayg\u0131n tuzaklar\u0131 ve bu tuzaklardan ka\u00e7\u0131nma stratejilerini konu\u015fal\u0131m. \u00d6zellikle callback fonksiyonlar\u0131, olay dinleyicileri ve zamanlay\u0131c\u0131lar gibi asenkron operasyonlarda this<\/code> ba\u011flam\u0131n\u0131n beklenmedik \u015fekillerde de\u011fi\u015fti\u011fini g\u00f6rmek olduk\u00e7a olas\u0131d\u0131r. Bu durumlar, geli\u015ftiriciler i\u00e7in s\u0131k\u00e7a ba\u015f a\u011fr\u0131s\u0131 yarat\u0131r, ancak do\u011fru y\u00f6ntemlerle kolayca y\u00f6netilebilir.<\/p>\nthis<\/code>, olay\u0131n tetiklendi\u011fi DOM eleman\u0131na (yani butona) i\u015faret eder. Bu, \u00e7o\u011fu zaman istedi\u011fimiz davran\u0131\u015ft\u0131r. Ancak, e\u011fer bu olay dinleyicisi bir s\u0131n\u0131f\u0131n veya objenin metodu ise ve bu metodun i\u00e7inde ba\u015fka bir fonksiyon (\u00f6rne\u011fin bir HTTP iste\u011fi veya setTimeout<\/code>) \u00e7a\u011fr\u0131l\u0131rsa, o i\u00e7 fonksiyonun i\u00e7indeki this<\/code> b\u00fcy\u00fck ihtimalle de\u011fi\u015fecektir. \u00c7\u00fcnk\u00fc i\u00e7 fonksiyon, art\u0131k do\u011frudan DOM eleman\u0131 ba\u011flam\u0131nda de\u011fil, kendi \u00e7a\u011fr\u0131lma ba\u011flam\u0131nda \u00e7al\u0131\u015f\u0131r. Bu durumda, orijinal objenin \u00f6zelliklerine eri\u015fmek istedi\u011finizde undefined<\/code> ile kar\u015f\u0131la\u015f\u0131rs\u0131n\u0131z.<\/p>\n\n class Sayac {\n constructor() {\n this.sayi = 0;\n document.getElementById('arttirBtn').addEventListener('click', this.arttirMetodu);\n }\n\n arttirMetodu() {\n \/\/ Bu 'this' burada button elementine i\u015faret eder, Sayac objesine de\u011fil!\n console.log(this.sayi); \/\/ undefined\n \/\/ this.sayi++; \/\/ Hata!\n }\n }\n \/\/ const sayacObj = new Sayac();\n <\/pre>\n\n
bind()<\/code> Kullanmak:<\/strong> Olay dinleyicisini veya callback'i kaydederken bind()<\/code> metodunu kullanarak fonksiyonu istenen this<\/code> ba\u011flam\u0131na kal\u0131c\u0131 olarak ba\u011flayabilirsiniz.<\/li>\n\n class SayacFix1 {\n constructor() {\n this.sayi = 0;\n document.getElementById('arttirBtn').addEventListener('click', this.arttirMetodu.bind(this));\n }\n arttirMetodu() {\n console.log(this.sayi++); \/\/ Beklenen de\u011feri yazd\u0131r\u0131r ve art\u0131r\u0131r.\n }\n }\n \/\/ const sayacObjFix1 = new SayacFix1();\n <\/pre>\nArrow Functions<\/code>) Kullanmak:<\/strong> E\u011fer metodunuz bir ok fonksiyonu ise, zaten lexical this<\/code> \u00f6zelli\u011finden dolay\u0131 \u00e7evresindeki this<\/code>'i miras alacakt\u0131r. Class'lar i\u00e7inde metot tan\u0131mlarken bu olduk\u00e7a yayg\u0131n ve temiz bir y\u00f6ntemdir.<\/li>\n\n class SayacFix2 {\n constructor() {\n this.sayi = 0;\n \/\/ Ok fonksiyonu ile metodu tan\u0131mlayarak 'this'i otomatik olarak ba\u011flar\u0131z\n document.getElementById('arttirBtn').addEventListener('click', () => this.arttirMetodu());\n }\n arttirMetodu = () => { \/\/ Metodu ok fonksiyonu olarak tan\u0131ml\u0131yoruz\n console.log(this.sayi++); \/\/ \u00c7al\u0131\u015f\u0131r\n }\n }\n \/\/ const sayacObjFix2 = new SayacFix2();\n <\/pre>\nthat<\/code> veya self<\/code> De\u011fi\u015fkeni Kullanmak (Legacy Yakla\u015f\u0131m):<\/strong> ES6 \u00f6ncesi d\u00f6nemde, i\u00e7 fonksiyonlarda this<\/code> ba\u011flam\u0131n\u0131 korumak i\u00e7in yayg\u0131n olarak d\u0131\u015f this<\/code>'i bir de\u011fi\u015fkene (genellikle that<\/code> veya self<\/code>) atamak kullan\u0131l\u0131rd\u0131. Bu y\u00f6ntem hala ge\u00e7erli olsa da, modern JavaScript'te ok fonksiyonlar\u0131 veya bind<\/code> daha \u00e7ok tercih edilir.<\/li>\n\n class SayacLegacy {\n constructor() {\n this.sayi = 0;\n const self = this; \/\/ 'this'i bir de\u011fi\u015fkene at\u0131yoruz\n document.getElementById('arttirBtn').addEventListener('click', function() {\n console.log(self.sayi++); \/\/ 'self' \u00fczerinden eri\u015fim\n });\n }\n }\n \/\/ const sayacObjLegacy = new SayacLegacy();\n <\/pre>\nthis<\/code> ba\u011flam\u0131n\u0131n beklenmedik \u015fekilde de\u011fi\u015fmesinden kaynaklanan hatalar\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde ortadan kald\u0131rabilirsiniz. Unutmay\u0131n, \u00f6nemli olan bir fonksiyonun nerede tan\u0131mland\u0131\u011f\u0131 de\u011fil, nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131d\u0131r ve modern JavaScript bize bu \u00e7a\u011fr\u0131 ba\u011flam\u0131n\u0131 y\u00f6netmek i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lar sunar. Bu yakla\u015f\u0131mlar sayesinde, kodunuz daha sa\u011flam, okunabilir ve hata ay\u0131klamas\u0131 daha kolay hale gelir. \u00d6zellikle asenkron operasyonlarda bu prensiplere dikkat etmek, performansl\u0131 ve sorunsuz uygulamalar geli\u015ftirmek i\u00e7in kritik bir \u00f6neme sahiptir.<\/p>\nGeli\u015fmi\u015f Konular ve Modern Yakla\u015f\u0131mlar:
this<\/code> ile Daha Yetenekli Olmak<\/h2>\nthis<\/code> anahtar kelimesinin temel ba\u011flama kurallar\u0131n\u0131 ve yayg\u0131n tuzaklardan ka\u00e7\u0131nma yollar\u0131n\u0131 kavrad\u0131ktan sonra, modern JavaScript ekosisteminde this<\/code>'in nas\u0131l daha etkin kullan\u0131labilece\u011fine ve kar\u015f\u0131m\u0131za \u00e7\u0131kabilecek daha geli\u015fmi\u015f senaryolara g\u00f6z atal\u0131m. ES6 ile birlikte gelen s\u0131n\u0131flar (classes) ve mod\u00fcller, this<\/code> y\u00f6netimini daha yap\u0131land\u0131r\u0131lm\u0131\u015f hale getirirken, responsive tasar\u0131m gibi alanlarda this<\/code>'in dolayl\u0131 etkileri de bulunur.<\/p>\nES6 S\u0131n\u0131flar\u0131nda (
Classes<\/code>) this<\/code> Kullan\u0131m\u0131<\/h3>\nthis<\/code>'in constructor i\u00e7indeki davran\u0131\u015f\u0131, geleneksel constructor fonksiyonlar\u0131ndakiyle ayn\u0131d\u0131r: new<\/code> anahtar kelimesiyle yeni bir s\u0131n\u0131f \u00f6rne\u011fi (instance) olu\u015fturuldu\u011funda, this<\/code> o yeni \u00f6rne\u011fe i\u015faret eder. S\u0131n\u0131f metotlar\u0131nda da this<\/code>, metodu \u00e7a\u011f\u0131ran s\u0131n\u0131f \u00f6rne\u011fine referans verir. Ancak, \u00f6nceki b\u00f6l\u00fcmde de bahsetti\u011fimiz gibi, s\u0131n\u0131f metotlar\u0131n\u0131 callback olarak kulland\u0131\u011f\u0131n\u0131zda (\u00f6rne\u011fin bir olay dinleyicisinde), this<\/code> ba\u011flam\u0131 kaybolabilir. Bu durumu a\u015fmak i\u00e7in constructor i\u00e7inde bind()<\/code> kullanmak veya metotlar\u0131 ok fonksiyonlar\u0131 olarak tan\u0131mlamak (class field syntax ile) modern ve temiz yakla\u015f\u0131mlard\u0131r.<\/p>\n\n class KullaniciProfili {\n constructor(ad) {\n this.ad = ad;\n \/\/ this.bilgiGoster = this.bilgiGoster.bind(this); \/\/ Y\u00f6ntem 1: bind constructor i\u00e7inde\n }\n\n \/\/ Y\u00f6ntem 2: Class field syntax ile arrow function olarak tan\u0131mlama\n bilgiGoster = () => {\n console.log(Profil sahibi: ${this.ad}<\/code>);\n }\n }\n\n const kullanici = new KullaniciProfili(\"Elif\");\n \/\/ document.getElementById('gosterBtn').addEventListener('click', kullanici.bilgiGoster);\n \/\/ E\u011fer Y\u00f6ntem 1 veya Y\u00f6ntem 2 kullan\u0131lmazsa, yukar\u0131daki \u00e7a\u011fr\u0131da 'this.ad' undefined olur.\n <\/pre>\nResponsive Tasar\u0131mda JavaScript ve
this<\/code> Ba\u011flam\u0131 (Media Query \u00d6rne\u011fi)<\/h3>\nwindow.matchMedia()<\/code> API'si veya