Evrensel Objeler

JavaScript dili yazılırken “evrensel obje” diye bir obje fikri vardı. Bu obje tüm değişken ve fonksiyonları içinde barındırarak tarayıcıda bulunan kodların evrensel obje yardımıyla değişkenleri paylaşabileceği düşünülmüştü.

Tabi o zamandan beri JavaScript çok değişti, artık evrensel obje göze batar oldu. Modern JavaScript’te bu objenin yerini module yapısı aldı.

Evrensel obje hala dil içerisinde yer almaktadır.

Tarayıcı için bu “window” ve NodeJs için ise “global”'dir. Diğer ortamlar da kendine ait evrensel objelere sahiptirler.

İki şeyi yapmaktadır:

1. Dil dahilindeki fonksiyon ve deÄŸiÅŸkenlere eriÅŸim saÄŸlar. ÖrneÄŸin, alert doÄŸrudan veya window’un bir metodu olarak çağırılabilir.

   alert("Merhaba");
   
   // aynısı
   window.alert("Merhaba");

   Bu aynı ÅŸekilde diÄŸer dahili fonksiyon ve deÄŸiÅŸkenler için de geçerlidir. ÖrneÄŸin Array yerine window.Array kullanılabilir.

2. Global var deÄŸiÅŸkeni tanımlamaya olanak tanır. window özellikleri ile okuma ve yazma saÄŸlanabilir. ÖrneÄŸin

   var selam = "Merhaba";
   
   function selamVer() {
     alert(selam);
   }
   
   // window'dan okunabilir
   alert( window.terim ); // Merhaba (global var)
   alert( window.selamVer ); // function (global function declaration)
   
   // window'a yazılabilir. (yeni global değişken oluşturur.)
   
   window.test = 5;
   
   alert(test); // 5

…Fakat global obje let/const ile tanımlanmış deÄŸiÅŸkenler barındıramaz.

let kullanici = "Ahmet";
alert(kullanici); // Ahmet

alert(window.kullanici); // tanımsız, let ile tanımlama yapılamaz.
alert("kullanici" in window); // false

“window”'un kullanım alanları

Node.JS gibi sunucu ortamlarında, global obje çok az kullanılır. Hatta hiçbir zaman diyebiliriz.

Buna raÄŸmen window bazı durumlarda kullanılmaktadır.

Genelde, kullanmak çok iyi bir fikir olmasa da, aşağıda bazı örnekleri görebilirsiniz.

1. Eğer evrenselde bulunan değişken ile fonksiyon içindeki değişken ismi aynı ise;

   var kullanici = "Evrensel";
   
   function selamVer() {
     var kullanici = "Yerel";
   
     alert(window.kullanici); // Evrensel
   }
   
   selamVer();

   Bu sizi çözüme ulaÅŸtırır fakat deÄŸiÅŸkenlere farklı isimler vermek daha iyidir, böylece window kullanmanıza gerek kalmaz. Ayrıca dikkat ederseniz kullanici tanımlamak için var kullanılmıştır. let kullanılmış olsaydı window’dan bu deÄŸeri alamazdınız.

2. Global bir değişkenin var olup olmadığına bakar.

   ÖrneÄŸin, XMLHttpRequest’in global bir fonksiyon olup olmadığını kontrol etmek isterseniz, if (XMLHttpRequest) ÅŸeklinde yazamazsınız, çünkü XMLHttpRequest yoksa hata verecektir.

   Bunu window.XMLHttpRequest üzerinden okuyabilirsiniz.

   if (window.XMLHttpRequest) {
     alert('XMLHttpRequest tanımlı!')
   }

   EÄŸer böyle bir global fonksiyon olmasaydı undefined dönerdi.

   window olmadan da bunu test etmek mümkündür:

   if (typeof XMLHttpRequest == 'function') {
     /*  XMLHttpRequest? fonksiyonu var mı? */
   }

   Burada window kullanılmasa da (teorik olarak) daha az güvenilirdir, çünkü typeof yerel XMLHttpRequest kullanabilir, halbuki biz evrensel olanını kontrol etmek istiyoruz.

3. Doğru pencereden değişken alma. Bu en uygun kullanım şeklidir.

   Tarayıcıda birçok sekme ve pencere açılabilir. Bir pencere diÄŸerini <iframe> içerisinde gösterebilir. Her tarayıcı kendine ait window objesine ve bunun global deÄŸiÅŸkenlerine sahiptir. JavaScript pencerelerin (aynı site içerisinde ise) birbirlerinden deÄŸiÅŸken almalarına izin verir.

   Bu biraz amacının dışında da olsa şuna benzer:

   <iframe src="/" id="iframe"></iframe>
   
   <script>
     alert( innerWidth ); //  içerideki boyutu alır ( sadece tarayıcı için)
     alert( Array ); // o anki pencerenin dizisini alır.get Array of the current window (javascript core builtin)
   
     // when the iframe loads...
     iframe.onload = function() {
       // iframe'in geniÅŸliÄŸini al
       alert( iframe.contentWindow.innerWidth );
       // iframe penceresinin dizisini al.
       alert( iframe.contentWindow.Array );
     };
   </script>

   Burada ilk iki alert var olan pencereyi kullanmaktadır, geriye kalan iki tanesi de iframe’den deÄŸiÅŸken almaktadır. Bu eÄŸer iframe aynı protocol/host/port’tan besleniyor ise herhangi bir deÄŸiÅŸken olabilir.

“this” ve evrensel objeler

Bazen, this’in deÄŸeri tamamen evrensel obje olur. Bu çok nadir de olsa bazı kod sayfalarında görülmektedir.

1. Tarayıcıda this’in global alandaki deÄŸeri window’dur:

   // fonksiyonların dışında
   alert( this === window ); // true

   Tarayıcı olmayan çevrelerde ise, this için farklı deÄŸer kullanabilirler.

2. Sıkı olmayan modda bir fonksiyon this çağırırsa, evrensel obje olan this’i kabul eder:

   // Sıkı modda değil (!)
   function f() {
     alert(this); // [object Window]
   }
   
   f(); // obje olmadan çağırıldı.

   Tanım gereÄŸi, this bu durumda evrensel obje olmalı, Node.JS ortamında olmasa bile this evrensel objedir. Bu eski kodlar ile uyumluluk amacıyladır, sıkı modda this tanımsız olabilir.

Polyfill’ler İçin Kullanma

Modern dil özelliklerinin desteğini test etmek için global nesneyi kullanıyoruz.

Örneğin, yerleşik bir “Promise” nesnesinin olup olmadığını test edelim (gerçekten eski tarayıcılarda yoktur):

if (!window.Promise) {
  alert("Senin tarayıcın gerçekten çok yaşlı");
}

Hiçbiri yoksa (örneğin, eski bir tarayıcıdayız), “pollyfills(çoklu dolgular)” oluşturabiliriz: çevre tarafından desteklenmeyen, ancak modern standartta var olan işlevler ekleyebiliriz.

if (!window.Promise) {
  window.Promise = ... // modern dil özelliğinin özel uygulaması
}

Özet

• Global nesne, her yerde bulunması gereken deÄŸiÅŸkenleri tutar.

  Buna “Array” gibi JavaScript yerleşikleri ve “window.innerHeight” gibi ortama özgü değerler – tarayıcıdaki pencere yüksekliği dahildir.

• Global nesnenin evrensel bir adı ‘globalThis’ vardır.

  …Ancak daha sık olarak “window(tarayıcı)” ve “global(Node.js)” gibi “eski tarz” çevreye özgü adlarla anılır. “globalThis” yeni bir teklif olduğundan, Chromium Edge dışında desteklenmemektedir (ancak polyfilled olabilir).

• DeÄŸerleri yalnızca projemiz için gerçekten küresellerse global nesnede saklamalıyız. Ve sayılarını minimumda tutun.

• Tarayıcıda, modules kullanmadığımız sürece, ‘var’ ile bildirilen global iÅŸlevler ve deÄŸiÅŸkenler global nesnenin bir özelliÄŸi haline gelir.

• Kodumuzu geleceÄŸe dönük ve daha kolay anlaşılır kılmak için global nesnenin özelliklerine doÄŸrudan “window.x” olarak eriÅŸmeliyiz.