JavaScript Objects
JavaScript'te, nesneler Kraldır. Nesneleri Anlarsanız, JavaScript'i anlarsınız.
Nesneler, Özellikler ve Yöntemler için kaplardır.
Özellikler değer olarak adlandırılır.
Yöntemler, Özellikler olarak depolanan işlevlerdir.
Özellikler ilkel değerler, işlevler ve hatta diğer nesneler olabilir.
JavaScript'te, neredeyse "her şey" bir nesnedir.
- Objects are objects / Nesnedir
- Maths are objects / Nesnedir
- Functions are objects / Nesnedir
- Dates are objects / Nesnedir
- Arrays are objects / Nesnedir
- Maps are objects / Nesnedir
- Sets are objects / Nesnedir
İlkeller hariç tüm JavaScript değerleri nesnelerdir.
object için new Object() yerine {}
array için new Array() yerine []
patternler için new RegExp() yerine /()/
function yazımı için new Function() yerine () {}
Diğer Dillerde İsim değer çiftleri olarak yazılan Objeler şunlardır:
PHP'de Associative diziler
Kategori: Python'daki Dictionaries
C'de Hash tables
Java'da Hash maps
Ruby ve Perl'de Hashlar
Object Tanımla Yöntemleri
Basit Tanımlanması
const car = {
type:"Fiat",
model:"500",
color:"white"
};
type:"Fiat",
model:"500",
color:"white"
};
İkinci Tanımlama Yöntemi
// Obje Olusturuluyor
const person = {};
// Objeye eleman ekleniyor
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
const person = {};
// Objeye eleman ekleniyor
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
Üçüncü Tanımlama Yöntemi
// Obje Olusturuluyor
const person = new Object();
// Objeye eleman ekleniyor
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
const person = new Object();
// Objeye eleman ekleniyor
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
Obje İçinde Obje
myObj = {
name:"John",
age:30,
myCars: {
car1:"Ford",
car2:"BMW",
car3:"Fiat"
}
}
name:"John",
age:30,
myCars: {
car1:"Ford",
car2:"BMW",
car3:"Fiat"
}
}
Object Erişme Yöntemleri
person.lastName;
//veya
person["lastName"];
//veya
person["lastName"];
JavaScript Object İçinde Method (Fonksiyon) Tanımlama
const person = {
firstName: "John",
lastName: "Doe",
id: 5566,
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
person.fullName();
firstName: "John",
lastName: "Doe",
id: 5566,
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
person.fullName();
Object İçinde Object Tanımlak
myObj = {
name:"John",
age:30,
myCars: {
car1:"Ford",
car2:"BMW",
car3:"Fiat"
}
}
myObj["myCars"]["car2"];
name:"John",
age:30,
myCars: {
car1:"Ford",
car2:"BMW",
car3:"Fiat"
}
}
myObj["myCars"]["car2"];
Obje Elemanını Silmek
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
delete person.age;
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
delete person.age;
JavaScript Object İçinde Method (Fonksiyon) Tanımlama
<script>
// Create an Object:
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fonksiyon2 : function () { //Objenin metot'u
return this.lastName.toUpperCase();
}
};
person.fonksiyon1 = function () { //Objeye bir metot eklenmis oldu
return this.firstName.toUpperCase();
};
document.getElementById("demo").innerHTML = person.fonksiyon1();
document.getElementById("demo").innerHTML += person.fonksiyon2();
</script>
// Create an Object:
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fonksiyon2 : function () { //Objenin metot'u
return this.lastName.toUpperCase();
}
};
person.fonksiyon1 = function () { //Objeye bir metot eklenmis oldu
return this.firstName.toUpperCase();
};
document.getElementById("demo").innerHTML = person.fonksiyon1();
document.getElementById("demo").innerHTML += person.fonksiyon2();
</script>
<script>
// Constructor Function Prototype for Person Objects
function Person(firstName,lastName,age,eyeColor) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
}
// Create a Person Object
const myMother = new Person("Sally","Rally",48,"green");
// Change Name
//myMother.changeName("Hoe");
//Constructor Functiona fonksiyon ekleniyor HATA
/*myMother.changeName = function (name) {
this.lastName = name;
}*/
//Constructor Functiona prototype ile fonksiyon ekleniyor
Person.prototype.changeName = function (name) {
this.lastName = name;
}
// Change Name
myMother.changeName("Doe");
// Display Name
document.getElementById("demo").innerHTML = "My mother's last name is " + myMother.lastName;
</script>
// Constructor Function Prototype for Person Objects
function Person(firstName,lastName,age,eyeColor) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
}
// Create a Person Object
const myMother = new Person("Sally","Rally",48,"green");
// Change Name
//myMother.changeName("Hoe");
//Constructor Functiona fonksiyon ekleniyor HATA
/*myMother.changeName = function (name) {
this.lastName = name;
}*/
//Constructor Functiona prototype ile fonksiyon ekleniyor
Person.prototype.changeName = function (name) {
this.lastName = name;
}
// Change Name
myMother.changeName("Doe");
// Display Name
document.getElementById("demo").innerHTML = "My mother's last name is " + myMother.lastName;
</script>
Bir Fonksiyondan Object / Nesne Üretme
<script>
// Constructor Function for Person objects
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// Create a Person object
const myFather = new Person("John", "Doe", 50, "blue");
// Display age
document.getElementById("demo1").innerHTML = "My father is " + myFather.age + ".";
//document.getElementById("demo2").innerHTML = "My father is " + new Person("John", "Doe", 50, "blue").age + ".";
</script>
// Constructor Function for Person objects
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// Create a Person object
const myFather = new Person("John", "Doe", 50, "blue");
// Display age
document.getElementById("demo1").innerHTML = "My father is " + myFather.age + ".";
//document.getElementById("demo2").innerHTML = "My father is " + new Person("John", "Doe", 50, "blue").age + ".";
</script>
Obje Eleman Değerlerini Ekrana Yazdırma
<script>
// Create an Object
const person = {
name: "John",
age: 30,
city: "New York"
};
// Display the Array
document.getElementById("demo").innerHTML = Object.values(person);
</script>
// Create an Object
const person = {
name: "John",
age: 30,
city: "New York"
};
// Display the Array
document.getElementById("demo").innerHTML = Object.values(person);
</script>
JSON Formatında Ekrana Yazdırmak
<script>
// Create an Object
const person = {
name: "John",
age: 30,
city: "New York"
};
// Display String
document.getElementById("demo1").innerHTML = JSON.stringify(person); //Object Elemanlarını JSON formatında yazım
document.getElementById("demo2").innerHTML = Object.values(person); //Object Elemanlarını Array formatında yazım
</script>
// Create an Object
const person = {
name: "John",
age: 30,
city: "New York"
};
// Display String
document.getElementById("demo1").innerHTML = JSON.stringify(person); //Object Elemanlarını JSON formatında yazım
document.getElementById("demo2").innerHTML = Object.values(person); //Object Elemanlarını Array formatında yazım
</script>
Örnek
<p id="Babam"></p>
<p id="Annem"></p>
<p id="Kardesim"></p>
<script>
// KisiBilgileri Object / Nesne Oluşturucu Fonksiyon
function KisiBilgileri(Adi, Soyadi, Yasi, GozRengi) {
this.Ad = Adi;
this.Soyad = Soyadi;
this.Yas = Yasi;
this.Goz = GozRengi;
this.Memleket = "Malatya"; //Deger olarak gelmeyen ama nesne elemanı (this yüzünden) olarak tanımlanan
}
//KisiBilgileri.Meslek = "İşçi"; //Bu şekilde nesne oluşturan fonksiyona eleman eklenemez.
//KisiBilgileri.prototype.Meslek = "İşçi";
// KisiBilgileri Nesnesi
const Babam = new KisiBilgileri("Hilmi", "Dulkadir", 70, "kahverengi");
const Annem = new KisiBilgileri("Leyla", Babam.Soyad, 68, "kahverengi");
const Kardesim = new KisiBilgileri("Mert", Babam.Soyad, 28, "kahverengi");
Kardesim.Boy = "1.80"; //Kardesim Nesne olduğu için Boy eklenebilir.
// Babam Objesine YasDegistir Metotu Ekliyoruz
Babam.YasDegistir = function(YeniYas) {
this.Yas = YeniYas;
}
Babam.YasDegistir(80); //alert(Babam.Yas);
// Gösterim
document.getElementById("Babam").innerHTML = "Babam " + Object.values(Babam);
document.getElementById("Annem").innerHTML = "Annem " + JSON.stringify(Annem);
document.getElementById("Kardesim").innerHTML = "Kardesim " + Kardesim.Ad + " " + Kardesim.Soyad + " " + Kardesim.Yas + " " + Kardesim.Goz + " " + Kardesim.Boy ;
</script>
<p id="Annem"></p>
<p id="Kardesim"></p>
<script>
// KisiBilgileri Object / Nesne Oluşturucu Fonksiyon
function KisiBilgileri(Adi, Soyadi, Yasi, GozRengi) {
this.Ad = Adi;
this.Soyad = Soyadi;
this.Yas = Yasi;
this.Goz = GozRengi;
this.Memleket = "Malatya"; //Deger olarak gelmeyen ama nesne elemanı (this yüzünden) olarak tanımlanan
}
//KisiBilgileri.Meslek = "İşçi"; //Bu şekilde nesne oluşturan fonksiyona eleman eklenemez.
//KisiBilgileri.prototype.Meslek = "İşçi";
// KisiBilgileri Nesnesi
const Babam = new KisiBilgileri("Hilmi", "Dulkadir", 70, "kahverengi");
const Annem = new KisiBilgileri("Leyla", Babam.Soyad, 68, "kahverengi");
const Kardesim = new KisiBilgileri("Mert", Babam.Soyad, 28, "kahverengi");
Kardesim.Boy = "1.80"; //Kardesim Nesne olduğu için Boy eklenebilir.
// Babam Objesine YasDegistir Metotu Ekliyoruz
Babam.YasDegistir = function(YeniYas) {
this.Yas = YeniYas;
}
Babam.YasDegistir(80); //alert(Babam.Yas);
// Gösterim
document.getElementById("Babam").innerHTML = "Babam " + Object.values(Babam);
document.getElementById("Annem").innerHTML = "Annem " + JSON.stringify(Annem);
document.getElementById("Kardesim").innerHTML = "Kardesim " + Kardesim.Ad + " " + Kardesim.Soyad + " " + Kardesim.Yas + " " + Kardesim.Goz + " " + Kardesim.Boy ;
</script>
Örnek 2
<script>
// Adres Object
//function Adres(Ilce, Mahalle, Sokak, Bina, Daire, Sahibi){
function Adres(VeriObjesi){ //Object Constructors
this.ILCE = VeriObjesi.ILce;
this.MAHALLE = VeriObjesi.MAhalle;
this.SOKAK = VeriObjesi.SOkak;
this.BINA = VeriObjesi.BIna;
this.DAIRE = VeriObjesi.DAire;
this.SAHIBI = VeriObjesi.SAhibi || "Aykut"; //Sahibi degeri gelmezse SAHIBI Aykut olsun
this.ULKE = "Türkiye"
this.ADRES = function() { // Object Constructors
B=" ";
return this.SAHIBI + B +
this.MAHALLE + B +
this.SOKAK + B +
this.BINA + B +
this.DAIRE + B +
this.ILCE + B +
this.ULKE
}
};
Veriler = {
ILce : 'Beylikdüzü',
MAhalle : 'Yıldız',
SOkak : 'Gümüş',
BIna : 'Mavi Kent',
DAire : 13,
SAhibi : 'Mehmet'
}
BirininAdresi = new Adres(Veriler);
alert(BirininAdresi.SAHIBI);
BirininAdresi.IL = "İstanbul"; //IL Elemanı Objeye Eklendi.
alert(BirininAdresi.IL);
alert(BirininAdresi.ADRES());
BirininAdresi.KISAADRES = function () { //KISAADRES Fonksiyonu Object'e eklendi
return this.ULKE + '/' + this.IL + '/' + this.ILCE;
}
alert(BirininAdresi.KISAADRES());
</script>
// Adres Object
//function Adres(Ilce, Mahalle, Sokak, Bina, Daire, Sahibi){
function Adres(VeriObjesi){ //Object Constructors
this.ILCE = VeriObjesi.ILce;
this.MAHALLE = VeriObjesi.MAhalle;
this.SOKAK = VeriObjesi.SOkak;
this.BINA = VeriObjesi.BIna;
this.DAIRE = VeriObjesi.DAire;
this.SAHIBI = VeriObjesi.SAhibi || "Aykut"; //Sahibi degeri gelmezse SAHIBI Aykut olsun
this.ULKE = "Türkiye"
this.ADRES = function() { // Object Constructors
B=" ";
return this.SAHIBI + B +
this.MAHALLE + B +
this.SOKAK + B +
this.BINA + B +
this.DAIRE + B +
this.ILCE + B +
this.ULKE
}
};
Veriler = {
ILce : 'Beylikdüzü',
MAhalle : 'Yıldız',
SOkak : 'Gümüş',
BIna : 'Mavi Kent',
DAire : 13,
SAhibi : 'Mehmet'
}
BirininAdresi = new Adres(Veriler);
alert(BirininAdresi.SAHIBI);
BirininAdresi.IL = "İstanbul"; //IL Elemanı Objeye Eklendi.
alert(BirininAdresi.IL);
alert(BirininAdresi.ADRES());
BirininAdresi.KISAADRES = function () { //KISAADRES Fonksiyonu Object'e eklendi
return this.ULKE + '/' + this.IL + '/' + this.ILCE;
}
alert(BirininAdresi.KISAADRES());
</script>
Kaynak
Yorumunuzu Ekleyin
