Nesne Tabanl\u0131 JavaScript: Pratik Bir K\u0131lavuz<\/p>\n
JavaScript’i sadece web sayfalar\u0131na interaktiflik katmak i\u00e7in mi kullan\u0131yorsunuz? Nesne tabanl\u0131 programlama (OOP) prensiplerini \u00f6\u011frenerek JavaScript kodlar\u0131n\u0131z\u0131 daha d\u00fczenli, \u00f6l\u00e7eklenebilir ve s\u00fcrd\u00fcr\u00fclebilir hale getirebilir, karma\u015f\u0131k projelerde bile kendinizi rahat hissedebilirsiniz. Bu makalede, JavaScript’te OOP’nin temellerinden ileri tekniklere kadar ad\u0131m ad\u0131m bir yolculu\u011fa \u00e7\u0131kaca\u011f\u0131z. Ger\u00e7ek d\u00fcnya \u00f6rnekleriyle peki\u015ftirilmi\u015f uygulamal\u0131 bilgilerle, JavaScript’te nesne tabanl\u0131 programlamay\u0131 ustala\u015facaks\u0131n\u0131z.<\/p>\n
Nesne tabanl\u0131 programlama (OOP), yaz\u0131l\u0131m\u0131 nesneler etraf\u0131nda yap\u0131land\u0131rmay\u0131 ama\u00e7layan bir programlama paradigmas\u0131d\u0131r. Nesneler, verileri (\u00f6zellikler\/properties) ve bu veriler \u00fczerinde i\u015flem yapan fonksiyonlar\u0131 (metodlar\/methods) bir araya getirir. JavaScript, prototip tabanl\u0131 bir OOP dili olsa da, s\u0131n\u0131flar ve nesneler arac\u0131l\u0131\u011f\u0131yla OOP prensiplerini olduk\u00e7a etkili bir \u015fekilde uygulayabilirsiniz. Bu sayede, kodunuzu daha mod\u00fcler, tekrar kullan\u0131labilir ve anla\u015f\u0131l\u0131r hale getirebilirsiniz. \u00d6rne\u011fin, bir e-ticaret sitesi i\u00e7in \u00fcr\u00fcn y\u00f6netimi, m\u00fc\u015fteri profili y\u00f6netimi gibi mod\u00fclleri ayr\u0131 nesneler olarak tasarlayabilirsiniz. Bu sayede, her bir mod\u00fcl \u00fczerinde ba\u011f\u0131ms\u0131z olarak \u00e7al\u0131\u015fabilir ve de\u011fi\u015fiklikler di\u011fer mod\u00fclleri etkilemez. Ayr\u0131ca, ayn\u0131 nesneleri farkl\u0131 yerlerde tekrar kullanarak kod tekrar\u0131n\u0131 \u00f6nleyebilirsiniz.<\/p>\n
JavaScript’te nesneler, s\u00fcsl\u00fc parantezler <\/code><\/p>\n Bu \u00f6rnekte, ES6 (ECMAScript 2015) ile JavaScript'e s\u0131n\u0131flar (classes) eklenmi\u015ftir. S\u0131n\u0131flar, nesne olu\u015fturmak i\u00e7in \u015fablonlar g\u00f6revi g\u00f6r\u00fcr. S\u0131n\u0131flar <\/code><\/p>\n Bu \u00f6rnekte, Kal\u0131t\u0131m, bir s\u0131n\u0131ftan ba\u015fka bir s\u0131n\u0131f t\u00fcretmeyi ve mevcut s\u0131n\u0131f\u0131n \u00f6zelliklerini ve metodlar\u0131n\u0131 miras almay\u0131 sa\u011flar. JavaScript'te <\/code><\/p>\n Burada Kaps\u00fcleme, bir nesnenin i\u00e7 verilerini d\u0131\u015f d\u00fcnyadan korumak ve bu verilere sadece belirli metodlar arac\u0131l\u0131\u011f\u0131yla eri\u015fim sa\u011flamakt\u0131r. JavaScript'te, \u00f6zelliklerin \u00f6n\u00fcne <\/code><\/p>\n Polimorfizm, farkl\u0131 s\u0131n\u0131flar\u0131n ayn\u0131 isimli metodlar\u0131 farkl\u0131 \u015fekilde uygulayabilme \u00f6zelli\u011fidir. Bu, kodun daha esnek ve geni\u015fletilebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n <\/code><\/p>\n Burada, Soyut s\u0131n\u0131flar, di\u011fer s\u0131n\u0131flar taraf\u0131ndan miras al\u0131nmak \u00fczere tasarlanm\u0131\u015ft\u0131r ancak do\u011frudan nesne olu\u015fturulamaz. JavaScript'te soyut s\u0131n\u0131flar do\u011frudan desteklenmez, ancak bunu taklit etmek i\u00e7in baz\u0131 teknikler kullan\u0131labilir. Genellikle constructor metodu i\u00e7ermezler ve baz\u0131 metodlar\u0131 tan\u0131ms\u0131z b\u0131rak\u0131rlar. Bunlar alt s\u0131n\u0131flarda zorunlu olarak tan\u0131mlanmal\u0131d\u0131r.<\/p>\n <\/code><\/p>\n Bu \u00f6rnekte, Yeni Ba\u015flayan:<\/strong><\/p>\n * JavaScript'in temel s\u00f6zdizimini ve veri tiplerini \u00f6\u011frenin. Orta Seviye:<\/strong><\/p>\n * S\u0131n\u0131flar ve nesneler kavram\u0131n\u0131 \u00f6\u011frenin. \u0130leri Seviye:<\/strong><\/p>\n * Soyut s\u0131n\u0131flar ve aray\u00fczler (interfaces) konular\u0131n\u0131 ara\u015ft\u0131r\u0131n. E-ticaret Sitesi:<\/strong> \u00dcr\u00fcnler, kullan\u0131c\u0131lar ve sipari\u015fler gibi farkl\u0131 nesneleri modelleyerek, daha mod\u00fcler ve \u00f6l\u00e7eklenebilir bir e-ticaret sitesi geli\u015ftirebilirsiniz. \u00d6rne\u011fin, bir Oyun Geli\u015ftirme:<\/strong> Oyun karakterleri, d\u00fc\u015fmanlar ve silahlar gibi unsurlar\u0131 nesneler olarak modelleyerek, oyun mant\u0131\u011f\u0131n\u0131 daha d\u00fczenli ve kolay y\u00f6netilebilir hale getirebilirsiniz. Her karakterin kendi yetenekleri ve \u00f6zellikleri olabilir.<\/p>\n Mobil Uygulamalar:<\/strong> Mobil uygulama geli\u015ftirmede, kullan\u0131c\u0131 aray\u00fcz\u00fc elemanlar\u0131, veritaban\u0131 i\u015flemleri ve a\u011f istekleri gibi i\u015flemleri nesneler arac\u0131l\u0131\u011f\u0131yla y\u00f6netebilirsiniz.<\/p>\n Nesne tabanl\u0131 programlama, karma\u015f\u0131k uygulamalar i\u00e7in daha d\u00fczenli ve s\u00fcrd\u00fcr\u00fclebilir bir kod yap\u0131s\u0131 sa\u011flarken, performans a\u00e7\u0131s\u0131ndan baz\u0131 dezavantajlar\u0131 da olabilir. \u00d6zellikle, \u00e7ok say\u0131da k\u00fc\u00e7\u00fck nesne olu\u015fturmak bellek t\u00fcketimini art\u0131rabilir. Bu nedenle, b\u00fcy\u00fck projelerde performans optimizasyonuna dikkat etmek \u00f6nemlidir. Uygun optimizasyon teknikleri ve tasar\u0131m desenleri kullanarak performans kay\u0131plar\u0131n\u0131 minimize edebilirsiniz.<\/p>\n Dikkat! Nesnelerin g\u00fcvenli bir \u015fekilde tasarlanmas\u0131 ve kullan\u0131lmas\u0131 \u00f6nemlidir. \u00d6zellikle, kullan\u0131c\u0131 giri\u015fini do\u011frudan nesne \u00f6zelliklerine atamaktan ka\u00e7\u0131nmal\u0131 ve veri do\u011frulama mekanizmalar\u0131 kullanmal\u0131s\u0131n\u0131z. Yanl\u0131\u015f veri giri\u015fi g\u00fcvenlik a\u00e7\u0131klar\u0131na yol a\u00e7abilir.<\/p>\n Bu makalede, JavaScript'te nesne tabanl\u0131 programlaman\u0131n temel kavramlar\u0131ndan ileri tekniklere kadar geni\u015f bir yelpazede bilgi vermeye \u00e7al\u0131\u015ft\u0131k. OOP prensiplerini \u00f6\u011frenmek ve uygulamak, JavaScript kodunuzun kalitesini ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131racakt\u0131r. Daha fazla bilgi i\u00e7in (https:\/\/fatihsoysal.com) inceleyebilirsiniz.<\/p>\n * S: JavaScript prototip tabanl\u0131 bir dil ise s\u0131n\u0131flar neden kullan\u0131l\u0131yor?<\/strong> C: S\u0131n\u0131flar, prototip tabanl\u0131 programlaman\u0131n daha anla\u015f\u0131l\u0131r ve organize bir \u015fekilde uygulanmas\u0131n\u0131 sa\u011flar.<\/p>\n * S: Private \u00f6zellikler nas\u0131l g\u00fcvenli bir \u015fekilde uygulanabilir?<\/strong> C: ES6'daki * S: Hangi tasar\u0131m desenlerini \u00f6\u011frenmeliyim?<\/strong> C: Singleton, Factory, Observer gibi yayg\u0131n tasar\u0131m desenlerini ara\u015ft\u0131rman\u0131z faydal\u0131 olacakt\u0131r.<\/p>\n * S: OOP kullanman\u0131n performans etkisi nedir?<\/strong> C: Genellikle performans kay\u0131plar\u0131na yol a\u00e7abilir, \u00f6zellikle k\u00fc\u00e7\u00fck nesnelerin a\u015f\u0131r\u0131 kullan\u0131m\u0131 durumunda. Optimizasyon teknikleri ile bu etkiler minimize edilebilir.<\/p>\n * S: JavaScript'te OOP \u00f6\u011frenmek zor mu?<\/strong> C: Ba\u015flang\u0131\u00e7ta zor gelebilir ancak temel kavramlar\u0131 anlad\u0131ktan sonra daha kolay hale gelir. Pratik yaparak ve \u00f6rnek projeler geli\u015ftirerek h\u0131zl\u0131 bir \u015fekilde \u00f6\u011frenirsiniz.<\/p>\n Yazar: Fatih Soysal<\/p>\n","protected":false},"excerpt":{"rendered":"Nesne Tabanl\u0131 JavaScript: Pratik Bir K\u0131lavuz JavaScript’i sadece web sayfalar\u0131na interaktiflik katmak i\u00e7in mi kullan\u0131yorsunuz? Nesne tabanl\u0131 programlama…","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-29869","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n{}<\/code> kullan\u0131larak olu\u015fturulur. \u00d6zellikler ve metodlar bu s\u00fcsl\u00fc parantezler i\u00e7inde tan\u0131mlan\u0131r. \u00d6rne\u011fin, basit bir “Araba” nesnesi \u015fu \u015fekilde tan\u0131mlanabilir:<\/p>\nlet araba = {\n marka: \"Toyota\",\n model: \"Corolla\",\n yil: 2023,\n hiz: 0,\n hizlan: function(deger) {\n this.hiz += deger;\n },\n dur: function() {\n this.hiz = 0;\n }\n};\n\nconsole.log(araba.marka); \/\/ \"Toyota\"\naraba.hizlan(50);\nconsole.log(araba.hiz); \/\/ 50\naraba.dur();\nconsole.log(araba.hiz); \/\/ 0<\/pre>\naraba<\/code> nesnesi marka<\/code>, model<\/code>, yil<\/code> gibi \u00f6zellikleri ve hizlan<\/code>, dur<\/code> gibi metodlar\u0131 i\u00e7erir. this<\/code> anahtar kelimesi, nesnenin kendi \u00f6zelliklerine ve metodlar\u0131na eri\u015fim sa\u011flar.<\/p>\nS\u0131n\u0131flar ve Nesneler: JavaScript'te OOP'nin Modern Yakla\u015f\u0131m\u0131<\/h2>\n
class<\/code> anahtar kelimesiyle tan\u0131mlan\u0131r ve constructor<\/code> metodu nesne olu\u015fturuldu\u011funda otomatik olarak \u00e7al\u0131\u015f\u0131r. Metodlara function<\/code> yerine daha temiz bir \u015fekilde eri\u015filir.<\/p>\nclass Araba {\n constructor(marka, model, yil) {\n this.marka = marka;\n this.model = model;\n this.yil = yil;\n this.hiz = 0;\n }\n\n hizlan(deger) {\n this.hiz += deger;\n }\n\n dur() {\n this.hiz = 0;\n }\n}\n\nlet araba1 = new Araba(\"BMW\", \"X5\", 2022);\nlet araba2 = new Araba(\"Audi\", \"A6\", 2023);\n\nconsole.log(araba1.marka); \/\/ \"BMW\"\naraba1.hizlan(60);\nconsole.log(araba1.hiz); \/\/ 60<\/pre>\nAraba<\/code> s\u0131n\u0131f\u0131, araba1<\/code> ve araba2<\/code> gibi birden fazla nesne olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. Her nesne, kendi \u00f6zelliklerine sahiptir.<\/p>\nKal\u0131t\u0131m (Inheritance): Kod Tekrar\u0131n\u0131 \u00d6nlemek<\/h2>\n
extends<\/code> anahtar kelimesi kullan\u0131larak kal\u0131t\u0131m uygulan\u0131r.<\/p>\nclass ElektrikliAraba extends Araba {\n constructor(marka, model, yil, pilKapasitesi) {\n super(marka, model, yil); \/\/ \u00dcst s\u0131n\u0131f\u0131n constructor'\u0131n\u0131 \u00e7a\u011f\u0131r\u0131r\n this.pilKapasitesi = pilKapasitesi;\n }\n\n pilBilgisi() {\n console.log(Pil Kapasitesi: ${this.pilKapasitesi} kWh<\/code>);\n }\n}\n\nlet elektrikliAraba = new ElektrikliAraba(\"Tesla\", \"Model 3\", 2024, 75);\nelektrikliAraba.hizlan(80);\nconsole.log(elektrikliAraba.hiz); \/\/ 80\nelektrikliAraba.pilBilgisi(); \/\/ \"Pil Kapasitesi: 75 kWh\"<\/pre>\nElektrikliAraba<\/code> s\u0131n\u0131f\u0131, Araba<\/code> s\u0131n\u0131f\u0131ndan t\u00fcretilmi\u015ftir ve Araba<\/code> s\u0131n\u0131f\u0131n\u0131n \u00f6zelliklerini ve metodlar\u0131n\u0131 miras alm\u0131\u015ft\u0131r. Ayr\u0131ca kendi \u00f6zel metodu olan pilBilgisi<\/code> metodunu da eklemi\u015ftir.<\/p>\nKaps\u00fcleme (Encapsulation): Veri Gizleme<\/h2>\n
_<\/code> (alt \u00e7izgi) ekleyerek bu \u00f6zelliklerin \u00f6zel (private) oldu\u011funu belirtme gelene\u011fi vard\u0131r. Ger\u00e7ek anlamda private \u00f6zellikler ES6 ile gelmemi\u015ftir. Ancak, #<\/code> (diyez) sembol\u00fc kullan\u0131larak private \u00f6zellikler tan\u0131mlanabilir, fakat bu \u00f6zellik taray\u0131c\u0131 deste\u011fi her zaman yeterli olmayabilir.<\/p>\nclass Araba {\n constructor(marka, model, yil) {\n this.marka = marka;\n this.model = model;\n this.yil = yil;\n this._hiz = 0; \/\/ \u00d6zel \u00f6zellik\n }\n\n hizlan(deger) {\n this._hiz += deger;\n }\n\n get hiz() { \/\/ Getter metodu\n return this._hiz;\n }\n\n set hiz(deger) { \/\/ Setter metodu\n if (deger >= 0) {\n this._hiz = deger;\n } else {\n console.log(\"H\u0131z negatif olamaz!\");\n }\n }\n}\n\nlet araba3 = new Araba(\"Honda\", \"Civic\", 2021);\naraba3.hizlan(40);\nconsole.log(araba3.hiz); \/\/ 40\n\naraba3.hiz = -10; \/\/ Setter metodu \u00e7al\u0131\u015f\u0131r ve hata mesaj\u0131 verir<\/pre>\nPolimorfizm (Polymorphism): Birden \u00c7ok Form<\/h2>\n
class Hayvan {\n sesCikar() {\n console.log(\"Bir ses \u00e7\u0131kar\u0131yor...\");\n }\n}\n\nclass Kopek extends Hayvan {\n sesCikar() {\n console.log(\"Hav hav!\");\n }\n}\n\nclass Kedi extends Hayvan {\n sesCikar() {\n console.log(\"Miyav!\");\n }\n}\n\nlet hayvan = new Hayvan();\nlet kopek = new Kopek();\nlet kedi = new Kedi();\n\nhayvan.sesCikar(); \/\/ \"Bir ses \u00e7\u0131kar\u0131yor...\"\nkopek.sesCikar(); \/\/ \"Hav hav!\"\nkedi.sesCikar(); \/\/ \"Miyav!\"<\/pre>\nHayvan<\/code>, Kopek<\/code> ve Kedi<\/code> s\u0131n\u0131flar\u0131n\u0131n hepsi sesCikar<\/code> metoduna sahiptir, ancak her s\u0131n\u0131f bu metodu farkl\u0131 \u015fekilde uygular.<\/p>\nSoyut S\u0131n\u0131flar (Abstract Classes): \u015eablon Olu\u015fturma<\/h2>\n
class Sekil {\n alanHesapla() {\n throw new Error(\"Soyut metod!\");\n }\n}\n\nclass Kare extends Sekil {\n constructor(kenar) {\n super();\n this.kenar = kenar;\n }\n\n alanHesapla() {\n return this.kenar * this.kenar;\n }\n}\n\nlet kare = new Kare(5);\nconsole.log(kare.alanHesapla()); \/\/ 25\n\nlet sekil = new Sekil(); \/\/ Hata: Soyut s\u0131n\u0131f<\/pre>\nSekil<\/code> s\u0131n\u0131f\u0131 soyut bir s\u0131n\u0131ft\u0131r ve alanHesapla<\/code> metodu tan\u0131ms\u0131zd\u0131r. Kare<\/code> s\u0131n\u0131f\u0131, Sekil<\/code> s\u0131n\u0131f\u0131ndan t\u00fcretilir ve alanHesapla<\/code> metodunu uygular.<\/p>\nJavaScript'te Nesne Tabanl\u0131 Programlama: \u00d6\u011frenme Yol Haritas\u0131<\/h2>\n
\n* Nesne olu\u015fturma ve \u00f6zelliklere\/metodlara eri\u015fim y\u00f6ntemlerini kavray\u0131n.
\n* Basit nesneler ve metodlar kullanarak uygulamalar geli\u015ftirin.<\/p>\n
\n* Constructor ve metodlar\u0131n kullan\u0131m\u0131n\u0131 anlay\u0131n.
\n* Kal\u0131t\u0131m ve polimorfizm prensiplerini uygulay\u0131n.
\n* Kaps\u00fclleme kavram\u0131n\u0131 ve uygulamas\u0131n\u0131 \u00f6\u011frenin.<\/p>\n
\n* Tasar\u0131m desenlerini (design patterns) \u00f6\u011frenin ve uygulay\u0131n.
\n* JavaScript'te karma\u015f\u0131k OOP mimarilerini tasarlay\u0131n.
\n* Performans optimizasyonu tekniklerini uygulay\u0131n.
\n* Mod\u00fclerlik ve tekrar kullan\u0131labilirlik prensiplerini geli\u015ftirin.<\/p>\nGer\u00e7ek D\u00fcnya Senaryolar\u0131 ve Vaka Analizleri<\/h2>\n
Urun<\/code> s\u0131n\u0131f\u0131, \u00fcr\u00fcn ad\u0131, fiyat\u0131 ve a\u00e7\u0131klamas\u0131n\u0131 i\u00e7erebilir. Kullanici<\/code> s\u0131n\u0131f\u0131 ise kullan\u0131c\u0131 ad\u0131, e-posta adresi ve sipari\u015f ge\u00e7mi\u015fi gibi bilgileri tutabilir.<\/p>\nPerformans Kar\u015f\u0131la\u015ft\u0131rmalar\u0131<\/h2>\n
G\u00fcvenlik Uyar\u0131lar\u0131<\/h2>\n
Sonu\u00e7<\/h2>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
#<\/code> sembol\u00fc kullan\u0131labilir ancak taray\u0131c\u0131 deste\u011fi g\u00f6z \u00f6n\u00fcnde bulundurulmal\u0131d\u0131r. Genellikle _<\/code> alt \u00e7izgi ile \u00f6zel oldu\u011funu belirtmek yeterlidir ancak tam anlamda gizlilik sa\u011flamaz.<\/p>\n