Event Listener This<\/title>\n <\/head>\n <body>\n <button id=\"myButton\">Bana T\u0131kla<\/button>\n <script>\n const myButton = document.getElementById('myButton');\n\n myButton.addEventListener('click', function() {\n \/\/ Bu normal fonksiyonda this, olay\u0131n tetiklendi\u011fi eleman\u0131 (myButton) g\u00f6sterir.\n console.log('Olay dinleyicide this:', this);\n this.textContent = 'T\u0131kland\u0131!'; \/\/ Butonun metnini de\u011fi\u015ftirir\n });\n\n const app = {\n mesaj: 'Uygulama mesaj\u0131',\n handleButtonClick: function() {\n \/\/ Bu fonksiyon bir metod olarak tan\u0131mland\u0131.\n \/\/ E\u011fer do\u011frudan olay dinleyiciye verilirse, this yine butonu g\u00f6sterir, app objesini de\u011fil.\n \/\/ \u00c7\u00fcnk\u00fc fonksiyonun kendisi bir DOM olay\u0131 taraf\u0131ndan \u00e7a\u011fr\u0131l\u0131yor.\n console.log('Metot i\u00e7indeki olay dinleyicide this:', this);\n console.log(this.mesaj); \/\/ undefined veya butona ait bir \u00f6zellik\n },\n bindedHandleButtonClick: function() {\n \/\/ Bu fonksiyonun this'ini app objesine ba\u011flayal\u0131m\n \/\/ bind() ile veya arrow function ile yap\u0131labilir\n const self = this; \/\/ Eski y\u00f6ntem\n myButton.addEventListener('click', function() {\n console.log('Ba\u011fl\u0131 metot i\u00e7inde this:', this); \/\/ Buton\n console.log('self.mesaj:', self.mesaj); \/\/ Uygulama mesaj\u0131\n });\n\n \/\/ Daha modern yakla\u015f\u0131m: bind() ile\n \/\/ myButton.addEventListener('click', this.handleButtonClick.bind(this));\n\n \/\/ Veya ok fonksiyonu ile:\n \/\/ myButton.addEventListener('click', () => {\n \/\/ console.log('Ok fonksiyonlu olay dinleyicide this:', this); \/\/ app objesi\n \/\/ console.log(this.mesaj); \/\/ Uygulama mesaj\u0131\n \/\/ });\n }\n };\n\n \/\/ app.handleButtonClick() metodunu do\u011frudan olay dinleyiciye atad\u0131\u011f\u0131m\u0131zda,\n \/\/ this, butonu i\u015faret eder, app objesini de\u011fil.\n \/\/ app.bindedHandleButtonClick(); \/\/ Denemek i\u00e7in yorum sat\u0131r\u0131n\u0131 kald\u0131r\u0131n\n \/\/ myButton.addEventListener('click', app.handleButtonClick); \/\/ Bu \u00e7a\u011fr\u0131da app.handleButtonClick i\u00e7indeki this yine butonu g\u00f6sterir.\n\n \/\/ Do\u011fru ba\u011flama i\u00e7in:\n \/\/ myButton.addEventListener('click', app.handleButtonClick.bind(app));\n \/\/ myButton.addEventListener('click', () => app.handleButtonClick());\n <\/script>\n <\/body>\n <\/html>\n <\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte de g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, ilk <code>addEventListener<\/code>'daki normal fonksiyon i\u00e7inde <code>this<\/code>, do\u011frudan <code>myButton<\/code> eleman\u0131n\u0131 i\u015faret eder. Ancak, <code>app.handleButtonClick<\/code> gibi bir metodu do\u011frudan olay dinleyici olarak atarsak, metodun i\u00e7indeki <code>this<\/code> yine olay\u0131n tetiklendi\u011fi elemana (<code>myButton<\/code>) i\u015faret eder, <code>app<\/code> objesine de\u011fil. Bu durum, metodun <code>app<\/code> objesiyle olan ba\u011flam\u0131n\u0131 \"kaybetmesine\" neden olur. Bu t\u00fcr senaryolarda, <code>this.handleButtonClick.bind(this)<\/code> kullanarak veya bir ok fonksiyonu (<code>() => this.handleButtonClick()<\/code>) kullanarak <code>this<\/code>'i <code>app<\/code> objesine ba\u011flamam\u0131z gerekir. Bu sayede, olay dinleyicisi i\u00e7inde <code>this<\/code> her zaman istedi\u011fimiz objeyi i\u015faret eder ve kodumuz daha tutarl\u0131 hale gelir. Bu ba\u011flama stratejileri, \u00f6zellikle dinamik ve interaktif kullan\u0131c\u0131 aray\u00fczleri geli\u015ftirirken, <code>this<\/code> ile ilgili beklenmedik davran\u0131\u015flar\u0131n \u00f6n\u00fcne ge\u00e7mek i\u00e7in hayati \u00f6neme sahiptir.<\/p>\n<h2><code>this<\/code> ile \u0130lgili \u0130leri Seviye Senaryolar ve Tuzaklar<\/h2>\n<p>JavaScript'te <code>this<\/code> anahtar kelimesinin temellerini ve ba\u015fl\u0131ca ba\u011flama kurallar\u0131n\u0131 anlad\u0131ktan sonra, daha karma\u015f\u0131k ve bazen yan\u0131lt\u0131c\u0131 senaryolarla kar\u015f\u0131la\u015fmaya haz\u0131r\u0131z. Geli\u015ftirme s\u00fcrecinde s\u0131kl\u0131kla kar\u015f\u0131m\u0131za \u00e7\u0131kan baz\u0131 ileri seviye durumlar ve bu durumlar\u0131n getirdi\u011fi \"tuzaklar\" vard\u0131r. Bu b\u00f6l\u00fcmde, <code>this<\/code>'i kaybetme sorununa yol a\u00e7an yayg\u0131n hatalar\u0131, bu hatalardan ka\u00e7\u0131nma yollar\u0131n\u0131, modern JavaScript s\u0131n\u0131flar\u0131nda <code>this<\/code>'in nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve hatta mobil cihazlarda <code>this<\/code> ba\u011flam\u0131n\u0131n dolayl\u0131 etkilerini ele alaca\u011f\u0131z. Bu konulara hakim olmak, daha sa\u011flam, hatas\u0131z ve performansl\u0131 JavaScript uygulamalar\u0131 geli\u015ftirmenize yard\u0131mc\u0131 olacakt\u0131r. Unutmay\u0131n, <code>this<\/code>'in derinliklerine indik\u00e7e, dilin ger\u00e7ek g\u00fcc\u00fcn\u00fc ve inceliklerini daha iyi kavrayacaks\u0131n\u0131z.<\/p>\n<h3><code>this<\/code>'i Kaybetmekten Ka\u00e7\u0131nmak: Yayg\u0131n Hatalar ve \u00c7\u00f6z\u00fcmleri<\/h3>\n<p><code>this<\/code> ba\u011flam\u0131n\u0131 kaybetmek, JavaScript geli\u015ftiricilerinin en s\u0131k kar\u015f\u0131la\u015ft\u0131\u011f\u0131 sorunlardan biridir. \u00d6zellikle callback fonksiyonlar\u0131, asenkron i\u015flemler veya olay dinleyicileriyle \u00e7al\u0131\u015f\u0131rken <code>this<\/code>'in beklenen objeyi i\u015faret etmemesi yayg\u0131n bir durumdur. Bu, genellikle bir objenin metodunun ba\u015fka bir fonksiyona arg\u00fcman olarak ge\u00e7irildi\u011finde veya metodun objeden ayr\u0131l\u0131p ba\u011f\u0131ms\u0131z bir fonksiyon gibi \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda meydana gelir. Bu durum, \u00e7al\u0131\u015fma zaman\u0131nda <code>this<\/code>'in global objeye (veya kat\u0131 modda <code>undefined<\/code>'a) y\u00f6nelmesine neden olur ve objenin kendi \u00f6zelliklerine eri\u015filemez hale gelir.<\/p>\n<pre><code>\n class Sayac {\n constructor() {\n this.sayi = 0;\n \/\/ \u0130lk yakla\u015f\u0131m: bind kullanmadan\n \/\/ document.getElementById('arttirBtn').addEventListener('click', this.arttir);\n\n \/\/ \u00c7\u00f6z\u00fcm 1: bind() kullanarak ba\u011flam\u0131 korumak\n document.getElementById('arttirBtn').addEventListener('click', this.arttir.bind(this));\n\n \/\/ \u00c7\u00f6z\u00fcm 2: Arrow function kullanarak leksik this'i korumak\n \/\/ document.getElementById('arttirBtn').addEventListener('click', () => this.arttir());\n\n \/\/ \u00c7\u00f6z\u00fcm 3: Constructor i\u00e7inde metodu ba\u011flamak (yayg\u0131n React prati\u011fi)\n \/\/ this.azalt = this.azalt.bind(this);\n \/\/ document.getElementById('azaltBtn').addEventListener('click', this.azalt);\n }\n\n arttir() {\n this.sayi++;\n console.log('Art\u0131r\u0131ld\u0131:', this.sayi); \/\/ E\u011fer bind kullan\u0131lmazsa, this.sayi undefined olur\n }\n\n azalt() {\n this.sayi--;\n console.log('Azalt\u0131ld\u0131:', this.sayi);\n }\n }\n\n \/\/ HTML k\u0131sm\u0131nda <button id=\"arttirBtn\">Art\u0131r<\/button> olmal\u0131\n \/\/ Yeni bir Sayac \u00f6rne\u011fi olu\u015ftural\u0131m (taray\u0131c\u0131 ortam\u0131nda \u00e7al\u0131\u015f\u0131r)\n \/\/ const mySayac = new Sayac();\n <\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki <code>Sayac<\/code> s\u0131n\u0131f\u0131 \u00f6rne\u011finde, <code>arttir<\/code> metodu bir olay dinleyiciye callback olarak verildi\u011finde, varsay\u0131lan olarak bu metodun i\u00e7indeki <code>this<\/code>, butonu i\u015faret eder (yani olay\u0131n tetiklendi\u011fi eleman\u0131), <code>Sayac<\/code> s\u0131n\u0131f\u0131n\u0131n \u00f6rne\u011fini de\u011fil. Bu durumda <code>this.sayi<\/code> <code>undefined<\/code> olur. Bu sorunu \u00e7\u00f6zmek i\u00e7in birden fazla y\u00f6ntem mevcuttur:<\/p>\n<ol>\n<li><strong><code>.bind(this)<\/code> Kullanmak:<\/strong> En do\u011frudan \u00e7\u00f6z\u00fcmd\u00fcr. <code>this.arttir.bind(this)<\/code> diyerek, <code>arttir<\/code> metodunun <code>this<\/code> ba\u011flam\u0131n\u0131 <code>Sayac<\/code> s\u0131n\u0131f\u0131n\u0131n \u00f6rne\u011fine (yani <code>mySayac<\/code> objesine) kal\u0131c\u0131 olarak sabitleriz. Bu, metodun nerede \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na bak\u0131lmaks\u0131z\u0131n her zaman do\u011fru objeyi i\u015faret etmesini sa\u011flar.<\/li>\n<li><strong>Ok Fonksiyonlar\u0131 (Arrow Functions) Kullanmak:<\/strong> Olay dinleyiciye bir ok fonksiyonu vermek (<code>() => this.arttir()<\/code>) de sorunu \u00e7\u00f6zer. Ok fonksiyonlar\u0131 leksik <code>this<\/code>'i miras ald\u0131\u011f\u0131 i\u00e7in, \u00e7evreleyen kapsamdaki <code>this<\/code> de\u011ferini (yani <code>Sayac<\/code> s\u0131n\u0131f\u0131n\u0131n \u00f6rne\u011fini) otomatik olarak al\u0131r. Bu y\u00f6ntem, kodun daha k\u0131sa ve modern g\u00f6r\u00fcnmesini sa\u011flar.<\/li>\n<li><strong>Constructor \u0130\u00e7inde Metotlar\u0131 Ba\u011flamak:<\/strong> \u00d6zellikle React gibi k\u00fct\u00fcphanelerde yayg\u0131n olan bir di\u011fer y\u00f6ntem, constructor i\u00e7inde metotlar\u0131 <code>this<\/code>'e ba\u011flamakt\u0131r (<code>this.arttir = this.arttir.bind(this);<\/code>). Bu sayede, metodlar her zaman do\u011fru ba\u011flamda \u00e7al\u0131\u015f\u0131r ve her olay dinleyiciye eklendi\u011finde tekrar <code>bind()<\/code> \u00e7a\u011fr\u0131s\u0131 yapmaya gerek kalmaz.<\/li>\n<\/ol>\n<p>Bu \u00e7\u00f6z\u00fcmler, <code>this<\/code>'i kaybetme sorununu etkin bir \u015fekilde ele alarak, kodunuzun daha g\u00fcvenilir ve bak\u0131m\u0131 kolay olmas\u0131n\u0131 sa\u011flar. Do\u011fru y\u00f6ntemi se\u00e7mek, projenizin gereksinimlerine ve ki\u015fisel tercihlerinize ba\u011fl\u0131d\u0131r. Ancak, bu teknikleri bilmek, JavaScript'te daha profesyonel ve hatas\u0131z uygulamalar geli\u015ftirmenizin anahtar\u0131d\u0131r.<\/p>\n<h3><code>this<\/code> ile S\u0131n\u0131flar (<code>Classes<\/code>) ve Kaps\u00fclleme<\/h3>\n<p>ES6 ile birlikte gelen <code>class<\/code> s\u00f6zdizimi, JavaScript'te nesne tabanl\u0131 programlama yapmay\u0131 daha okunakl\u0131 ve tan\u0131d\u0131k hale getirmi\u015ftir. S\u0131n\u0131flar, constructor fonksiyonlar\u0131n\u0131n daha modern bir sentetik \u015fekeridir (syntactic sugar) ve <code>this<\/code> anahtar kelimesini kullanarak s\u0131n\u0131f \u00f6rneklerinin \u00f6zelliklerine ve metotlar\u0131na eri\u015fimi kaps\u00fcllemeyi kolayla\u015ft\u0131r\u0131r. Bir s\u0131n\u0131f metodunun i\u00e7inde <code>this<\/code>, o metodun \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 s\u0131n\u0131f \u00f6rne\u011fini (instance) i\u015faret eder. Bu, s\u0131n\u0131f\u0131n i\u00e7indeki veriye g\u00fcvenli bir \u015fekilde eri\u015fmek ve bu veri \u00fczerinde i\u015flem yapmak i\u00e7in temel bir mekanizmad\u0131r.<\/p>\n<pre><code>\n class HesapMakinesi {\n constructor(baslangicDegeri) {\n this.deger = baslangicDegeri;\n }\n\n topla(sayi) {\n this.deger += sayi;\n return this; \/\/ Zincirleme \u00e7a\u011fr\u0131lara izin vermek i\u00e7in this'i d\u00f6nd\u00fcrebiliriz\n }\n\n cikar(sayi) {\n this.deger -= sayi;\n return this;\n }\n\n goster() {\n console.log(<code>Mevcut de\u011fer: ${this.deger}<\/code>);\n }\n }\n\n const makine = new HesapMakinesi(10);\n makine.topla(5).cikar(2).goster(); \/\/ Mevcut de\u011fer: 13\n \/\/ Her metot \u00e7a\u011fr\u0131s\u0131nda this, 'makine' objesini i\u015faret eder.\n <\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki \u00f6rnekte, <code>HesapMakinesi<\/code> s\u0131n\u0131f\u0131n\u0131n metotlar\u0131 (<code>topla<\/code>, <code>cikar<\/code>, <code>goster<\/code>) i\u00e7inde <code>this<\/code> her zaman <code>makine<\/code> \u00f6rne\u011fini i\u015faret eder. Bu, s\u0131n\u0131f\u0131n dahili <code>deger<\/code> \u00f6zelli\u011fine g\u00fcvenli bir \u015fekilde eri\u015filmesini ve \u00fczerinde i\u015flem yap\u0131lmas\u0131n\u0131 sa\u011flar. S\u0131n\u0131f metotlar\u0131nda <code>this<\/code>'in otomatik olarak s\u0131n\u0131f \u00f6rne\u011fine ba\u011flanmas\u0131, kaps\u00fclleme prensibini g\u00fc\u00e7lendirir ve objelerin kendi i\u00e7 durumlar\u0131n\u0131 y\u00f6netmelerine olanak tan\u0131r.<\/p>\n<p><strong><code>super<\/code> ve Miras Alma:<\/strong> Miras al\u0131nan s\u0131n\u0131flarda (<code>extends<\/code> anahtar kelimesi ile), t\u00fcretilmi\u015f s\u0131n\u0131f\u0131n constructor'\u0131nda <code>super()<\/code> \u00e7a\u011fr\u0131s\u0131 yap\u0131ld\u0131\u011f\u0131nda, \u00fcst s\u0131n\u0131f\u0131n constructor'\u0131 \u00e7a\u011fr\u0131l\u0131r ve <code>this<\/code> t\u00fcretilmi\u015f s\u0131n\u0131f\u0131n \u00f6rne\u011fine ba\u011flan\u0131r. Bu, miras al\u0131nan \u00f6zelliklerin ve metotlar\u0131n do\u011fru <code>this<\/code> ba\u011flam\u0131nda \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Alt s\u0131n\u0131f metotlar\u0131nda <code>super.metotAdi()<\/code> \u015feklinde \u00fcst s\u0131n\u0131f metotlar\u0131na eri\u015fmek de m\u00fcmk\u00fcnd\u00fcr, ve bu \u00e7a\u011fr\u0131larda <code>this<\/code> yine alt s\u0131n\u0131f\u0131n \u00f6rne\u011fini i\u015faret eder.<\/p>\n<pre><code>\n class Geli\u015fmi\u015fHesapMakinesi extends HesapMakinesi {\n constructor(baslangicDegeri) {\n super(baslangicDegeri); \/\/ \u00dcst s\u0131n\u0131f\u0131n constructor'\u0131n\u0131 \u00e7a\u011f\u0131r, this'i ba\u011fla\n }\n\n carp(sayi) {\n this.deger *= sayi;\n return this;\n }\n\n bol(sayi) {\n if (sayi === 0) {\n console.error(\"S\u0131f\u0131ra b\u00f6lme hatas\u0131!\");\n return this;\n }\n this.deger \/= sayi;\n return this;\n }\n }\n\n const gelismisMakine = new Geli\u015fmi\u015fHesapMakinesi(10);\n gelismisMakine.topla(5).carp(2).bol(3).goster(); \/\/ Mevcut de\u011fer: 10\n <\/pre>\n<p><\/code><\/p>\n<p>Geli\u015fmi\u015f hesap makinesi \u00f6rne\u011finde, <code>super(baslangicDegeri)<\/code> \u00e7a\u011fr\u0131s\u0131 <code>HesapMakinesi<\/code> s\u0131n\u0131f\u0131n\u0131n constructor'\u0131n\u0131 \u00e7al\u0131\u015ft\u0131r\u0131rken <code>this<\/code>'i <code>gelismisMakine<\/code> \u00f6rne\u011fine ba\u011flar. Daha sonra <code>topla()<\/code> gibi miras al\u0131nan metotlar ve <code>carp()<\/code> gibi yeni metotlar, <code>this<\/code> \u00fczerinden <code>gelismisMakine<\/code>'nin <code>deger<\/code> \u00f6zelli\u011fine eri\u015febilir. Bu, s\u0131n\u0131f tabanl\u0131 yap\u0131larla \u00e7al\u0131\u015f\u0131rken <code>this<\/code>'in nas\u0131l tutarl\u0131 bir \u015fekilde davrand\u0131\u011f\u0131n\u0131 g\u00f6sterir ve karma\u015f\u0131k sistemlerin tasarlanmas\u0131na olanak tan\u0131r.<\/p>\n<h3>Mobil Cihazlarda <code>this<\/code> ve Performans \u0130pu\u00e7lar\u0131<\/h3>\n<p><code>this<\/code> anahtar kelimesinin kendisi do\u011frudan performans \u00fczerinde b\u00fcy\u00fck bir etkiye sahip olmasa da, <code>this<\/code> ba\u011flam\u0131n\u0131n yanl\u0131\u015f y\u00f6netimi veya gereksiz ba\u011flam yeniden tan\u0131mlamalar\u0131 (\u00f6rne\u011fin, her renderda <code>.bind(this)<\/code> \u00e7a\u011f\u0131rmak gibi) dolayl\u0131 olarak performans sorunlar\u0131na yol a\u00e7abilir. \u00d6zellikle mobil cihazlarda, s\u0131n\u0131rl\u0131 kaynaklar ve daha yava\u015f i\u015flemciler nedeniyle, bu t\u00fcr optimizasyonlar daha belirgin hale gelebilir.<\/p>\n<p><strong>Performans \u0130pu\u00e7lar\u0131:<\/strong><\/p>\n<ul>\n<li><strong>Gereksiz Ba\u011flam Ba\u011flamalar\u0131ndan Ka\u00e7\u0131n\u0131n:<\/strong> \u00d6zellikle olay dinleyicilerinde veya s\u0131k\u00e7a \u00e7a\u011fr\u0131lan callback'lerde, her seferinde <code>.bind(this)<\/code> \u00e7a\u011f\u0131rmak yerine, constructor i\u00e7inde bir kere ba\u011flamak (<code>this.metot = this.metot.bind(this);<\/code>) veya s\u0131n\u0131f metotlar\u0131n\u0131 ok fonksiyonlar\u0131 olarak tan\u0131mlamak (<code>metot = () => { ... }<\/code>) daha verimli olabilir. Bu, fazladan fonksiyon objeleri olu\u015fturulmas\u0131n\u0131 \u00f6nler ve bellek kullan\u0131m\u0131n\u0131 azalt\u0131r.<\/li>\n<li><strong>Leksik <code>this<\/code> Kulan\u0131m\u0131n\u0131 Avantaja \u00c7evirin:<\/strong> Ok fonksiyonlar\u0131, <code>this<\/code>'i tan\u0131mland\u0131klar\u0131 kapsamdan miras ald\u0131klar\u0131 i\u00e7in, callback'lerde ve i\u00e7 i\u00e7e fonksiyonlarda <code>this<\/code> ba\u011flam\u0131n\u0131 manuel olarak y\u00f6netme ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r. Bu, hem kodu daha temiz yapar hem de ba\u011flama i\u015flemlerinin getirece\u011fi k\u00fc\u00e7\u00fck performans y\u00fcklerinden ka\u00e7\u0131nman\u0131z\u0131 sa\u011flar.<\/li>\n<li><strong>B\u00fcy\u00fck Veri Setlerinde <code>this<\/code> Y\u00f6netimi:<\/strong> Dinamik olarak olu\u015fturulan listelerde veya tablolar gibi b\u00fcy\u00fck veri setlerinde, her bir eleman i\u00e7in ayr\u0131 ayr\u0131 olay dinleyicileri eklemek ve her birinde <code>this<\/code> ba\u011flam\u0131n\u0131 y\u00f6netmek, performans sorunlar\u0131na yol a\u00e7abilir. Bu durumlarda, olay delegasyonu (event delegation) kullanarak tek bir \u00fcst elemana olay dinleyici eklemek ve <code>event.target<\/code> \u00fczerinden hangi alt eleman\u0131n t\u0131klatt\u0131\u011f\u0131n\u0131 belirlemek daha iyi bir yakla\u015f\u0131md\u0131r. Bu sayede, \u00e7ok say\u0131da <code>this<\/code> ba\u011flamas\u0131 ve dinleyici olu\u015fturman\u0131n \u00f6n\u00fcne ge\u00e7ilir.<\/li>\n<\/ul>\n<p>Mobil cihazlar i\u00e7in web uygulamalar\u0131 geli\u015ftirirken, JavaScript kodunuzun performans\u0131n\u0131 d\u00fc\u015f\u00fcnmek \u00f6nemlidir. <code>this<\/code>'in do\u011fru ve verimli kullan\u0131m\u0131, uygulaman\u0131z\u0131n daha h\u0131zl\u0131 yan\u0131t vermesine ve daha ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sunmas\u0131na katk\u0131da bulunacakt\u0131r. Medya sorgular\u0131yla (media queries) kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc mobil cihazlara adapte ederken, JavaScript taraf\u0131nda da <code>this<\/code> ba\u011flamalar\u0131n\u0131 optimize etmek, genel performans\u0131 art\u0131r\u0131c\u0131 bir etki yaratabilir. \u00d6rne\u011fin, gereksiz yeniden \u00e7izimleri \u00f6nlemek i\u00e7in <code>this<\/code>'in do\u011fru ba\u011flama ile UI g\u00fcncellemelerini tetikledi\u011finden emin olmak kritik \u00f6neme sahiptir.<\/p>\n<div class=\"interactive-element\">\n Uzman \u0130pucu: CSS medya sorgular\u0131 (\u00f6rne\u011fin, <code>@media (max-width: 768px) { ... }<\/code>) ile g\u00f6rsel adaptasyon sa\u011flarken, JavaScript taraf\u0131nda da <code>this<\/code> y\u00f6netimini mobilize \u00f6zel olarak g\u00f6zden ge\u00e7irin. \u00d6zellikle DOM manip\u00fclasyonlar\u0131 ve olay dinleyicilerinde <code>this<\/code> ba\u011flam\u0131 nedeniyle olu\u015fan gereksiz i\u015flem y\u00fcklerini minimize etmek, mobil performans\u0131n\u0131 %25'e kadar art\u0131rabilir.\n <\/div>\n<h2>\u00d6zet ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n<p><code>this<\/code> anahtar kelimesi, JavaScript'in en temel ancak ayn\u0131 zamanda en kafa kar\u0131\u015ft\u0131r\u0131c\u0131 \u00f6zelliklerinden biridir. Bu kapsaml\u0131 makalede, <code>this<\/code>'in ne oldu\u011funu, farkl\u0131 ba\u011flamlarda nas\u0131l davrand\u0131\u011f\u0131n\u0131 ve bu dinamik yap\u0131y\u0131 nas\u0131l kontrol edebilece\u011fimizi detayl\u0131ca inceledik. Varsay\u0131lan ba\u011flamdan ba\u015flayarak, dolayl\u0131, a\u00e7\u0131k (<code>call<\/code>, <code>apply<\/code>, <code>bind<\/code>) ve yeni (<code>new<\/code>) ba\u011flama kurallar\u0131n\u0131 \u00f6\u011frendik. Ok fonksiyonlar\u0131n\u0131n leksik <code>this<\/code> davran\u0131\u015f\u0131n\u0131n, \u00f6zellikle callback fonksiyonlar\u0131 ve olay dinleyicilerindeki \"<code>this<\/code> kaybetme\" sorununa nas\u0131l modern bir \u00e7\u00f6z\u00fcm getirdi\u011fini ke\u015ffettik. Ayr\u0131ca, s\u0131n\u0131f tabanl\u0131 yap\u0131larda <code>this<\/code>'in nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve mobil performans\u0131 art\u0131rmak i\u00e7in <code>this<\/code> y\u00f6netiminde dikkat etmemiz gereken noktalar\u0131 da ele ald\u0131k. Unutmay\u0131n, <code>this<\/code>'i anlaman\u0131n anahtar\u0131, fonksiyonun <em>nas\u0131l<\/em> \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na odaklanmakt\u0131r. Bu bilgiyle, JavaScript kodunuzu daha g\u00fcvenilir, \u00f6ng\u00f6r\u00fclebilir ve bak\u0131m\u0131 kolay hale getirebilirsiniz. \u015eimdi, s\u0131k\u00e7a sorulan birka\u00e7 soruya g\u00f6z atal\u0131m.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular<\/h3>\n<dl>\n<dt><code>this<\/code> neden bu kadar kafa kar\u0131\u015ft\u0131r\u0131c\u0131?<\/dt>\n<dd><code>this<\/code>'in kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olmas\u0131n\u0131n temel nedeni, de\u011ferinin dinamik olmas\u0131 ve bir fonksiyonun veya metodun nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na ba\u011fl\u0131 olarak de\u011fi\u015fmesidir. Di\u011fer bir\u00e7ok dilde <code>this<\/code> (veya benzeri bir anahtar kelime) statik olarak tan\u0131mland\u0131\u011f\u0131 yere ba\u011fl\u0131yken, JavaScript'te \u00e7a\u011fr\u0131 an\u0131ndaki ba\u011flama g\u00f6re de\u011fi\u015fir. Bu dinamizm, esneklik sa\u011flarken, ayn\u0131 zamanda beklenmedik sonu\u00e7lara yol a\u00e7abilir.<\/dd>\n<dt><code>call()<\/code>, <code>apply()<\/code> ve <code>bind()<\/code> aras\u0131ndaki temel fark nedir?<\/dt>\n<dd>\u00dc\u00e7\u00fc de bir fonksiyona \u00f6zel bir <code>this<\/code> de\u011feri atamak i\u00e7in kullan\u0131l\u0131r.<\/p>\n<ul>\n<li><code>call(thisArg, arg1, arg2, ...)<\/code>: Fonksiyonu hemen \u00e7a\u011f\u0131r\u0131r ve arg\u00fcmanlar\u0131 virg\u00fclle ayr\u0131lm\u0131\u015f olarak al\u0131r.<\/li>\n<li><code>apply(thisArg, [argsArray])<\/code>: Fonksiyonu hemen \u00e7a\u011f\u0131r\u0131r ve arg\u00fcmanlar\u0131 bir dizi (array) olarak al\u0131r.<\/li>\n<li><code>bind(thisArg, arg1, arg2, ...)<\/code>: Fonksiyonu hemen \u00e7a\u011f\u0131rmaz, bunun yerine belirtilen <code>this<\/code> de\u011ferine ve arg\u00fcmanlara sahip, kal\u0131c\u0131 olarak ba\u011flanm\u0131\u015f yeni bir fonksiyon d\u00f6nd\u00fcr\u00fcr. Bu yeni fonksiyon daha sonra manuel olarak \u00e7a\u011fr\u0131labilir.<\/li>\n<\/ul>\n<\/dd>\n<dt>Ok fonksiyonlar\u0131 (arrow functions) <code>this<\/code> davran\u0131\u015f\u0131n\u0131 nas\u0131l etkiler?<\/dt>\n<dd>Ok fonksiyonlar\u0131 kendi <code>this<\/code> ba\u011flam\u0131na sahip de\u011fildir. Bunun yerine, <code>this<\/code> de\u011ferini tan\u0131mland\u0131klar\u0131 (lexical) kapsamdan, yani \u00e7evreleyen kod blo\u011fundan miras al\u0131rlar. Bu, <code>this<\/code>'in \"kaybolmas\u0131\" sorununu \u00e7\u00f6zer ve callback fonksiyonlar\u0131nda veya i\u00e7 i\u00e7e fonksiyonlarda <code>this<\/code>'i manuel olarak ba\u011flama ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r. Ancak, bir ok fonksiyonunu do\u011frudan bir objenin metodu olarak veya constructor olarak kullan\u0131rken dikkatli olmak gerekir, \u00e7\u00fcnk\u00fc kendi <code>this<\/code>'i olmad\u0131\u011f\u0131 i\u00e7in beklenmedik sonu\u00e7lar verebilir.<\/dd>\n<dt>S\u0131n\u0131flar (Classes) i\u00e7inde <code>this<\/code> nas\u0131l \u00e7al\u0131\u015f\u0131r?<\/dt>\n<dd>ES6 s\u0131n\u0131flar\u0131nda, bir s\u0131n\u0131f metodunun i\u00e7inde <code>this<\/code>, o metodun \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 s\u0131n\u0131f \u00f6rne\u011fini (instance) i\u015faret eder. Constructor i\u00e7inde <code>this<\/code>, yeni olu\u015fturulan s\u0131n\u0131f \u00f6rne\u011fine ba\u011flan\u0131r. E\u011fer bir metot s\u0131n\u0131f \u00f6rne\u011finden ayr\u0131 olarak (\u00f6rne\u011fin bir callback olarak) \u00e7a\u011fr\u0131l\u0131rsa, <code>this<\/code> ba\u011flam\u0131 yine kaybolabilir. Bu durumda, constructor i\u00e7inde metotlar\u0131 <code>.bind(this)<\/code> ile ba\u011flamak veya s\u0131n\u0131f metotlar\u0131n\u0131 ok fonksiyonlar\u0131 olarak tan\u0131mlamak gibi y\u00f6ntemler kullan\u0131l\u0131r.<\/dd>\n<dt><code>this<\/code>'i kaybetme sorunundan nas\u0131l ka\u00e7\u0131nabilirim?<\/dt>\n<dd><code>this<\/code>'i kaybetme sorunundan ka\u00e7\u0131nmak i\u00e7in birka\u00e7 etkili strateji vard\u0131r:<\/p>\n<ul>\n<li>Fonksiyon callback olarak ge\u00e7ti\u011finde <code>.bind(this)<\/code> kullanmak.<\/li>\n<li>Callback fonksiyonlar\u0131n\u0131 veya i\u00e7 i\u00e7e fonksiyonlar\u0131 ok fonksiyonlar\u0131 olarak tan\u0131mlamak.<\/li>\n<li>S\u0131n\u0131flar\u0131n constructor'\u0131nda metotlar\u0131 <code>this.metot = this.metot.bind(this);<\/code> \u015feklinde \u00f6nceden ba\u011flamak.<\/li>\n<li>Eski JavaScript kodlar\u0131nda bazen <code>const self = this;<\/code> veya <code>const that = this;<\/code> gibi de\u011fi\u015fkenler kullanarak <code>this<\/code> referans\u0131n\u0131 yakalamak.<\/li>\n<\/ul>\n<p> Bu stratejilerden birini veya birka\u00e7\u0131n\u0131 uygulayarak kodunuzdaki <code>this<\/code> ile ilgili kafa kar\u0131\u015f\u0131kl\u0131klar\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde azaltabilirsiniz.\n <\/dd>\n<\/dl>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"JavaScript geli\u015ftiricilerinin en \u00e7ok kafa kar\u0131\u015ft\u0131ran konular\u0131ndan biri \u015f\u00fcphesiz this anahtar kelimesinin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131d\u0131r. Fonksiyonlar\u0131n nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na ba\u011fl\u0131…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[129],"tags":[],"class_list":{"0":"post-33684","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n<title>JavaScript'te `this` Anahtar Kelimesini Anlamak: Derinlemesine Bir Rehber<\/title>\n<meta name=\"description\" content=\"JavaScript geli\u015ftiricilerinin en \u00e7ok kafa kar\u0131\u015ft\u0131ran konular\u0131ndan biri \u015f\u00fcphesiz this anahtar kelimesinin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131d\u0131r. Fonksiyonlar\u0131n nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na ba\u011fl\u0131 olarak de\u011ferini dinamik olarak de\u011fi\u015ftirebilen bu esrarengiz kelime, do\u011fru anla\u015f\u0131ld\u0131\u011f\u0131nda kodunuzu daha etkili ve anla\u015f\u0131l\u0131r hale getirebilir. Bu makalede, this'in derinliklerine inerek, farkl\u0131 senaryolarda nas\u0131l davrand\u0131\u011f\u0131n\u0131, yayg\u0131n hatalar\u0131 ve bu karma\u015f\u0131k yap\u0131y\u0131 nas\u0131l ustal\u0131kla y\u00f6netece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Haz\u0131rlan\u0131n, \u00e7\u00fcnk\u00fc this'in s\u0131r perdesi aralan\u0131yor!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-anahtar-kelimesini-anlamak-derinlemesine-bir-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript'te `this` Anahtar Kelimesini Anlamak: Derinlemesine Bir Rehber\" \/>\n<meta property=\"og:description\" content=\"JavaScript geli\u015ftiricilerinin en \u00e7ok kafa kar\u0131\u015ft\u0131ran konular\u0131ndan biri \u015f\u00fcphesiz this anahtar kelimesinin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131d\u0131r. Fonksiyonlar\u0131n nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na ba\u011fl\u0131 olarak de\u011ferini dinamik olarak de\u011fi\u015ftirebilen bu esrarengiz kelime, do\u011fru anla\u015f\u0131ld\u0131\u011f\u0131nda kodunuzu daha etkili ve anla\u015f\u0131l\u0131r hale getirebilir. Bu makalede, this'in derinliklerine inerek, farkl\u0131 senaryolarda nas\u0131l davrand\u0131\u011f\u0131n\u0131, yayg\u0131n hatalar\u0131 ve bu karma\u015f\u0131k yap\u0131y\u0131 nas\u0131l ustal\u0131kla y\u00f6netece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Haz\u0131rlan\u0131n, \u00e7\u00fcnk\u00fc this'in s\u0131r perdesi aralan\u0131yor!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-anahtar-kelimesini-anlamak-derinlemesine-bir-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-05T19:01:18+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"29 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-anahtar-kelimesini-anlamak-derinlemesine-bir-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-anahtar-kelimesini-anlamak-derinlemesine-bir-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"JavaScript’te `this` Anahtar Kelimesini Anlamak: Derinlemesine Bir Rehber\",\"datePublished\":\"2025-11-05T19:01:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-anahtar-kelimesini-anlamak-derinlemesine-bir-rehber\/\"},\"wordCount\":4669,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Javascript\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-anahtar-kelimesini-anlamak-derinlemesine-bir-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-anahtar-kelimesini-anlamak-derinlemesine-bir-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-anahtar-kelimesini-anlamak-derinlemesine-bir-rehber\/\",\"name\":\"JavaScript'te `this` Anahtar Kelimesini Anlamak: Derinlemesine Bir Rehber\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-05T19:01:18+00:00\",\"description\":\"JavaScript geli\u015ftiricilerinin en \u00e7ok kafa kar\u0131\u015ft\u0131ran konular\u0131ndan biri \u015f\u00fcphesiz this anahtar kelimesinin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131d\u0131r. Fonksiyonlar\u0131n nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na ba\u011fl\u0131 olarak de\u011ferini dinamik olarak de\u011fi\u015ftirebilen bu esrarengiz kelime, do\u011fru anla\u015f\u0131ld\u0131\u011f\u0131nda kodunuzu daha etkili ve anla\u015f\u0131l\u0131r hale getirebilir. Bu makalede, this'in derinliklerine inerek, farkl\u0131 senaryolarda nas\u0131l davrand\u0131\u011f\u0131n\u0131, yayg\u0131n hatalar\u0131 ve bu karma\u015f\u0131k yap\u0131y\u0131 nas\u0131l ustal\u0131kla y\u00f6netece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Haz\u0131rlan\u0131n, \u00e7\u00fcnk\u00fc this'in s\u0131r perdesi aralan\u0131yor!\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-anahtar-kelimesini-anlamak-derinlemesine-bir-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-anahtar-kelimesini-anlamak-derinlemesine-bir-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-anahtar-kelimesini-anlamak-derinlemesine-bir-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript’te `this` Anahtar Kelimesini Anlamak: Derinlemesine Bir Rehber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n","yoast_head_json":{"title":"JavaScript'te `this` Anahtar Kelimesini Anlamak: Derinlemesine Bir Rehber","description":"JavaScript geli\u015ftiricilerinin en \u00e7ok kafa kar\u0131\u015ft\u0131ran konular\u0131ndan biri \u015f\u00fcphesiz this anahtar kelimesinin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131d\u0131r. Fonksiyonlar\u0131n nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na ba\u011fl\u0131 olarak de\u011ferini dinamik olarak de\u011fi\u015ftirebilen bu esrarengiz kelime, do\u011fru anla\u015f\u0131ld\u0131\u011f\u0131nda kodunuzu daha etkili ve anla\u015f\u0131l\u0131r hale getirebilir. Bu makalede, this'in derinliklerine inerek, farkl\u0131 senaryolarda nas\u0131l davrand\u0131\u011f\u0131n\u0131, yayg\u0131n hatalar\u0131 ve bu karma\u015f\u0131k yap\u0131y\u0131 nas\u0131l ustal\u0131kla y\u00f6netece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Haz\u0131rlan\u0131n, \u00e7\u00fcnk\u00fc this'in s\u0131r perdesi aralan\u0131yor!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-anahtar-kelimesini-anlamak-derinlemesine-bir-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"JavaScript'te `this` Anahtar Kelimesini Anlamak: Derinlemesine Bir Rehber","og_description":"JavaScript geli\u015ftiricilerinin en \u00e7ok kafa kar\u0131\u015ft\u0131ran konular\u0131ndan biri \u015f\u00fcphesiz this anahtar kelimesinin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131d\u0131r. Fonksiyonlar\u0131n nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na ba\u011fl\u0131 olarak de\u011ferini dinamik olarak de\u011fi\u015ftirebilen bu esrarengiz kelime, do\u011fru anla\u015f\u0131ld\u0131\u011f\u0131nda kodunuzu daha etkili ve anla\u015f\u0131l\u0131r hale getirebilir. Bu makalede, this'in derinliklerine inerek, farkl\u0131 senaryolarda nas\u0131l davrand\u0131\u011f\u0131n\u0131, yayg\u0131n hatalar\u0131 ve bu karma\u015f\u0131k yap\u0131y\u0131 nas\u0131l ustal\u0131kla y\u00f6netece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Haz\u0131rlan\u0131n, \u00e7\u00fcnk\u00fc this'in s\u0131r perdesi aralan\u0131yor!","og_url":"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-anahtar-kelimesini-anlamak-derinlemesine-bir-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-05T19:01:18+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"29 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-anahtar-kelimesini-anlamak-derinlemesine-bir-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-anahtar-kelimesini-anlamak-derinlemesine-bir-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"JavaScript’te `this` Anahtar Kelimesini Anlamak: Derinlemesine Bir Rehber","datePublished":"2025-11-05T19:01:18+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-anahtar-kelimesini-anlamak-derinlemesine-bir-rehber\/"},"wordCount":4669,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Javascript"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/javascriptte-this-anahtar-kelimesini-anlamak-derinlemesine-bir-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-anahtar-kelimesini-anlamak-derinlemesine-bir-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-anahtar-kelimesini-anlamak-derinlemesine-bir-rehber\/","name":"JavaScript'te `this` Anahtar Kelimesini Anlamak: Derinlemesine Bir Rehber","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-05T19:01:18+00:00","description":"JavaScript geli\u015ftiricilerinin en \u00e7ok kafa kar\u0131\u015ft\u0131ran konular\u0131ndan biri \u015f\u00fcphesiz this anahtar kelimesinin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131d\u0131r. Fonksiyonlar\u0131n nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na ba\u011fl\u0131 olarak de\u011ferini dinamik olarak de\u011fi\u015ftirebilen bu esrarengiz kelime, do\u011fru anla\u015f\u0131ld\u0131\u011f\u0131nda kodunuzu daha etkili ve anla\u015f\u0131l\u0131r hale getirebilir. Bu makalede, this'in derinliklerine inerek, farkl\u0131 senaryolarda nas\u0131l davrand\u0131\u011f\u0131n\u0131, yayg\u0131n hatalar\u0131 ve bu karma\u015f\u0131k yap\u0131y\u0131 nas\u0131l ustal\u0131kla y\u00f6netece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Haz\u0131rlan\u0131n, \u00e7\u00fcnk\u00fc this'in s\u0131r perdesi aralan\u0131yor!","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-anahtar-kelimesini-anlamak-derinlemesine-bir-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/javascriptte-this-anahtar-kelimesini-anlamak-derinlemesine-bir-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-anahtar-kelimesini-anlamak-derinlemesine-bir-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript’te `this` Anahtar Kelimesini Anlamak: Derinlemesine Bir Rehber"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33684","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=33684"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33684\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33684"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33684"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

JavaScript geli\u015ftiricilerinin en \u00e7ok kafa kar\u0131\u015ft\u0131ran konular\u0131ndan biri \u015f\u00fcphesiz

this<\/code> anahtar kelimesinin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131d\u0131r. Fonksiyonlar\u0131n nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na ba\u011fl\u0131 olarak de\u011ferini dinamik olarak de\u011fi\u015ftirebilen bu esrarengiz kelime, do\u011fru anla\u015f\u0131ld\u0131\u011f\u0131nda kodunuzu daha etkili ve anla\u015f\u0131l\u0131r hale getirebilir. Bu makalede, this<\/code>‘in derinliklerine inerek, farkl\u0131 senaryolarda nas\u0131l davrand\u0131\u011f\u0131n\u0131, yayg\u0131n hatalar\u0131 ve bu karma\u015f\u0131k yap\u0131y\u0131 nas\u0131l ustal\u0131kla y\u00f6netece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Haz\u0131rlan\u0131n, \u00e7\u00fcnk\u00fc this<\/code>‘in s\u0131r perdesi aralan\u0131yor!<\/p>\n

this<\/code> anahtar kelimesi, JavaScript’te kodun \u00e7al\u0131\u015ft\u0131\u011f\u0131 mevcut y\u00fcr\u00fctme ba\u011flam\u0131n\u0131 (execution context)<\/strong> ifade eder. Ancak bu ba\u011flam, bir fonksiyonun veya metodun nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na g\u00f6re s\u00fcrekli de\u011fi\u015febilir. Temelde, this<\/code> bir fonksiyonun veya metodun \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 anda hangi objeye referans etti\u011fini belirten dinamik bir referanst\u0131r. Bu dinamizm, JavaScript’in esnek yap\u0131s\u0131n\u0131n bir par\u00e7as\u0131 olmakla birlikte, \u00f6zellikle yeni ba\u015flayanlar i\u00e7in b\u00fcy\u00fck bir kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131 kayna\u011f\u0131 olabilir. \u00d6rne\u011fin, bir fonksiyonun ayn\u0131 kod blo\u011fu i\u00e7erisinde farkl\u0131 \u015fekillerde \u00e7a\u011fr\u0131lmas\u0131, this<\/code>‘in tamamen farkl\u0131 objelere i\u015faret etmesine neden olabilir. Bu durum, \u00f6zellikle callback fonksiyonlar\u0131 veya asenkron operasyonlar gibi modern JavaScript uygulamalar\u0131nda s\u0131kl\u0131kla kar\u015f\u0131m\u0131za \u00e7\u0131kar. this<\/code>‘in bu de\u011fi\u015fken do\u011fas\u0131n\u0131 anlamak, JavaScript’te ustala\u015fman\u0131n ilk ve en \u00f6nemli ad\u0131mlar\u0131ndan biridir. this<\/code>‘in \u00e7al\u0131\u015fma prensibi, bir nevi bir dedektifin ipu\u00e7lar\u0131n\u0131 takip ederek olay\u0131n ge\u00e7ti\u011fi yeri bulmas\u0131 gibidir; her \u00e7a\u011fr\u0131, this<\/code>‘in nereye y\u00f6nelmesi gerekti\u011fini g\u00f6steren benzersiz bir ipucudur. \u0130\u015fte bu y\u00fczden, this<\/code>‘i anlamak sadece bir dil bilgisi kural\u0131 de\u011fil, ayn\u0131 zamanda JavaScript’in temel mimarisini kavramak anlam\u0131na gelir.<\/p>\n

\n Uzman \u0130pucu: this<\/code>‘i anlaman\u0131n en iyi yolu, her zaman bir fonksiyonun nas\u0131l<\/b> \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na odaklanmakt\u0131r, nerede<\/b> tan\u0131mland\u0131\u011f\u0131na de\u011fil. Bu, dinamik ba\u011flama prensibini kavraman\u0131n anahtar\u0131d\u0131r.\n <\/div>\nJavaScript motoru, bir fonksiyon \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda o \u00e7a\u011fr\u0131ya \u00f6zg\u00fc bir y\u00fcr\u00fctme ba\u011flam\u0131 olu\u015fturur ve bu ba\u011flam i\u00e7erisinde this<\/code> de\u011ferini belirler. Bu mekanizma, fonksiyonlar\u0131n farkl\u0131 objelerin \u00fczerinde metot gibi davranabilmesini sa\u011flar. Modern JavaScript uygulamalar\u0131nda, \u00f6zellikle framework ve k\u00fct\u00fcphanelerde (\u00f6rne\u011fin React, Angular, Vue.js), this<\/code>‘in do\u011fru kullan\u0131m\u0131, bile\u015fenlerin state y\u00f6netimi ve etkile\u015fimleri a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. Yanl\u0131\u015f this<\/code> ba\u011flam\u0131, beklenmedik hatalara veya uygulaman\u0131n d\u00fczg\u00fcn \u00e7al\u0131\u015fmamas\u0131na yol a\u00e7abilir. Bu nedenle, this<\/code>‘in varsay\u0131lan ba\u011flamdan ba\u015flayarak, a\u00e7\u0131k ba\u011flama y\u00f6ntemlerine, ok fonksiyonlar\u0131na ve hatta s\u0131n\u0131f yap\u0131lar\u0131na kadar uzanan \u00e7e\u015fitli davran\u0131\u015flar\u0131n\u0131 detayl\u0131ca incelememiz gerekiyor. Makalemizin ilerleyen b\u00f6l\u00fcmlerinde, this<\/code>‘in davran\u0131\u015f\u0131n\u0131 y\u00f6neten d\u00f6rt temel kural\u0131 ve bunlar\u0131n ger\u00e7ek d\u00fcnya senaryolar\u0131ndaki yans\u0131malar\u0131n\u0131 ad\u0131m ad\u0131m ele alaca\u011f\u0131z.<\/p>\n this<\/code>, JavaScript’in prototip tabanl\u0131 miras yap\u0131s\u0131n\u0131n da \u00f6nemli bir par\u00e7as\u0131d\u0131r. Bir objenin prototip zinciri boyunca metot \u00e7a\u011fr\u0131lar\u0131 yap\u0131ld\u0131\u011f\u0131nda, this<\/code> genellikle metodu \u00e7a\u011f\u0131ran en son objeye i\u015faret eder. Bu durum, kodu daha yeniden kullan\u0131labilir ve mod\u00fcler hale getirir. \u00d6rne\u011fin, birden fazla objenin ayn\u0131 metodu kullanabilmesi, kod tekrar\u0131n\u0131 \u00f6nler ve bak\u0131m kolayl\u0131\u011f\u0131 sa\u011flar. this<\/code>‘in bu y\u00f6n\u00fcn\u00fc kavramak, daha karma\u015f\u0131k obje manip\u00fclasyonlar\u0131 ve miras yap\u0131lar\u0131 olu\u015ftururken size b\u00fcy\u00fck bir avantaj sa\u011flayacakt\u0131r. Ayr\u0131ca, JavaScript’teki kat\u0131 mod (strict mode) da this<\/code>‘in varsay\u0131lan davran\u0131\u015f\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde etkiler. Kat\u0131 modda, global ba\u011flamda bile this<\/code>‘in undefined<\/code> olarak ayarlanmas\u0131, yanl\u0131\u015fl\u0131kla global objeyi kirletme riskini azalt\u0131r ve daha g\u00fcvenli kod yazmaya te\u015fvik eder. T\u00fcm bu n\u00fcanslar, this<\/code> anahtar kelimesinin neden bu kadar merkezi ve ayn\u0131 zamanda kafa kar\u0131\u015ft\u0131r\u0131c\u0131 oldu\u011funu ortaya koymaktad\u0131r.<\/p>\n this<\/code> De\u011ferini Belirleyen Temel Kurallar ve Ba\u011flamlar<\/h2>\nthis<\/code> anahtar kelimesinin de\u011ferini belirleyen d\u00f6rt temel kural vard\u0131r: Varsay\u0131lan Ba\u011flama (Default Binding), Dolayl\u0131 Ba\u011flama (Implicit Binding), A\u00e7\u0131k Ba\u011flama (Explicit Binding) ve Yeni Ba\u011flama (New Binding). Bu kurallar, this<\/code>‘in davran\u0131\u015f\u0131n\u0131 anlaman\u0131n temelini olu\u015fturur. Hangi kural\u0131n ge\u00e7erli olaca\u011f\u0131, fonksiyonun veya metodun \u00e7a\u011fr\u0131lma \u015fekline g\u00f6re de\u011fi\u015fir. Bu b\u00f6l\u00fcmde, ilk iki kural\u0131 ve bunlar\u0131n g\u00fcnl\u00fck kodlamadaki yans\u0131malar\u0131n\u0131 derinlemesine inceleyece\u011fiz. Bu ba\u011flama t\u00fcrleri, \u00f6zellikle fonksiyonlar\u0131n ve metotlar\u0131n s\u0131kl\u0131kla kullan\u0131ld\u0131\u011f\u0131 uygulamalarda kar\u015f\u0131m\u0131za \u00e7\u0131kar ve do\u011fru anla\u015f\u0131lmad\u0131\u011f\u0131nda mant\u0131k hatalar\u0131na yol a\u00e7abilir. Bu nedenle, her bir ba\u011flama t\u00fcr\u00fcn\u00fc ayr\u0131nt\u0131l\u0131 \u00f6rneklerle peki\u015ftirmek, this<\/code> karma\u015fas\u0131n\u0131 \u00e7\u00f6zmek i\u00e7in hayati \u00f6neme sahiptir. Ad\u0131m ad\u0131m ilerleyerek, bu dinamik yap\u0131n\u0131n nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 somut \u00f6rneklerle g\u00f6sterece\u011fiz.<\/p>\n Varsay\u0131lan Ba\u011flama (Default Binding): Global Kapsamda this<\/code> Nas\u0131l Davran\u0131r?<\/h3>\nE\u011fer bir fonksiyon ba\u011f\u0131ms\u0131z olarak \u00e7a\u011fr\u0131l\u0131rsa, yani hi\u00e7bir objeye ba\u011fl\u0131 olmadan tek ba\u015f\u0131na \u00e7al\u0131\u015ft\u0131r\u0131l\u0131rsa, this<\/code> genellikle global objeye (taray\u0131c\u0131da window<\/code>, Node.js’de global<\/code>) i\u015faret eder. Bu, this<\/code>‘in en temel ve \u00e7o\u011fu zaman istenmeyen davran\u0131\u015f\u0131d\u0131r. Global objeyi kirletme riskini ta\u015f\u0131d\u0131\u011f\u0131 i\u00e7in, \u00f6zellikle b\u00fcy\u00fck uygulamalarda dikkat edilmesi gereken bir durumdur. Ancak, JavaScript’in kat\u0131 modu (strict mode) bu varsay\u0131lan davran\u0131\u015f\u0131 de\u011fi\u015ftirir. Kat\u0131 modda, global ba\u011flamda \u00e7a\u011fr\u0131lan bir fonksiyonda this<\/code>‘in de\u011feri undefined<\/code> olur, bu da daha g\u00fcvenli ve \u00f6ng\u00f6r\u00fclebilir kod yazmay\u0131 te\u015fvik eder. Bu farkl\u0131l\u0131\u011f\u0131 iyi anlamak, \u00f6zellikle eski ve yeni kod tabanlar\u0131 aras\u0131nda ge\u00e7i\u015f yaparken \u00f6nemlidir.<\/p>\n \n function gosterThisGlobal() {\n console.log(\"Global ba\u011flamda this:\", this);\n }\n\n gosterThisGlobal(); \/\/ Taray\u0131c\u0131da: Window objesini, Node.js'de: global objesini g\u00f6sterir.\n\n function gosterThisStrict() {\n \"use strict\";\n console.log(\"Kat\u0131 modda this:\", this);\n }\n\n gosterThisStrict(); \/\/ undefined g\u00f6sterir.\n <\/pre>\n<\/code><\/p>\n G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere, kat\u0131 mod this<\/code>'in varsay\u0131lan ba\u011flamdaki davran\u0131\u015f\u0131n\u0131 tamamen de\u011fi\u015ftirir ve bu, modern JavaScript geli\u015ftirme pratiklerinde b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Bu sayede, geli\u015ftiriciler fark\u0131nda olmadan global objeye \u00f6zellik eklemekten veya mevcut global \u00f6zellikleri de\u011fi\u015ftirmekten ka\u00e7\u0131nabilirler. Bu durum, \u00f6zellikle payla\u015f\u0131lan k\u00fct\u00fcphaneler veya mod\u00fcller geli\u015ftirirken kritik bir g\u00fcvenlik ve kararl\u0131l\u0131k fakt\u00f6r\u00fcd\u00fcr. Varsay\u0131lan ba\u011flam\u0131n bu \u015fekilde kontrol alt\u0131na al\u0131nmas\u0131, JavaScript ekosisteminin daha sa\u011flam bir yap\u0131ya kavu\u015fmas\u0131na yard\u0131mc\u0131 olmu\u015ftur. Dolay\u0131s\u0131yla, kod yazarken her zaman kat\u0131 modu kullanmay\u0131 d\u00fc\u015f\u00fcnmek, olas\u0131 yan etkilerin \u00f6n\u00fcne ge\u00e7mek i\u00e7in iyi bir al\u0131\u015fkanl\u0131kt\u0131r.<\/p>\n Dolayl\u0131 Ba\u011flama (Implicit Binding): Metot \u00c7a\u011fr\u0131lar\u0131nda this<\/code> Nas\u0131l Belirlenir?<\/h3>\nBir fonksiyon bir objenin metodu olarak \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, this<\/code> genellikle metodu \u00e7a\u011f\u0131ran objeye i\u015faret eder. Bu, this<\/code>'in en yayg\u0131n ve beklenen davran\u0131\u015flar\u0131ndan biridir. \u00d6rne\u011fin, bir kullanici<\/code> objesinin bilgiGoster()<\/code> metodu \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, bu metodun i\u00e7indeki this<\/code>, kullanici<\/code> objesini ifade eder. Bu mekanizma, objelerin kendi i\u00e7 verilerine eri\u015fmesini ve bu veriler \u00fczerinde i\u015flem yapmas\u0131n\u0131 sa\u011flar. Ancak, bu durumun baz\u0131 tuzaklar\u0131 da vard\u0131r. \u00d6zellikle, bir metodu objesinden ay\u0131r\u0131p ayr\u0131 bir de\u011fi\u015fken olarak atad\u0131\u011f\u0131n\u0131zda veya bir callback fonksiyonu olarak kulland\u0131\u011f\u0131n\u0131zda, this<\/code> ba\u011flam\u0131 kaybolabilir ve varsay\u0131lan ba\u011flam (global obje veya kat\u0131 modda undefined<\/code>) devreye girebilir. Bu t\u00fcr senaryolar, \u201cthis<\/code> kaybetme\u201d olarak bilinir ve JavaScript geli\u015ftiricilerinin s\u0131k\u00e7a kar\u015f\u0131la\u015ft\u0131\u011f\u0131 bir problemdir.<\/p>\n \n const kullanici = {\n ad: \"Ahmet\",\n yas: 30,\n bilgiGoster: function() {\n console.log(Merhaba, ben ${this.ad} ve ${this.yas} ya\u015f\u0131nday\u0131m.<\/code>);\n }\n };\n\n kullanici.bilgiGoster(); \/\/ Merhaba, ben Ahmet ve 30 ya\u015f\u0131nday\u0131m. (this -> kullanici objesi)\n\n const genelBilgiGoster = kullanici.bilgiGoster;\n \/\/ \u015eimdi fonksiyonu do\u011frudan \u00e7a\u011f\u0131r\u0131yoruz, obje ba\u011flam\u0131 kayboldu\n genelBilgiGoster(); \/\/ Kat\u0131 modda hata verir veya global objeyi g\u00f6sterir.\n \/\/ Merhaba, ben undefined ve undefined ya\u015f\u0131nday\u0131m. (this -> window\/global veya undefined)\n <\/pre>\n<\/code><\/p>\n Yukar\u0131daki \u00f6rnekte g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, genelBilgiGoster()<\/code> \u00e7a\u011fr\u0131s\u0131 yap\u0131ld\u0131\u011f\u0131nda this<\/code> ba\u011flam\u0131 kullanici<\/code> objesinden ayr\u0131ld\u0131\u011f\u0131 i\u00e7in, this.ad<\/code> ve this.yas<\/code> undefined<\/code> d\u00f6ner (veya kat\u0131 modda hata verir). Bu, dolayl\u0131 ba\u011flaman\u0131n en kritik tuzaklar\u0131ndan biridir. Bu durum, \u00f6zellikle olay dinleyicilerinde veya zamanlay\u0131c\u0131 fonksiyonlar\u0131nda (setTimeout<\/code>, setInterval<\/code>) s\u0131kl\u0131kla kar\u015f\u0131m\u0131za \u00e7\u0131kar. Bu t\u00fcr senaryolarda this<\/code>'i do\u011fru objeye ba\u011flamak i\u00e7in a\u00e7\u0131k ba\u011flama y\u00f6ntemlerine veya ok fonksiyonlar\u0131na ba\u015fvurmak gerekebilir. Dolayl\u0131 ba\u011flama, kodunuzun objelerle etkile\u015fimini basitle\u015ftirse de, ba\u011flam kayb\u0131 riskini her zaman g\u00f6z \u00f6n\u00fcnde bulundurmak \u00f6nemlidir. Bu bilinci geli\u015ftirmek, daha hatas\u0131z ve sa\u011flam JavaScript kodu yazman\u0131z i\u00e7in size yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n this<\/code> \u00dczerinde Tam Kontrol: A\u00e7\u0131k Ba\u011flama ve Yeni Ba\u011flama<\/h2>\nthis<\/code>'in varsay\u0131lan ve dolayl\u0131 ba\u011flama kurallar\u0131 \u00e7o\u011fu zaman i\u015fimizi g\u00f6rse de, bazen this<\/code>'in hangi objeye referans edece\u011fini a\u00e7\u0131k\u00e7a belirtmek isteriz. \u0130\u015fte bu noktada A\u00e7\u0131k Ba\u011flama (Explicit Binding)<\/strong> ve Yeni Ba\u011flama (New Binding)<\/strong> devreye girer. Bu y\u00f6ntemler, this<\/code>'in davran\u0131\u015f\u0131n\u0131 manuel olarak kontrol etmemizi sa\u011flayarak, kodumuza daha fazla \u00f6ng\u00f6r\u00fclebilirlik ve esneklik katarlar. \u00d6zellikle karma\u015f\u0131k uygulamalarda, callback'ler, olay dinleyicileri veya constructor fonksiyonlar\u0131 gibi durumlarda this<\/code>'in do\u011fru objeye i\u015faret etmesini sa\u011flamak i\u00e7in bu ba\u011flama t\u00fcrlerini kullan\u0131r\u0131z. Bu b\u00f6l\u00fcmde, JavaScript'in bize sundu\u011fu bu g\u00fc\u00e7l\u00fc ara\u00e7lar\u0131, yani call()<\/code>, apply()<\/code>, bind()<\/code> metotlar\u0131n\u0131 ve new<\/code> anahtar kelimesini detayl\u0131ca inceleyecek ve ger\u00e7ek d\u00fcnya senaryolar\u0131nda nas\u0131l kullan\u0131ld\u0131klar\u0131n\u0131 vaka analizleriyle g\u00f6sterece\u011fiz. Bu sayede, this<\/code> \u00fczerindeki kontrol\u00fcn\u00fcz\u00fc maksimum seviyeye \u00e7\u0131karacaks\u0131n\u0131z.<\/p>\n call()<\/code>, apply()<\/code> ve bind()<\/code> ile A\u00e7\u0131k Ba\u011flama<\/h3>\nJavaScript, bir fonksiyona \u00f6zel bir this<\/code> de\u011feri ataman\u0131n \u00fc\u00e7 farkl\u0131 yolunu sunar: call()<\/code>, apply()<\/code> ve bind()<\/code>. Bu metotlar, fonksiyon objelerinin prototiplerinde yer al\u0131r ve fonksiyonlar\u0131n nas\u0131l \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na bak\u0131lmaks\u0131z\u0131n this<\/code>'i belirli bir objeye ba\u011flamam\u0131z\u0131 sa\u011flarlar. Aralar\u0131ndaki temel fark, fonksiyon arg\u00fcmanlar\u0131n\u0131n nas\u0131l ge\u00e7irildi\u011fidir. call()<\/code> ve apply()<\/code> fonksiyonu hemen \u00e7al\u0131\u015ft\u0131r\u0131rken, bind()<\/code> bir fonksiyonun kopyas\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr ve bu kopyan\u0131n this<\/code> de\u011feri kal\u0131c\u0131 olarak belirlenmi\u015f olur.<\/p>\n \n Uzman \u0130pucu: call()<\/code> ve apply()<\/code> aras\u0131ndaki fark\u0131 hat\u0131rlaman\u0131n kolay bir yolu: C<\/code>all (virg\u00fclle ayr\u0131lm\u0131\u015f arg\u00fcmanlar), A<\/code>pply (A<\/code>rray olarak arg\u00fcmanlar).\n <\/div>\n\ncall(thisArg, arg1, arg2, ...)<\/code>:<\/strong> Fonksiyonu belirtilen this<\/code> de\u011feriyle ve virg\u00fclle ayr\u0131lm\u0131\u015f arg\u00fcmanlarla hemen \u00e7al\u0131\u015ft\u0131r\u0131r.<\/li>\n apply(thisArg, [argsArray])<\/code>:<\/strong> Fonksiyonu belirtilen this<\/code> de\u011feriyle ve bir dizi (array) i\u00e7indeki arg\u00fcmanlarla hemen \u00e7al\u0131\u015ft\u0131r\u0131r.<\/li>\n bind(thisArg, arg1, arg2, ...)<\/code>:<\/strong> Fonksiyonun belirtilen this<\/code> de\u011ferine sahip, ancak hen\u00fcz \u00e7al\u0131\u015ft\u0131r\u0131lmam\u0131\u015f yeni bir kopyas\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr. Bu yeni fonksiyon daha sonra manuel olarak \u00e7a\u011fr\u0131labilir.<\/li>\n<\/ul>\n\n function selamVer(mesaj, zaman) {\n console.log(${mesaj} ${this.ad}! Saat ${zaman}.<\/code>);\n }\n\n const kisi = { ad: \"Ay\u015fe\" };\n\n \/\/ call() ile a\u00e7\u0131k ba\u011flama\n selamVer.call(kisi, \"Merhaba\", \"10:00\"); \/\/ Merhaba Ay\u015fe! Saat 10:00.\n\n \/\/ apply() ile a\u00e7\u0131k ba\u011flama\n selamVer.apply(kisi, [\"Selam\", \"14:30\"]); \/\/ Selam Ay\u015fe! Saat 14:30.\n\n \/\/ bind() ile kal\u0131c\u0131 ba\u011flama\n const ayseyeSelamVer = selamVer.bind(kisi, \"Nas\u0131ls\u0131n\");\n ayseyeSelamVer(\"18:00\"); \/\/ Nas\u0131ls\u0131n Ay\u015fe! Saat 18:00. (\u0130lk arg\u00fcman bind'dan geldi, ikincisi \u00e7a\u011fr\u0131dan)\n <\/pre>\n<\/code><\/p>\n Vaka Analizi: Bir Form Do\u011frulama Arac\u0131<\/strong><\/p>\n Bir web uygulamas\u0131nda birden fazla formunuz oldu\u011funu ve her bir formdaki input alanlar\u0131n\u0131 do\u011frulamak istedi\u011finizi d\u00fc\u015f\u00fcn\u00fcn. Her formun kendi i\u00e7inde bir do\u011frulama metoduna sahip olmak yerine, tek bir genel do\u011frulama fonksiyonu yaz\u0131p bunu farkl\u0131 form objeleriyle kullanabiliriz. Bu, call()<\/code> veya apply()<\/code> i\u00e7in m\u00fckemmel bir senaryodur.<\/p>\n \n const validator = {\n hataMesajlari: [],\n bosAlanKontrol: function(input) {\n if (input.value.trim() === '') {\n this.hataMesajlari.push(${input.name} alan\u0131 bo\u015f b\u0131rak\u0131lamaz.<\/code>);\n return false;\n }\n return true;\n },\n emailKontrol: function(input) {\n const regex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n if (!regex.test(input.value)) {\n this.hataMesajlari.push(${input.name} i\u00e7in ge\u00e7erli bir e-posta adresi girin.<\/code>);\n return false;\n }\n return true;\n },\n formuDogrula: function(formElement) {\n this.hataMesajlari = []; \/\/ Her do\u011frulama \u00f6ncesi hatalar\u0131 s\u0131f\u0131rla\n let isValid = true;\n const inputs = formElement.querySelectorAll('input');\n\n inputs.forEach(input => {\n if (input.dataset.validation === 'required') {\n if (!this.bosAlanKontrol(input)) isValid = false;\n }\n if (input.dataset.validation === 'email') {\n if (!this.emailKontrol(input)) isValid = false;\n }\n });\n\n return isValid;\n }\n };\n\n const loginForm = {\n element: document.createElement('form'), \/\/ Ger\u00e7ekte DOM'dan al\u0131n\u0131r\n init: function() {\n this.element.innerHTML = \n \n