{"id":39495,"date":"2026-02-22T17:40:43","date_gmt":"2026-02-22T14:40:43","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=39495"},"modified":"2026-02-22T17:40:43","modified_gmt":"2026-02-22T14:40:43","slug":"javascriptte-this-bind-call-ve-apply-metotlarini-anlamak","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-bind-call-ve-apply-metotlarini-anlamak\/","title":{"rendered":"JavaScript&#8217;te &#8216;this&#8217;, &#8216;bind&#8217;, &#8216;call&#8217; ve &#8216;apply&#8217; Metotlar\u0131n\u0131 Anlamak"},"content":{"rendered":"<p><body><\/p>\n<h2>JavaScript&#8217;te &#8216;this&#8217;, &#8216;bind&#8217;, &#8216;call&#8217; ve &#8216;apply&#8217; Metotlar\u0131n\u0131 Anlamak<\/h2>\n<p>JavaScript, dinamik ve esnek yap\u0131s\u0131yla web geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir. Bu esnekli\u011fin getirdi\u011fi baz\u0131 kavramlar, \u00f6zellikle yeni ba\u015flayanlar i\u00e7in kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir. Bu kavramlar\u0131n ba\u015f\u0131nda ise <code>this<\/code> anahtar kelimesi ve onunla yak\u0131ndan ili\u015fkili olan <code>bind<\/code>, <code>call<\/code> ve <code>apply<\/code> metotlar\u0131 gelir. Bu makalede, JavaScript&#8217;in derinliklerine inerek <code>this<\/code>&#8216;in ne anlama geldi\u011fini, farkl\u0131 ba\u011flamlarda nas\u0131l davrand\u0131\u011f\u0131n\u0131 ve <code>bind<\/code>, <code>call<\/code>, <code>apply<\/code> metotlar\u0131n\u0131n bu <code>this<\/code> davran\u0131\u015f\u0131n\u0131 nas\u0131l manip\u00fcle etmemize olanak sa\u011flad\u0131\u011f\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Bu mekanizmalar\u0131 anlamak, daha sa\u011flam, tahmin edilebilir ve hatas\u0131z JavaScript kodlar\u0131 yazman\u0131n anahtar\u0131d\u0131r.<\/p>\n<h3>&#8216;this&#8217; Anahtar Kelimesi Nedir?<\/h3>\n<p>JavaScript&#8217;teki <code>this<\/code> anahtar kelimesi, di\u011fer dillerdeki benzer kavramlardan farkl\u0131 olarak, bir fonksiyonun \u00e7a\u011fr\u0131lma \u015fekline ve ba\u011flam\u0131na g\u00f6re de\u011ferini dinamik olarak de\u011fi\u015ftiren \u00f6zel bir referanst\u0131r. <code>this<\/code>, o anki kodun &#8220;sahibine&#8221; veya &#8220;y\u00fcr\u00fct\u00fcld\u00fc\u011f\u00fc ba\u011flama&#8221; i\u015faret eder. Bu dinamik do\u011fa, geli\u015ftiriciler i\u00e7in hem g\u00fc\u00e7l\u00fc bir ara\u00e7 hem de potansiyel bir hata kayna\u011f\u0131 olabilir. <code>this<\/code>&#8216;in neye i\u015faret etti\u011fini anlamak, \u00f6zellikle nesne y\u00f6nelimli programlama (OOP) paradigmas\u0131n\u0131 JavaScript&#8217;te uygularken veya callback fonksiyonlarla \u00e7al\u0131\u015f\u0131rken hayati \u00f6nem ta\u015f\u0131r.<\/p>\n<h3>&#8216;this&#8217;in Farkl\u0131 Ba\u011flamlar\u0131<\/h3>\n<p><code>this<\/code>&#8216;in de\u011feri, kodun nerede ve nas\u0131l y\u00fcr\u00fct\u00fcld\u00fc\u011f\u00fcne ba\u011fl\u0131 olarak de\u011fi\u015fir. \u0130\u015fte <code>this<\/code>&#8216;in yayg\u0131n olarak kar\u015f\u0131la\u015f\u0131lan farkl\u0131 ba\u011flamlar\u0131:<\/p>\n<h4>Global Ba\u011flam<\/h4>\n<p>Herhangi bir fonksiyon veya objenin d\u0131\u015f\u0131nda, global kapsamda <code>this<\/code> kullan\u0131ld\u0131\u011f\u0131nda, taray\u0131c\u0131 ortam\u0131nda <code>window<\/code> objesine, Node.js ortam\u0131nda ise <code>global<\/code> objesine i\u015faret eder.<\/p>\n<pre><code class=\"language-javascript\">console.log(this === window); \/\/ Taray\u0131c\u0131da: true\nconsole.log(this); \/\/ Taray\u0131c\u0131da: Window objesi<\/code><\/pre>\n<p>S\u0131k\u0131 modda (strict mode) bile global ba\u011flamdaki <code>this<\/code> de\u011fi\u015fmez.<\/p>\n<h4>Fonksiyon Ba\u011flam\u0131 (Basit Fonksiyon \u00c7a\u011fr\u0131s\u0131)<\/h4>\n<p>Bir fonksiyon basit\u00e7e \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda (bir obje metodu olarak de\u011fil), <code>this<\/code>&#8216;in de\u011feri s\u0131k\u0131 modda (<code>'use strict';<\/code>) <code>undefined<\/code> olurken, s\u0131k\u0131 olmayan modda (<code>window<\/code> veya <code>global<\/code> objesi) olacakt\u0131r. Bu, <code>this<\/code> ile ilgili en yayg\u0131n kafa kar\u0131\u015f\u0131kl\u0131klar\u0131ndan biridir.<\/p>\n<pre><code class=\"language-javascript\">function myFunction() {\n    console.log(this);\n}\n\nmyFunction(); \/\/ S\u0131k\u0131 olmayan modda: Window objesi (taray\u0131c\u0131da)\n              \/\/ S\u0131k\u0131 modda: undefined\n\n\/\/ S\u0131k\u0131 mod \u00f6rne\u011fi\n(function() {\n    'use strict';\n    function strictFunction() {\n        console.log(this);\n    }\n    strictFunction(); \/\/ undefined\n})();<\/code><\/pre>\n<h4>Metot Ba\u011flam\u0131<\/h4>\n<p>Bir fonksiyon, bir objenin metodu olarak \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, <code>this<\/code> o metodu i\u00e7eren objeye i\u015faret eder. Bu, nesne y\u00f6nelimli programlamada beklenen davran\u0131\u015ft\u0131r.<\/p>\n<pre><code class=\"language-javascript\">const user = {\n    name: 'Alice',\n    greet: function() {\n        console.log(<code>Merhaba, benim ad\u0131m ${this.name}<\/code>);\n    }\n};\n\nuser.greet(); \/\/ Merhaba, benim ad\u0131m Alice (this, user objesidir)\n\nconst anotherUser = {\n    name: 'Bob',\n    greet: user.greet \/\/ user objesindeki greet metodunu \u00f6d\u00fcn\u00e7 al\u0131yoruz\n};\n\nanotherUser.greet(); \/\/ Merhaba, benim ad\u0131m Bob (this, anotherUser objesidir)<\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>greet<\/code> metodunun hangi obje \u00fczerinden \u00e7a\u011fr\u0131ld\u0131\u011f\u0131na ba\u011fl\u0131 olarak <code>this.name<\/code> de\u011feri de\u011fi\u015fmektedir.<\/p>\n<h4>Kurucu Fonksiyon (Constructor) Ba\u011flam\u0131<\/h4>\n<p>Bir fonksiyon <code>new<\/code> anahtar kelimesi ile \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda (yani bir kurucu fonksiyon olarak), <code>this<\/code> yeni olu\u015fturulan bo\u015f objeye i\u015faret eder. Bu obje, fonksiyonun i\u00e7inde \u00f6zelliklerle doldurulur ve fonksiyonun sonunda otomatik olarak d\u00f6nd\u00fcr\u00fcl\u00fcr.<\/p>\n<pre><code class=\"language-javascript\">function Person(name, age) {\n    this.name = name;\n    this.age = age;\n    this.introduce = function() {\n        console.log(<code>Benim ad\u0131m ${this.name} ve ${this.age} ya\u015f\u0131nday\u0131m.<\/code>);\n    };\n}\n\nconst person1 = new Person('Can', 30);\nperson1.introduce(); \/\/ Benim ad\u0131m Can ve 30 ya\u015f\u0131nday\u0131m. (this, person1 objesidir)<\/code><\/pre>\n<h4>A\u00e7\u0131l\u0131 Fonksiyonlar (Arrow Functions)<\/h4>\n<p>ES6 ile gelen a\u00e7\u0131l\u0131 fonksiyonlar, <code>this<\/code> ba\u011flam\u0131n\u0131 ele al\u0131\u015f bi\u00e7imleriyle devrim niteli\u011findedir. A\u00e7\u0131l\u0131 fonksiyonlar\u0131n kendi <code>this<\/code> ba\u011flamlar\u0131 yoktur. Bunun yerine, <code>this<\/code> de\u011ferini tan\u0131mland\u0131klar\u0131 yerdeki (lexical context) \u00e7evreleyen ba\u011flamdan al\u0131rlar. Bu, \u00f6zellikle callback fonksiyonlar\u0131nda <code>this<\/code> y\u00f6netimi sorununu b\u00fcy\u00fck \u00f6l\u00e7\u00fcde basitle\u015ftirir.<\/p>\n<pre><code class=\"language-javascript\">const person = {\n    name: 'Deniz',\n    sayHello: function() {\n        \/\/ 'this' burada 'person' objesidir\n        setTimeout(function() {\n            \/\/ Bu normal bir fonksiyondur, bu y\u00fczden 'this' burada Window\/global veya undefined (s\u0131k\u0131 modda) olur.\n            console.log(<code>Normal fonksiyon: Merhaba, ${this.name}<\/code>);\n        }, 1000);\n\n        setTimeout(() => {\n            \/\/ Bu bir a\u00e7\u0131l\u0131 fonksiyondur, 'this' de\u011ferini \u00e7evreleyen 'sayHello' metodundan al\u0131r, yani 'person' objesidir.\n            console.log(<code>A\u00e7\u0131l\u0131 fonksiyon: Merhaba, ${this.name}<\/code>);\n        }, 1000);\n    }\n};\n\nperson.sayHello();\n\/\/ \u00c7\u0131kt\u0131 (s\u0131k\u0131 olmayan modda):\n\/\/ Normal fonksiyon: Merhaba,\n\/\/ A\u00e7\u0131l\u0131 fonksiyon: Merhaba, Deniz<\/code><\/pre>\n<p>G\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, a\u00e7\u0131l\u0131 fonksiyonlar <code>this<\/code> ba\u011flam\u0131n\u0131 otomatik olarak &#8220;do\u011fru&#8221; yere sabitleyerek, <code>bind<\/code> gibi metotlara olan ihtiyac\u0131 bir\u00e7ok senaryoda ortadan kald\u0131r\u0131r.<\/p>\n<h4>Olay \u0130\u015fleyiciler (Event Handlers)<\/h4>\n<p>DOM olay i\u015fleyicilerinde, <code>this<\/code> genellikle olay\u0131 tetikleyen DOM elementine i\u015faret eder.<\/p>\n<pre><code class=\"language-javascript\">\/\/ HTML'de <button id=\"myButton\">T\u0131kla<\/button> oldu\u011funu varsayal\u0131m\nconst button = document.getElementById('myButton');\n\nbutton.addEventListener('click', function() {\n    console.log(this); \/\/ Olay\u0131 tetikleyen button elementidir\n    this.textContent = 'T\u0131kland\u0131!';\n});<\/code><\/pre>\n<h3>S\u0131k\u0131 Mod (Strict Mode) ve &#8216;this&#8217;<\/h3>\n<p>JavaScript&#8217;te s\u0131k\u0131 mod (<code>'use strict';<\/code>), kodun belirli kurallara uymas\u0131n\u0131 sa\u011flayarak baz\u0131 sessiz hatalar\u0131 a\u00e7\u0131k\u00e7a ortaya \u00e7\u0131kar\u0131r ve g\u00fcvenli olmayan davran\u0131\u015flar\u0131 engeller. <code>this<\/code> anahtar kelimesi \u00fczerindeki en \u00f6nemli etkisi \u015fudur:<\/p>\n<p>*   <strong>Basit Fonksiyon \u00c7a\u011fr\u0131lar\u0131nda:<\/strong> S\u0131k\u0131 modda, bir fonksiyon basit\u00e7e \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda (bir obje metodu olarak de\u011fil), <code>this<\/code> de\u011feri <code>undefined<\/code> olur. S\u0131k\u0131 olmayan modda ise <code>window<\/code> (taray\u0131c\u0131da) veya <code>global<\/code> (Node.js&#8217;te) objesine i\u015faret eder. Bu, s\u0131k\u0131 modun <code>this<\/code>&#8216;i varsay\u0131lan olarak global objeye ba\u011flamas\u0131n\u0131 engellemek i\u00e7in tasarlanm\u0131\u015ft\u0131r.<\/p>\n<p>Bu farkl\u0131l\u0131klar, <code>this<\/code>&#8216;in neden bu kadar karma\u015f\u0131k ve dikkat gerektiren bir konu oldu\u011funu a\u00e7\u0131k\u00e7a g\u00f6stermektedir. Ancak endi\u015felenmeyin, <code>bind<\/code>, <code>call<\/code> ve <code>apply<\/code> metotlar\u0131, bu dinamik <code>this<\/code> davran\u0131\u015f\u0131n\u0131 kontrol alt\u0131na almam\u0131z i\u00e7in bize g\u00fc\u00e7l\u00fc ara\u00e7lar sunar.<\/p>\n<h3>&#8216;call()&#8217; Metodu Nedir?<\/h3>\n<p><code>call()<\/code> metodu, bir fonksiyonu belirli bir <code>this<\/code> de\u011feriyle ve arg\u00fcmanlar\u0131 ayr\u0131 ayr\u0131 (virg\u00fclle ayr\u0131lm\u0131\u015f) sa\u011flayarak \u00e7a\u011f\u0131rmak i\u00e7in kullan\u0131l\u0131r. Fonksiyonu an\u0131nda y\u00fcr\u00fct\u00fcr.<\/p>\n<h4>S\u00f6zdizimi ve Kullan\u0131m\u0131<\/h4>\n<p><code>call()<\/code> metodunun s\u00f6zdizimi \u015f\u00f6yledir:<\/p>\n<pre><code class=\"language-javascript\">func.call(thisArg, arg1, arg2, ...);<\/code><\/pre>\n<p>*   <code>thisArg<\/code>: Fonksiyonun i\u00e7inde <code>this<\/code> olarak kullan\u0131lacak objedir. <code>null<\/code> veya <code>undefined<\/code> ge\u00e7ilirse, <code>this<\/code> global objeye (s\u0131k\u0131 olmayan modda) veya <code>undefined<\/code>&#8216;a (s\u0131k\u0131 modda) ba\u011flan\u0131r.<br \/>\n*   <code>arg1, arg2, ...<\/code>: Fonksiyona iletilecek arg\u00fcmanlard\u0131r.<\/p>\n<p><strong>\u00d6rnek 1: Basit <code>this<\/code> Ba\u011flama<\/strong><\/p>\n<pre><code class=\"language-javascript\">function greet() {\n    console.log(<code>Merhaba, benim ad\u0131m ${this.name}.<\/code>);\n}\n\nconst person = { name: 'Ay\u015fe' };\nconst animal = { name: 'Fido' };\n\ngreet.call(person); \/\/ Merhaba, benim ad\u0131m Ay\u015fe.\ngreet.call(animal); \/\/ Merhaba, benim ad\u0131m Fido.<\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>greet<\/code> fonksiyonu do\u011frudan bir objeye ait olmamas\u0131na ra\u011fmen, <code>call()<\/code> kullanarak <code>this<\/code> de\u011ferini <code>person<\/code> veya <code>animal<\/code> objesine ba\u011flayabiliyoruz.<\/p>\n<p><strong>\u00d6rnek 2: Arg\u00fcmanlarla Kullan\u0131m<\/strong><\/p>\n<pre><code class=\"language-javascript\">function introduce(city, job) {\n    console.log(<code>Benim ad\u0131m ${this.name}, ${city}'de ya\u015f\u0131yorum ve bir ${job}'im.<\/code>);\n}\n\nconst user = { name: 'Mehmet' };\n\nintroduce.call(user, 'Ankara', 'm\u00fchendis'); \/\/ Benim ad\u0131m Mehmet, Ankara'da ya\u015f\u0131yorum ve bir m\u00fchendis'im.<\/code><\/pre>\n<p><code>call()<\/code> metodu, <code>introduce<\/code> fonksiyonunu <code>user<\/code> objesini <code>this<\/code> olarak kullanarak ve <code>city<\/code> ile <code>job<\/code> arg\u00fcmanlar\u0131n\u0131 ayr\u0131 ayr\u0131 ileterek \u00e7a\u011f\u0131r\u0131r.<\/p>\n<p><strong>\u00d6rnek 3: Metot \u00d6d\u00fcn\u00e7 Alma (Method Borrowing)<\/strong><\/p>\n<p><code>call()<\/code>&#8216;un g\u00fc\u00e7l\u00fc kullan\u0131m alanlar\u0131ndan biri, bir objenin metodunu ba\u015fka bir objeye \u00f6d\u00fcn\u00e7 vermektir.<\/p>\n<pre><code class=\"language-javascript\">const car = {\n    brand: 'Toyota',\n    getBrand: function() {\n        return this.brand;\n    }\n};\n\nconst anotherCar = {\n    brand: 'Honda'\n};\n\nconsole.log(car.getBrand.call(anotherCar)); \/\/ Honda<\/code><\/pre>\n<p>Burada <code>car<\/code> objesinin <code>getBrand<\/code> metodunu <code>anotherCar<\/code> objesi i\u00e7in <code>this<\/code> ba\u011flam\u0131yla \u00e7a\u011f\u0131rarak <code>anotherCar<\/code>&#8216;\u0131n <code>brand<\/code> \u00f6zelli\u011fine eri\u015fiyoruz.<\/p>\n<h4>Avantajlar\u0131 ve Kullan\u0131m Alanlar\u0131<\/h4>\n<p>*   <strong>An\u0131nda \u00c7a\u011f\u0131rma:<\/strong> Fonksiyonu hemen y\u00fcr\u00fctmek istedi\u011finizde idealdir.<br \/>\n*   <strong>A\u00e7\u0131k <code>this<\/code> Ba\u011flama:<\/strong> <code>this<\/code> de\u011ferini kesin olarak kontrol etmek istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r.<br \/>\n*   <strong>Metot \u00d6d\u00fcn\u00e7 Alma:<\/strong> Bir objenin metodunu, o metodun as\u0131l objesi yerine ba\u015fka bir objenin ba\u011flam\u0131nda kullanmak i\u00e7in m\u00fckemmeldir. Bu, \u00f6zellikle farkl\u0131 objeler aras\u0131nda benzer i\u015flevselli\u011fi payla\u015fmak istedi\u011finizde DRY (Don&#8217;t Repeat Yourself) prensibini uygulaman\u0131za yard\u0131mc\u0131 olur.<\/p>\n<h3>&#8216;apply()&#8217; Metodu Nedir?<\/h3>\n<p><code>apply()<\/code> metodu, <code>call()<\/code> metoduna \u00e7ok benzer. Temel fark\u0131, fonksiyona iletilecek arg\u00fcmanlar\u0131 ayr\u0131 ayr\u0131 de\u011fil, bir dizi (veya dizi benzeri bir obje) olarak almas\u0131d\u0131r. <code>apply()<\/code> da fonksiyonu an\u0131nda y\u00fcr\u00fct\u00fcr.<\/p>\n<h4>S\u00f6zdizimi ve Kullan\u0131m\u0131<\/h4>\n<p><code>apply()<\/code> metodunun s\u00f6zdizimi \u015f\u00f6yledir:<\/p>\n<pre><code class=\"language-javascript\">func.apply(thisArg, [argsArray]);<\/code><\/pre>\n<p>*   <code>thisArg<\/code>: Fonksiyonun i\u00e7inde <code>this<\/code> olarak kullan\u0131lacak objedir.<br \/>\n*   <code>argsArray<\/code>: Fonksiyona iletilecek arg\u00fcmanlar\u0131 i\u00e7eren bir dizidir (veya dizi benzeri bir objedir).<\/p>\n<p><strong>\u00d6rnek 1: Basit <code>this<\/code> Ba\u011flama ve Dizi Arg\u00fcmanlar\u0131<\/strong><\/p>\n<pre><code class=\"language-javascript\">function greet(greeting, punctuation) {\n    console.log(<code>${greeting}, benim ad\u0131m ${this.name}${punctuation}<\/code>);\n}\n\nconst person = { name: 'Zeynep' };\nconst args = ['Merhaba', '!'];\n\ngreet.apply(person, args); \/\/ Merhaba, benim ad\u0131m Zeynep!<\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>greet<\/code> fonksiyonunu <code>person<\/code> objesini <code>this<\/code> olarak kullanarak ve arg\u00fcmanlar\u0131 bir dizi olarak ileterek \u00e7a\u011f\u0131r\u0131yoruz.<\/p>\n<p><strong>\u00d6rnek 2: Dinamik Arg\u00fcman Listeleri<\/strong><\/p>\n<p><code>apply()<\/code>&#8216;\u0131n en g\u00fc\u00e7l\u00fc kullan\u0131m alanlar\u0131ndan biri, bir fonksiyona ka\u00e7 arg\u00fcman iletilece\u011fini \u00f6nceden bilmedi\u011finiz durumlard\u0131r.<\/p>\n<pre><code class=\"language-javascript\">function sum(a, b, c) {\n    return a + b + c;\n}\n\nconst numbers = [10, 20, 30];\n\n\/\/ call ile: sum.call(null, numbers[0], numbers[1], numbers[2]); - \u00e7ok pratik de\u011fil\nconsole.log(sum.apply(null, numbers)); \/\/ 60\n\/\/ null veya undefined kullanabiliriz \u00e7\u00fcnk\u00fc sum fonksiyonunun i\u00e7inde this kullan\u0131lm\u0131yor.<\/code><\/pre>\n<p>Bu kullan\u0131m, \u00f6zellikle bir fonksiyona bir dizi arg\u00fcman\u0131 ge\u00e7irmek gerekti\u011finde \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<p><strong>\u00d6rnek 3: <code>Math<\/code> Metotlar\u0131 ile Kullan\u0131m<\/strong><\/p>\n<p><code>Math.max<\/code> ve <code>Math.min<\/code> gibi metotlar normalde ayr\u0131 ayr\u0131 arg\u00fcmanlar bekler (<code>Math.max(1, 5, 2)<\/code>). Ancak bir dizideki en b\u00fcy\u00fck veya en k\u00fc\u00e7\u00fck de\u011feri bulmak i\u00e7in <code>apply()<\/code> kullan\u0131labilir.<\/p>\n<pre><code class=\"language-javascript\">const numbersArray = [5, 12, 3, 8, 15];\n\nconst maxNumber = Math.max.apply(null, numbersArray);\nconsole.log(maxNumber); \/\/ 15\n\nconst minNumber = Math.min.apply(null, numbersArray);\nconsole.log(minNumber); \/\/ 3<\/code><\/pre>\n<p>Burada <code>null<\/code> veya <code>undefined<\/code> kullanabiliriz \u00e7\u00fcnk\u00fc <code>Math.max<\/code> ve <code>Math.min<\/code> metotlar\u0131 kendi i\u00e7lerinde <code>this<\/code> de\u011ferini kullanmazlar.<\/p>\n<h4>&#8216;call()&#8217; ve &#8216;apply()&#8217; Aras\u0131ndaki Farklar<\/h4>\n<p>*   <strong>Arg\u00fcman Ge\u00e7irme:<\/strong> Tek ve en \u00f6nemli fark, <code>call()<\/code>&#8216;un arg\u00fcmanlar\u0131 virg\u00fclle ayr\u0131lm\u0131\u015f bir liste olarak almas\u0131, <code>apply()<\/code>&#8216;\u0131n ise bir dizi olarak almas\u0131d\u0131r.<br \/>\n*   <strong>Ne Zaman Hangisini Kullanmal\u0131:<\/strong><br \/>\n    *   Arg\u00fcmanlar\u0131 \u00f6nceden biliyorsan\u0131z ve say\u0131lar\u0131 azsa <code>call()<\/code> daha okunabilir olabilir.<br \/>\n    *   Arg\u00fcmanlar\u0131 bir dizi olarak zaten elinizde tutuyorsan\u0131z veya dinamik say\u0131da arg\u00fcman iletecekseniz <code>apply()<\/code> daha uygundur.<\/p>\n<p>Pratikte, modern JavaScript&#8217;te spread operat\u00f6r\u00fc (<code>...<\/code>) sayesinde <code>call()<\/code> ve <code>apply()<\/code> aras\u0131ndaki bu fark genellikle daha az \u00f6nemlidir hale gelmi\u015ftir:<\/p>\n<pre><code class=\"language-javascript\">\/\/ apply ile ayn\u0131 i\u015flevi spread operat\u00f6r\u00fc ile call kullanarak yapabiliriz\nconsole.log(sum.call(null, ...numbers)); \/\/ 60<\/code><\/pre>\n<p>Yine de, <code>apply()<\/code> hala belirli durumlarda (\u00f6zellikle eski kod tabanlar\u0131nda veya belirli k\u00fct\u00fcphanelerde) yayg\u0131n olarak kullan\u0131lmaktad\u0131r.<\/p>\n<h3>&#8216;bind()&#8217; Metodu Nedir?<\/h3>\n<p><code>bind()<\/code> metodu, <code>call()<\/code> ve <code>apply()<\/code>&#8216;dan temel bir farkla ayr\u0131l\u0131r: Fonksiyonu hemen \u00e7a\u011f\u0131rmaz. Bunun yerine, <code>this<\/code> de\u011feri kal\u0131c\u0131 olarak belirtilen de\u011fere ba\u011fl\u0131 olan <em>yeni bir fonksiyon<\/em> d\u00f6nd\u00fcr\u00fcr. Bu yeni fonksiyon daha sonra herhangi bir zamanda \u00e7a\u011fr\u0131labilir.<\/p>\n<h4>S\u00f6zdizimi ve Kullan\u0131m\u0131<\/h4>\n<p><code>bind()<\/code> metodunun s\u00f6zdizimi \u015f\u00f6yledir:<\/p>\n<pre><code class=\"language-javascript\">func.bind(thisArg, arg1, arg2, ...);<\/code><\/pre>\n<p>*   <code>thisArg<\/code>: Yeni fonksiyonun i\u00e7inde <code>this<\/code> olarak kullan\u0131lacak objedir.<br \/>\n*   <code>arg1, arg2, ...<\/code>: Yeni fonksiyona \u00f6nden ba\u011flanacak (partial application) arg\u00fcmanlard\u0131r. Bu arg\u00fcmanlar, yeni fonksiyon \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda iletilen arg\u00fcmanlar\u0131n \u00f6n\u00fcne eklenir.<\/p>\n<p><strong>\u00d6rnek 1: <code>this<\/code> De\u011ferini Kal\u0131c\u0131 Olarak Ba\u011flama<\/strong><\/p>\n<pre><code class=\"language-javascript\">const person = {\n    name: 'Cem',\n    greet: function() {\n        console.log(<code>Merhaba, benim ad\u0131m ${this.name}.<\/code>);\n    }\n};\n\nconst unboundGreet = person.greet;\nunboundGreet(); \/\/ Merhaba, benim ad\u0131m undefined. (this, Window\/global veya undefined)\n\nconst boundGreet = person.greet.bind(person);\nboundGreet(); \/\/ Merhaba, benim ad\u0131m Cem.<\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>person.greet<\/code> metodunu <code>unboundGreet<\/code>&#8216;e atad\u0131\u011f\u0131m\u0131zda, <code>this<\/code> ba\u011flam\u0131 kaybolur ve <code>undefined<\/code> olur. Ancak <code>bind(person)<\/code> ile yeni bir <code>boundGreet<\/code> fonksiyonu olu\u015fturdu\u011fumuzda, bu fonksiyonun <code>this<\/code> de\u011feri kal\u0131c\u0131 olarak <code>person<\/code> objesine ba\u011flan\u0131r, ne \u015fekilde \u00e7a\u011fr\u0131l\u0131rsa \u00e7a\u011fr\u0131ls\u0131n <code>this<\/code> hep <code>person<\/code> objesi olur.<\/p>\n<p><strong>\u00d6rnek 2: Olay \u0130\u015fleyicilerinde Kullan\u0131m<\/strong><\/p>\n<p><code>bind()<\/code>&#8216;\u0131n en yayg\u0131n kullan\u0131m alanlar\u0131ndan biri, olay i\u015fleyicilerinde veya callback fonksiyonlar\u0131nda <code>this<\/code> ba\u011flam\u0131n\u0131 korumakt\u0131r.<\/p>\n<pre><code class=\"language-javascript\">class MyComponent {\n    constructor() {\n        this.value = 10;\n        this.button = document.getElementById('myButton');\n        \/\/ this.handleClick = this.handleClick.bind(this); \/\/ Y\u00f6ntem 1: Constructor'da bind\n        this.button.addEventListener('click', this.handleClick); \/\/ 'this' burada button elementidir\n    }\n\n    handleClick() {\n        console.log(this.value); \/\/ undefined, \u00e7\u00fcnk\u00fc 'this' button elementidir\n    }\n}\n\n\/\/ Do\u011fru kullan\u0131m:\nclass MyComponentCorrect {\n    constructor() {\n        this.value = 10;\n        this.button = document.getElementById('myButton');\n        this.handleClick = this.handleClick.bind(this); \/\/ 'this'i kal\u0131c\u0131 olarak ba\u011fla\n        this.button.addEventListener('click', this.handleClick);\n    }\n\n    handleClick() {\n        console.log(this.value); \/\/ 10\n    }\n}\n\n\/\/ Alternatif (ES6+): A\u00e7\u0131l\u0131 fonksiyon kullanmak\nclass MyComponentArrow {\n    constructor() {\n        this.value = 10;\n        this.button = document.getElementById('myButton');\n        this.button.addEventListener('click', this.handleClickArrow);\n    }\n\n    handleClickArrow = () => { \/\/ A\u00e7\u0131l\u0131 fonksiyon metodu\n        console.log(this.value); \/\/ 10 (lexical this)\n    }\n}\n\n\/\/ new MyComponent(); \/\/ Hatal\u0131\n\/\/ new MyComponentCorrect(); \/\/ Do\u011fru\n\/\/ new MyComponentArrow(); \/\/ Modern ve do\u011fru<\/code><\/pre>\n<p><code>MyComponentCorrect<\/code> \u00f6rne\u011finde, <code>handleClick<\/code> metodunu <code>constructor<\/code> i\u00e7inde <code>this<\/code>&#8216;e ba\u011fl\u0131yoruz. Bu sayede, <code>addEventListener<\/code> taraf\u0131ndan \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda bile <code>handleClick<\/code> i\u00e7indeki <code>this<\/code> de\u011feri <code>MyComponentCorrect<\/code> objesini g\u00f6sterir. <code>MyComponentArrow<\/code> ise ES6&#8217;n\u0131n a\u00e7\u0131l\u0131 fonksiyonlar\u0131n\u0131 kullanarak ayn\u0131 problemi daha zarif bir \u015fekilde \u00e7\u00f6zer.<\/p>\n<p><strong>\u00d6rnek 3: K\u0131smi Uygulama (Partial Application)<\/strong><\/p>\n<p><code>bind()<\/code> metodu ayr\u0131ca, bir fonksiyona baz\u0131 arg\u00fcmanlar\u0131 \u00f6nceden ba\u011flayarak yeni bir fonksiyon olu\u015fturmak i\u00e7in de kullan\u0131labilir. Buna &#8220;k\u0131smi uygulama&#8221; denir.<\/p>\n<pre><code class=\"language-javascript\">function multiply(a, b) {\n    return a * b;\n}\n\nconst double = multiply.bind(null, 2); \/\/ 'this' kullan\u0131lmad\u0131\u011f\u0131 i\u00e7in null, ilk arg\u00fcman 2'ye sabitlendi\nconst triple = multiply.bind(null, 3);\n\nconsole.log(double(5));  \/\/ 10 (2 * 5)\nconsole.log(triple(5));  \/\/ 15 (3 * 5)<\/code><\/pre>\n<p>Burada <code>multiply<\/code> fonksiyonunun ilk arg\u00fcman\u0131n\u0131 <code>bind<\/code> ile sabitleyerek <code>double<\/code> ve <code>triple<\/code> ad\u0131nda iki yeni fonksiyon olu\u015fturduk. Bu yeni fonksiyonlar sadece ikinci arg\u00fcman\u0131 bekler.<\/p>\n<h4>Avantajlar\u0131 ve Kullan\u0131m Alanlar\u0131<\/h4>\n<p>*   <strong>Kal\u0131c\u0131 <code>this<\/code> Ba\u011flama:<\/strong> <code>this<\/code> de\u011ferini bir kez ba\u011flay\u0131p, fonksiyonun ne \u015fekilde \u00e7a\u011fr\u0131l\u0131rsa \u00e7a\u011fr\u0131ls\u0131n o <code>this<\/code> de\u011ferini korumas\u0131n\u0131 sa\u011flamak istedi\u011finizde \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<br \/>\n*   <strong>Callback Fonksiyonlar\u0131:<\/strong> \u00d6zellikle callback olarak ge\u00e7ilen fonksiyonlar\u0131n <code>this<\/code> ba\u011flam\u0131n\u0131 korumak i\u00e7in vazge\u00e7ilmezdir (\u00f6rne\u011fin <code>setTimeout<\/code>, olay i\u015fleyicileri, Promise zincirleri).<br \/>\n*   <strong>K\u0131smi Uygulama:<\/strong> Bir fonksiyona belirli arg\u00fcmanlar\u0131 \u00f6nceden ba\u011flayarak daha \u00f6zelle\u015fmi\u015f fonksiyonlar olu\u015fturmak i\u00e7in idealdir.<\/p>\n<h4>&#8216;bind()&#8217; ve Di\u011ferleri Aras\u0131ndaki Temel Fark<\/h4>\n<p><code>call()<\/code> ve <code>apply()<\/code> fonksiyonu hemen \u00e7a\u011f\u0131r\u0131rken, <code>bind()<\/code> yeni bir fonksiyon d\u00f6nd\u00fcr\u00fcr ve bu fonksiyonun <code>this<\/code> ba\u011flam\u0131 kal\u0131c\u0131 olarak ayarlanm\u0131\u015f olur. <code>bind()<\/code> ile d\u00f6nen fonksiyon, daha sonra ihtiya\u00e7 duyuldu\u011funda \u00e7a\u011fr\u0131l\u0131r. Bu, <code>bind()<\/code>&#8216;\u0131 \u00f6zellikle olay i\u015fleyicileri ve callback&#8217;ler gibi asenkron veya gelecekteki \u00e7a\u011fr\u0131lar i\u00e7in uygun hale getirir.<\/p>\n<h3>Pratik Senaryolar ve En \u0130yi Uygulamalar<\/h3>\n<p><code>this<\/code>, <code>bind<\/code>, <code>call<\/code>, <code>apply<\/code> mekanizmalar\u0131n\u0131 anlamak, JavaScript&#8217;te daha yetkin olman\u0131n anahtar\u0131d\u0131r. \u0130\u015fte ne zaman neyi kullanman\u0131z gerekti\u011fine dair baz\u0131 rehberler ve modern yakla\u015f\u0131mlar:<\/p>\n<h4>Ne Zaman Neyi Kullanmal\u0131?<\/h4>\n<p>*   <strong><code>call()<\/code> veya <code>apply()<\/code>:<\/strong><br \/>\n    <em>   Bir fonksiyonu <\/em>hemen* belirli bir <code>this<\/code> de\u011feriyle \u00e7a\u011f\u0131rmak istedi\u011finizde.<br \/>\n    *   Arg\u00fcmanlar\u0131 ayr\u0131 ayr\u0131 ge\u00e7irecekseniz <code>call()<\/code>&#8216;\u0131 tercih edin.<br \/>\n    *   Arg\u00fcmanlar\u0131 bir dizi olarak ge\u00e7irecekseniz <code>apply()<\/code>&#8216;\u0131 tercih edin (veya modern JS&#8217;te <code>call()<\/code> ile spread operat\u00f6r\u00fcn\u00fc kullan\u0131n).<br \/>\n    *   Metot \u00f6d\u00fcn\u00e7 alma (method borrowing) senaryolar\u0131nda.<br \/>\n*   <strong><code>bind()<\/code>:<\/strong><br \/>\n    <em>   Bir fonksiyonu <\/em>gelecekte* belirli bir <code>this<\/code> de\u011feriyle \u00e7a\u011fr\u0131lmak \u00fczere haz\u0131rlaman\u0131z gerekti\u011finde.<br \/>\n    *   Callback fonksiyonlar\u0131nda veya olay i\u015fleyicilerinde <code>this<\/code> ba\u011flam\u0131n\u0131 korumak i\u00e7in.<br \/>\n    *   K\u0131smi uygulama (partial application) yaparak daha \u00f6zelle\u015fmi\u015f fonksiyonlar olu\u015fturmak i\u00e7in.<\/p>\n<h4>Modern JavaScript ve Alternatifler<\/h4>\n<p>ES6 ve sonraki s\u00fcr\u00fcmler, <code>this<\/code> y\u00f6netimini basitle\u015ftiren yeni \u00f6zellikler getirmi\u015ftir:<\/p>\n<p>*   <strong>A\u00e7\u0131l\u0131 Fonksiyonlar (<code>=><\/code>):<\/strong> Bir\u00e7ok durumda <code>bind()<\/code> kullanmaktan ka\u00e7\u0131nmak i\u00e7in a\u00e7\u0131l\u0131 fonksiyonlar\u0131 tercih edebilirsiniz. A\u00e7\u0131l\u0131 fonksiyonlar, \u00e7evreleyen (lexical) ba\u011flamdan <code>this<\/code> de\u011ferini otomatik olarak devrald\u0131klar\u0131 i\u00e7in, <code>this<\/code> ba\u011flama sorunlar\u0131n\u0131 ortadan kald\u0131r\u0131r. \u00d6zellikle React bile\u015fenlerinde veya di\u011fer UI k\u00fct\u00fcphanelerinde s\u0131n\u0131f metotlar\u0131n\u0131 olay i\u015fleyicilerine ba\u011flarken \u00e7ok kullan\u0131\u015fl\u0131d\u0131rlar.<\/p>\n<pre><code class=\"language-javascript\">\/\/ Eski y\u00f6ntem:\n    \/\/ this.handleClick = this.handleClick.bind(this);\n    \/\/ Modern y\u00f6ntem:\n    handleClick = () => {\n        \/\/ this burada her zaman s\u0131n\u0131f \u00f6rne\u011fine i\u015faret eder\n    }<\/code><\/pre>\n<p>*   <strong>Spread Operat\u00f6r\u00fc (<code>...<\/code>):<\/strong> <code>apply()<\/code>&#8216;\u0131n dizi arg\u00fcman\u0131 ge\u00e7irme i\u015flevini <code>call()<\/code> ile birlikte <code>...<\/code> operat\u00f6r\u00fc kullanarak ger\u00e7ekle\u015ftirebilirsiniz. Bu, kodu daha okunabilir hale getirebilir.<\/p>\n<pre><code class=\"language-javascript\">const numbers = [1, 2, 3];\n    myFunc.apply(null, numbers); \/\/ Eski\n    myFunc.call(null, ...numbers); \/\/ Modern<\/code><\/pre>\n<h4>Yayg\u0131n Hatalar ve Dikkat Edilmesi Gerekenler<\/h4>\n<p>*   <strong><code>this<\/code> De\u011ferinin Beklenmedik \u015eekilde De\u011fi\u015fmesi:<\/strong> En s\u0131k kar\u015f\u0131la\u015f\u0131lan hatad\u0131r. Bir fonksiyonu bir objenin metodu olarak tan\u0131mlay\u0131p, daha sonra onu ba\u015fka bir de\u011fi\u015fkene atay\u0131p \u00e7a\u011f\u0131rd\u0131\u011f\u0131n\u0131zda <code>this<\/code> genellikle <code>window<\/code> veya <code>undefined<\/code> olur. <code>bind()<\/code> veya a\u00e7\u0131l\u0131 fonksiyonlar bu durumu d\u00fczeltmek i\u00e7in kullan\u0131l\u0131r.<br \/>\n*   <strong>Gereksiz <code>bind<\/code> Kullan\u0131m\u0131:<\/strong> Her zaman <code>bind<\/code> kullanmak zorunda de\u011filsiniz. E\u011fer fonksiyonunuz <code>this<\/code> kullanm\u0131yorsa veya a\u00e7\u0131l\u0131 fonksiyon zaten do\u011fru <code>this<\/code>&#8216;i sa\u011fl\u0131yorsa, <code>bind<\/code> gereksiz bir i\u015flem olabilir.<br \/>\n*   <strong>Performans Etkisi:<\/strong> <code>bind()<\/code> her \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda yeni bir fonksiyon olu\u015fturur. K\u00fc\u00e7\u00fck \u00f6l\u00e7ekli uygulamalarda bu genellikle ihmal edilebilir bir performans maliyetidir. Ancak \u00e7ok y\u00fcksek frekansl\u0131 \u00e7a\u011fr\u0131larda veya binlerce kez dinamik olarak <code>bind<\/code> edildi\u011finde dikkate al\u0131nmas\u0131 gerekebilir. \u00c7o\u011fu durumda, okunabilirlik ve do\u011fru <code>this<\/code> ba\u011flam\u0131 \u00f6ncelikli olmal\u0131d\u0131r.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>JavaScript&#8217;teki <code>this<\/code> anahtar kelimesi, dinamik do\u011fas\u0131 nedeniyle karma\u015f\u0131k bir konudur. Ancak <code>bind<\/code>, <code>call<\/code> ve <code>apply<\/code> metotlar\u0131, bu dinamizmi kontrol alt\u0131na almam\u0131z i\u00e7in bize g\u00fc\u00e7l\u00fc ara\u00e7lar sunar. <code>call()<\/code> ve <code>apply()<\/code> bir fonksiyonu hemen belirli bir <code>this<\/code> de\u011feriyle \u00e7a\u011f\u0131rmak i\u00e7in kullan\u0131l\u0131rken, <code>bind()<\/code> gelecekte kullan\u0131lmak \u00fczere <code>this<\/code> de\u011feri sabitlenmi\u015f yeni bir fonksiyon d\u00f6nd\u00fcr\u00fcr.<\/p>\n<p>Modern JavaScript&#8217;in getirdi\u011fi a\u00e7\u0131l\u0131 fonksiyonlar gibi \u00f6zellikler, <code>this<\/code> y\u00f6netimiyle ilgili bir\u00e7ok senaryoyu basitle\u015ftirmi\u015f olsa da, <code>bind<\/code>, <code>call<\/code> ve <code>apply<\/code> hala JavaScript&#8217;in temel ve g\u00fc\u00e7l\u00fc par\u00e7alar\u0131d\u0131r. \u00d6zellikle eski kod tabanlar\u0131yla \u00e7al\u0131\u015f\u0131rken, k\u00fct\u00fcphane kodlar\u0131n\u0131 incelerken veya belirli ileri d\u00fczey tasar\u0131m kal\u0131plar\u0131n\u0131 uygularken bu metotlar\u0131 iyi anlamak kritik \u00f6neme sahiptir. Bu mekanizmalar\u0131 ustaca kullanmak, daha temiz, daha g\u00fcvenilir ve daha anla\u015f\u0131l\u0131r JavaScript kodlar\u0131 yazman\u0131za olanak tan\u0131yacakt\u0131r. JavaScript&#8217;in inceliklerini kavramak isteyen her geli\u015ftiricinin bu konulara hakim olmas\u0131 elzemdir.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"JavaScript&#8217;te &#8216;this&#8217;, &#8216;bind&#8217;, &#8216;call&#8217; ve &#8216;apply&#8217; Metotlar\u0131n\u0131 Anlamak\nJavaScript, dinamik ve esnek yap\u0131s\u0131yla web geli\u015ftirmenin temel ta\u015flar\u0131ndan","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-39495","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript&#039;te &#039;this&#039;, &#039;bind&#039;, &#039;call&#039; ve &#039;apply&#039; Metotlar\u0131n\u0131 Anlamak - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\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-bind-call-ve-apply-metotlarini-anlamak\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript&#039;te &#039;this&#039;, &#039;bind&#039;, &#039;call&#039; ve &#039;apply&#039; Metotlar\u0131n\u0131 Anlamak\" \/>\n<meta property=\"og:description\" content=\"JavaScript&#039;te &#039;this&#039;, &#039;bind&#039;, &#039;call&#039; ve &#039;apply&#039; Metotlar\u0131n\u0131 Anlamak JavaScript, dinamik ve esnek yap\u0131s\u0131yla web geli\u015ftirmenin temel ta\u015flar\u0131ndan\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-bind-call-ve-apply-metotlarini-anlamak\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-22T14:40:43+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=\"15 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-bind-call-ve-apply-metotlarini-anlamak\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-bind-call-ve-apply-metotlarini-anlamak\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"JavaScript&#8217;te &#8216;this&#8217;, &#8216;bind&#8217;, &#8216;call&#8217; ve &#8216;apply&#8217; Metotlar\u0131n\u0131 Anlamak\",\"datePublished\":\"2026-02-22T14:40:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-bind-call-ve-apply-metotlarini-anlamak\/\"},\"wordCount\":2178,\"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-bind-call-ve-apply-metotlarini-anlamak\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-bind-call-ve-apply-metotlarini-anlamak\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-bind-call-ve-apply-metotlarini-anlamak\/\",\"name\":\"JavaScript'te 'this', 'bind', 'call' ve 'apply' Metotlar\u0131n\u0131 Anlamak - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-02-22T14:40:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-bind-call-ve-apply-metotlarini-anlamak\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-bind-call-ve-apply-metotlarini-anlamak\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-bind-call-ve-apply-metotlarini-anlamak\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript&#8217;te &#8216;this&#8217;, &#8216;bind&#8217;, &#8216;call&#8217; ve &#8216;apply&#8217; Metotlar\u0131n\u0131 Anlamak\"}]},{\"@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 SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript'te 'this', 'bind', 'call' ve 'apply' Metotlar\u0131n\u0131 Anlamak - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","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-bind-call-ve-apply-metotlarini-anlamak\/","og_locale":"tr_TR","og_type":"article","og_title":"JavaScript'te 'this', 'bind', 'call' ve 'apply' Metotlar\u0131n\u0131 Anlamak","og_description":"JavaScript'te 'this', 'bind', 'call' ve 'apply' Metotlar\u0131n\u0131 Anlamak JavaScript, dinamik ve esnek yap\u0131s\u0131yla web geli\u015ftirmenin temel ta\u015flar\u0131ndan","og_url":"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-bind-call-ve-apply-metotlarini-anlamak\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-02-22T14:40:43+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"15 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-bind-call-ve-apply-metotlarini-anlamak\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-bind-call-ve-apply-metotlarini-anlamak\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"JavaScript&#8217;te &#8216;this&#8217;, &#8216;bind&#8217;, &#8216;call&#8217; ve &#8216;apply&#8217; Metotlar\u0131n\u0131 Anlamak","datePublished":"2026-02-22T14:40:43+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-bind-call-ve-apply-metotlarini-anlamak\/"},"wordCount":2178,"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-bind-call-ve-apply-metotlarini-anlamak\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-bind-call-ve-apply-metotlarini-anlamak\/","url":"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-bind-call-ve-apply-metotlarini-anlamak\/","name":"JavaScript'te 'this', 'bind', 'call' ve 'apply' Metotlar\u0131n\u0131 Anlamak - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-02-22T14:40:43+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-bind-call-ve-apply-metotlarini-anlamak\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/javascriptte-this-bind-call-ve-apply-metotlarini-anlamak\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-this-bind-call-ve-apply-metotlarini-anlamak\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript&#8217;te &#8216;this&#8217;, &#8216;bind&#8217;, &#8216;call&#8217; ve &#8216;apply&#8217; Metotlar\u0131n\u0131 Anlamak"}]},{"@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\/39495","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=39495"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/39495\/revisions"}],"predecessor-version":[{"id":39496,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/39495\/revisions\/39496"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=39495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=39495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=39495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}