JavaScript Nesneler (Objects)

Normalde JavaScript Nesneleri, her nesne yönelimli programlama dilinde yer alır. JavaScript, için nesneler bir istisna değildir.

Nesne Yönelimli Programlama (NYP) mantıksal işlemlerden ziyade, nesnelere (object) ve nesneler üzerinde işlemlere odaklanan programlama dili modelidir. NYP’de programlar, nesnelerin birbirileriyle etkileşime geçmeleri sağlanmasıyla tasarlanır. Java, C++, C#, Python, PHP, JavaScript, Ruby, Perl, Objective-C gibi diller başlıca nesne yönelimli programlama dilleridir. Bir dilin Nesne yönelimli dil olduğu söyleniyorsa, aşağıdaki gibi NYP dört temel koşulu karşılamalıdır:

JavaScript, nesne tabanlı bir dildir ve JavaScript'te neredeyse her şey bir nesnedir veya bir nesne gibi davranır. Bu nedenle, JavaScript ile etkili ve verimli bir şekilde çalışmak için nesnelerin nasıl çalıştığını ve kendi nesnelerinizi nasıl oluşturup kullanacağınızı anlamamız gerekir.

JavaScript'teki nesneler, en önemli veri türüdür ve modern JavaScript için yapı taşlarını oluşturur. Bu nesneler, JavaScript'in ilkel veri türlerinden (Number, String, Boolean, null, undefined ve symbol) oldukça farklıdır; bu nedenle, bu ilkel veri türlerinin tümü (türlerine bağlı olarak) tek bir değer depolar.

JavaScript'teki nesneler, diğer birçok programlama dilinde olduğu gibi, gerçek hayattaki nesnelerle karşılaştırılabilir. JavaScript'teki nesneler kavramı gerçek hayattaki somut nesnelerle anlaşılabilir.

JavaScript'te bir nesne, özellikleri ve türü olan bağımsız bir varlıktır. Örneğin bir fincanla karşılaştırın. Fincan, özellikleri olan bir nesnedir. Bir bardağın bir rengi, tasarımı, ağırlığı, yapıldığı bir malzemesi vb. Vardır. Aynı şekilde, JavaScript nesneleri de özelliklerini tanımlayan özelliklere sahip olabilir.

Gerçek Hayat Nesneleri, Özellikleri ve Methodları


Gerçek hayatta araba bir nesnedir.

Bir arabanın ağırlık ve renk gibi özellikleri ve başlatma ve durdurma gibi Methodları vardır:

nesne.png

Tüm arabalar aynı özelliklere sahiptir , ancak mülk değerleri arabadan arabaya farklılık gösterir.

Tüm arabaların Methodlar aynıdır ancak methodlar farklı zamanlarda uygulanmaktadır.

JavaScript nesnesi, birden çok veri koleksiyonunu depolamanıza izin veren ilkel olmayan bir veri türüdür.

Not : Diğer programlama dillerine aşina iseniz, JavaScript nesneleri biraz farklıdır. Nesne oluşturmak için sınıf oluşturmanıza gerek yoktur.

Nesneler, Değişken İçeren Değişkenlerdir


JavaScript değişkenleri tek değer içerebilir:


var car = "Tofaş";

Nesneler de değişkendir. Ancak nesneler birçok değer içerebilir.


var car = {adi:"Tofaş", model:"Doğan", color:"blue"}

Değerler, ad: değer çiftleri (iki nokta üst üste ile ayrılmış ad ve değer) olarak yazılır.

JavaScript nesneleri, özellikler veya yöntemler adı verilen adlandırılmış değerler içerir.

Nesneler, Dizilere benzer.

Bir Kitap dizimiz olsun bu dizide Kitap kategorisi olsun, kitap adı olsun ve kitabın sayfa sayısı olsun.


let kitap = ["bilgisayar", "php öğreniyorum", 700];

Kitap dizimizde ki sayfa değerini değiştirmek istesek.


kitap[1] =800; 

console.log(kitap);

ÇIKTI

["bilgisayar", 800, 700]

Yukarıda ki çıktıda gördüğümüz gibi indeks numarasını karıştırdık Dizi değerlerimiz bozuldu halbu ki nesnelerde key:value değer çiftleri olduğu için bir elemanın değerini değiştirmek için ad:değer ismini verdiğimiz için bu tür karışıklık olmaz.

Nesne Oluşturma


Yeni bir nesne oluşturmanın en kolay yolu, bir çift süslü parantez içine alınan nesne değişmez gösterimi kullanmaktır: {}. Özellikler ve değerleri siz ilerledikçe eklenebilir. Aşağıdaki örnekte, nesne değişmez gösterimini kullanarak boş bir nesne oluşturuyoruz.


let empty = {};

Bir nesneyi bildirmek için sözdizimi şöyledir:


const object_name = {
   key1: value1,
   key2: value2
}

Burada bir nesne object_name tanımlanır. Bir nesnenin her üyesi, virgülle ayrılmış ve süslü parantez içine alınmış {} bir anahtar: değer çiftidir.


// Nesne Oluşturma

const personel = { 
    name: 'Ahmet',
    age: 25
};
console.log(typeof personel); // object


Bir nesnenin birden fazla özelliği olduğunda, bunları yukarıdaki örnekte olduğu gibi ayırmak için virgül kullanırsınız.

Özelliklere Erişim


1) Nokta gösterimi (.)


objectName.propertyName

Örneğin name, personel nesnenin özelliğine erişmek için aşağıdaki ifadeyi kullanırsınız:


let personel = {
    name: 'Ahmet',
    age: 25
};

console.log(personel.name); //Ahmet
console.log(personel.age); //25	

2) Dizi benzeri gösterim ( [] )

Aşağıda, bir nesnenin özelliğinin değerine dizi benzeri gösterim yoluyla nasıl erişileceği gösterilmektedir:


objectName['propertyName']

ÖRNEK:


let personel = {
    name: 'Ahmet',
    age: 25
};

console.log(personel['name']);
console.log(personel['age']);

Bir özellik adı boşluklar içerdiğinde, onu tırnak içine almanız gerekir. Örneğin, aşağıdaki Meyve nesnesi 'hangi mevsim meyvesi' özelliğine sahiptir:


let Meyve = {
     adi:'kiraz',
    'hangi mevsim meyvesi': 'yaz',
     rengi: 'kırmızı',
     fiyati:'10tl'
};

Özelliğe erişmek için 'hangi mevsim meyvesi' dizi benzeri gösterimi kullanmanız gerekir:


meyve['hangi mevsim meyvesi']

Noktalı gösterimi kullanırsanız bir hata alırsınız:


meyve.'hangi mevsim meyvesi' //SyntaxError: Unexpected string

Bir nesnenin özellik adlarında boşluk kullanmanın iyi bir uygulama olmadığını unutmayın.

3) Özelliğimizi bir değişkene atayacağız ve o değişkeni kullanarak değerimizi consol'a yazdıracağız.

Not: Değerler, değişkene eşitlenirken '' tırnak içinde belirtilmeli.


let personel = {
    name: 'Ahmet',
    age: 25
};
 var x = 'age';

 console.log(personel[x]); //25


Bir Özelliğin Değerini Değiştirme


Nesneler Özellik değiştirmek kolaydır. Nesneler'de Bir özelliğin değerini değiştirmek için atama operatörünü (=) kullanırsınız. Örneğin:


let adres = {
    mahalle: 'yeni',
    no: 20,
    ulke:'Türkiye'
};
adres.mahalle = 'kaletepe'; 

//mahalle özelliğini değiştiriyoruz.

console.log(adres);

{mahalle: "kaletepe", no: 20, ulke: "Türkiye"}

Bir Nesneye Yeni Bir Özellik Ekleme


Bir Diziye yeni Eleman eklemen için array.push() Methodu kullanılır. Nesnelerde yeni Eleman eklemek kolaydır. Aşağıdaki ifade apartman:onur özelliği adres nesnesine eklenir.


adres.apartman = 'onur';

ÇIKTI:

{mahalle: "kaletepe", no: 20, ulke: "Türkiye", apartman: "onur"}

Bir Nesnenin Bir Özelliğini Silme


Bir nesnenin bir özelliğini silmek için delete operatörü kullanırsınız :


delete objectName.propertyName;

Aşağıdaki örnek, mahalle özelliğini adres nesneden kaldırır :


delete adres.mahalle;

mahalle özelliğine tekrar erişmeye çalışırsanız, bir undefined değer alırsınız.


Bir Özelliğin Var Olup Olmadığını Kontrol Etme


Bir nesnede bir özelliğin olup olmadığını kontrol etmek için in operatörü kullanırsınız :


propertyName in objectName

Aşağıdaki örnek bir araba nesne oluşturur ve nesnede renk özelliğinin nesnede olup olmadığını kontrol etmek için in operatörü kullanır:


let araba = {
    name: 'BMW',
    model: 2010,
    renk: 'siyah' 
};

console.log('fren' in araba); //false
console.log('renk' in araba); //true


Nesnenin Özelliklerinde Döngü


for...in Döngüyü kullanarak bir nesnenin anahtar / değer çiftlerini yineleyebilirsiniz. Bu döngü, nesnenin özelliklerini yinelemek için özel olarak optimize edilmiştir. İşte bir örnek:


let website = {
    title: 'JavaScript Tutorial',
    url: 'https://www.webcebir.com',
    tags: ['es6', 'javascript', 'node.js', 'reactjs', 'react native']
};

for (const key in website) {
    console.log(key);
}

ÇIKTI:

'title'
'url'
'tags'	

Şimdi'de Nesnemizin anahtar / değer çiftlerinden değerkısmını consol'a yazdıralım.


let website = {
    title: 'JavaScript Tutorial',
    url: 'https://www.webcebir.com',
    tags: ['es6', 'javascript', 'node.js', 'reactjs', 'react native']
};

for (const key in website) {
    console.log(website[key]);
}

ÇIKTI:

JavaScript Tutorial
https://www.webcebir.com
["es6", "javascript", "node.js", "reactjs", "react native"]

Nesnenin Yöntemlerini Çağırma


Bir nesnenin methodu, özelliklere eriştiğiniz gibi, noktalı gösterimi veya köşeli parantez gösterimini kullanarak erişebilirsiniz. İşte bir örnek:


let araba = {
    name: 'Murat',
    model: '1980',
    start: function () {
        console.log('Çalışıyor');
    }
};

araba.start(); // Çıktı: Çalışıyor
araba["start"](); // Çıktı: Çalışıyor

ES6, bir nesne için bir method tanımlamanızı daha kısa hale getirmenize olanak tanıyan özlü method sözdizimini sağlar:


let araba = {
    name: 'Murat',
    model: '1980',
    start() {
        console.log('Çalışıyor');
    }
};
araba.start();

JavaScript İç İçe Nesneler



const student = { 
    name: 'Ahmet', 
    age: 20,
    webmaster: {
        php: 70,
        css: 75
    }
}

console.log(student.webmaster); // {php: 70, css: 75}

console.log(student.webmaster.php); // 70

Not: Javascript'de array içinde nesneler, methodlar, bolean ifadelerve tekrar arraylar olabilir. Nesneler içinde'de Arraylar, methodlar, bolean ifadeler ve tekrar nesneler olabilir.

This Keyword Kullanımı


JavaScript this anahtar sözcüğü, ait olduğu nesneyi ifade eder.

Tipik olarak, methodların nesnede depolanan verilere erişmesi gerekir.

Örneğin, şehir nesnesinde Şehir adı ve plaka no verilerine erişmek için nesne adı yerine this ifadesi yazılır.


let city = {
    adi: 'İstanbul',
    no: 34,
    getir: function () {
        return this.no+ ' ' + this.adi;
    },
    
};


console.log(city.getir());

ÇIKTI:

34 İstanbul

İç içe nesneler kullanıldıysa bulunduğu nesnenin değerlerini yazar.


let city = {
    adi: 'İstanbul',
    no: 34,
    getir: function () {
        return this.no+ ' ' + this.adi;
    },
    person:{
    	adi:'ahmet',
    	no:25,
    	getir: function () {
        return this.adi+ ' ' + this.no;
    },

    }
    
};

console.log(city.person.getir());

ÇIKTI:

ahmet 25

Yapıcı İşlevlerle Nesneler Oluşturma


Tek ihtiyacınız olan tek bir nesne ise ve birden çok örneğe gerek yoksa, var x = {} gibi nesne değişmez gösterimi tercih edilir. Bununla birlikte, birden çok örneğe ihtiyacınız varsa, bir yapıcı işlevi kullanmak daha iyidir. İşte bir kitap yapıcı işlevi örneği.


function Book(bilgi) {
    this.bilgisayar = bilgi;
    this.getAdi = function () {
        return "Bilgisayar Kitabı " + this.bilgisayar;
    };
}

Yöntemler dahil olmak üzere özellikler, methodun gövdesindeki this değere atanır. Yukarıdaki örnekte bir özellik ve bir method atanmıştır. Ayrıca bu Nesnenin büyük harfle yazıldığına dikkat edin (yani Book ); yapıcı işlevleri, JavaScript'te kural olarak büyük harfle yazılır

Bu işlevle yeni bir nesne oluşturmak için new operatörü ve ardından bir işlev çağrısı kullanırsınız. Bu şekilde çağrılan bir işleve, temel amacı yeni bir nesne oluşturmak ve başlatmak olan bir yapıcı işlev denir. Burada yeni bir kitap nesnesi oluşturuyoruz:


var book = new Book("javascript");

alert(book.getAdi());    // => javascript

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

9021

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML RESİM EKLEME
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS YATAY MENÜ YAPIMI
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.