JavaScript dirancang berdasarkan paradigma berbasis objek sederhana. Objek adalah kumpulan dari properti, dan properti adalah sepasang hubungan antara nama (atau kunci) dan nilai. Nilai properti bisa berupa fungsi, Dalam hal ini properti itu disebut metode. Selain objek yang sudah di tentukan pada peramban, Kamu bisa menentukan objekmu sendiri. Bab ini menjelaskan cara memakai objek, properti, fungsi, dan metode, serta bagaimana cara membuat objekmu sendiri.
Ikhtisar objek
Objek di JavaScript sama seperti kebanyakan bahasa pemrograman lainnya, bisa dibandingkan dengan objek dalam kehidupan nyata. Konsep objek dalam JavaScript dapat dipahami dengan kehidupan nyata, objek nyata.
Di JavaScript, objek adalah entitas yang mandiri dengan properti dan tipe. Bandingkan dengan cangkir, misalnya. Sebuah cangkir adalah objek dengan banyak properti. Cangkir punya warna, desain, berat, materi bahan, dll. Dengan cara sama, objek JavaScript juga punya banyak properti yang menjelaskan karakteristiknya.
Objek dan properti
Objek JavaScript punya banyak properti yang terkait dengannya. Properti dari objek dapat didefinisikan sebagai variabel yang dilampirkan pada objek itu. Properti dari objek pada dasarnya sama dengan variabel JavaScript biasa, kecuali lampiran pada objek. Properti objek menentukan karakteristik objek itu. Kamu mengakses properti objek dengan sebuah notasi titik sederhana:
objectName.propertyName
Seperti semua variabel JavaScript, baik nama objek (bisa jadi variabel normal) maupun nama properti peka terhadap besar huruf. Kamu bisa mendefinisi properti dengan mengassign nilai. Contohnya, ayo buat objek bernama myCar
dan dan berikan dia properti bernama make
, model
, dan year
sebagai berikut:
var myCar = new Object();
myCar.make = 'Ford';
myCar.model = 'Mustang';
myCar.year = 1969;
Nilai properti objek yang tidak diassign adalah undefined
(dan bukan null
).
myCar.color; // undefined
Properti dari objek JavaScript juga bisa diakses atau diset menggunakan notasi kurung siku (untuk lebih detil lihat aksesor properti). Terkadang objek disebut associative array, karena tiap properti dikaitkan dengan nilai string yang bisa digunakan untuk mengaksesnya. Jadi, contohnya, kamu bisa mengakses properti dari objek myCar
seperti berikut:
myCar['make'] = 'Ford';
myCar['model'] = 'Mustang';
myCar['year'] = 1969;
Nama properti objek bisa berupa string dari JavaScript yang valid, atau apapun yang dapat diubah menjadi string, termasuk string kosong. Namun, nama properti apapun yang tidak valid sebagai identitas di JavaScript (contohnya, nama properti yang memiliki spasi atau tanda hubung, atau yang dimulai dengan angka) hanya bisa diakses menggunakan notasi kurung siku. Notasi ini juga sangat berguna ketika nama properti harus ditentukan secara dinamis (ketika nama properti belum ditentukan hingga runtime). Contohnya sebagai berikut:
// empat variabel dibuat dan diberi nilai sekali jalan,
// dipisahkan oleh koma
var myObj = new Object(),
str = 'myString',
rand = Math.random(),
obj = new Object();
myObj.type = 'Syntax titik';
myObj['date created'] = 'String dengan spasi';
myObj[str] = 'Nilai string';
myObj[rand] = 'Angka Random';
myObj[obj] = 'Objek';
myObj[''] = 'Bahkan string kosong';
console.log(myObj);
Tolong dicatat bahwa semua kunci di dalam notasi kurung siku diubah ke dalam tipe String, karena objek JavaScript hanya bisa punya tipe String sebagai tipe kunci. Contohnya, dalam kode di atas, ketika kunci obj
ditambahkan dalam myObj
, JavaScript akan memanggil method obj.toString()
, dan menggunakan hasil string ini sebagai kunci baru.
Kamu juga bisa mengakses properti menggunakan nilai string yang disimpan dalam variabel:
var propertyName = 'make';
myCar[propertyName] = 'Ford';
propertyName = 'model';
myCar[propertyName] = 'Mustang';
Kamu bisa menggunakan notasi kurung siku dengan for...in
untuk mengiterasi ulang semua kumpulan properti yang terdaftar dari sebuah objek. Untuk mengilustrasikan cara kerjanya, fungsi berikut ini menampilkan properti dari objek ketika kamu memasukkan objek dan nama objek sebagai argumen pada fungsi:
function showProps(obj, objName) {
var result = '';
for (var i in obj) {
// obj.hasOwnProperty() digunakan untuk menyaring properti dari rantai prototipe objek
if (obj.hasOwnProperty(i)) {
result += objName + '.' + i + ' = ' + obj[i] + '\n';
}
}
return result;
}
Jadi memanggil fungsi showProps(mobilKu, "mobilKu")
akan mengembalikan:
myCar.make = Ford
myCar.model = Mustang
myCar.year = 1969
Mengenumerasi properti dari objek
Mulai ECMAScript 5, ada tiga cara asli untuk mendaftarkan/melintasi properti objek:
- Perulangan
for...in
Metode ini melintasi semua kumpulan properti yang terdaftar dari objek dan rantai prototipenya. Object.keys(o)
Metode ini mengembalikan array dengan semua milik (tidak di rantai prototip) nama-nama ("kunci") properti terhitung dari objeko
.Object.getOwnPropertyNames(o)
Metode ini mengembalikan sebuah array berisikan semua nama-nama properti (kumpulan terhitung atau tidak) dari sebuah objeko
.
Sebelum ECMAScript 5, tidak ada cara asli untuk mendaftarkan semua properti-properti dari suatu objek. Namun, ini dapat dicapai dengan fungsi berikut:
function listAllProperties(o) {
var objectToInspect;
var result = [];
for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)) {
result = result.concat(Object.getOwnPropertyNames(objectToInspect));
}
return result;
}
Ini dapat berguna untuk memperlihatkan properti-properti tersembunyi" (properti-properti dalam rantai prototip yang tidak dapat diakses melalui objek, karena properti lain memiliki nama yang sama di rantai prototip sebelumnya). Mendaftarkan properti-properti yang dapat diakses hanya dapat dilakukan dengan menghapus duplikat di dalam array.
Membuat objek baru
JavaScript mempunyai sejumlah objek yang telah ditetapkan. Selain itu, kamu dapat membuat objek sendiri. Kamu bisa membuat sebuah objek menngunakan sebuah object initializer. Sebagai alternatif, kamu bisa membuat sebuah fungsi konstruktor lalu menginstanisasi sebuah pemanggilan objek bersama dengan operator new
.
Menggunakan object initializer
Selain membuat objek menggunakan fungsi konstruktor, kamu bisa membuat objek memakai object initializer. Kadang pemakaian object initializer disamakan dengan pembuatan objek dengan notasi literal. "Object initializer" sama dengan terminologi dalam C++.
Syntax untuk objek yang menggunakan object initializer ialah:
var obj = { property_1: value_1, // property_# bisa berupa identifier...
2: value_2, // atau angka...
// ...,
'property n': value_n }; // atau string
Di mana obj
adalah nama objek baru, setiap property_i
adalah identifier (baik nama, angka, atau string literal), dan setiap value_i
adalah expresi yang nilainya diassign ke property_i
. obj
dan assignment adalah opsional, jika kamu tidak butuh rujukan ke objek ini, kamu tak usah mengassign dia ke variabel. (Ingat bahwa kamu harus membungkus literal objek dalam tanda kurung jika objeknya muncul dalam statement diharapkan, supaya bisa membedakan mana literal dan mana statement blok.)
Object initializer adalah expresi, dan setiap object initializer mengembalikan objek baru. Objek baru dibuat saat ia muncul dalam statement yang dieksekusi. Object initializer yang identik membuat objek berbeda yang tidak akan sama bila dibandingkan. Objek dibuat seolah-olah ada panggilan new Object()
; yaitu, objek yang dibuat dari expresi literal objek adalah instance dari Object
.
Statement berikut membuat objek dan mengassign dia ke variabel x
jika dan hanya jika expresi cond
benar:
if (cond) var x = {greeting: 'hi there'};
Contoh berikut membuat myHonda
dengan tiga properti. Ingat bahwa properti engine
juga adalah objek yang punya properti sendiri.
var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}};
Kamu juga bisa menggunakan object initializer untuk membuat array. Lihat literal array.
Menggunakan fungsi konstruktor
Kamu bisa membuat objek dengan dua langkah alternatif ini:
- Definisikan tipe objek dengan menulis fungsi konstruktor. Ada konvensi dengan alasan bagus untuk menggunakan huruf kapital inisial.
- Membuat instance objek dengan
new
.
Untuk mendefinisi tipe objek, buat fungsi untuk tipe objek tersebut yang menspesifikasi nama, properti, dan metodenya. Misalnya, kamu ingin membuat tipe objek untuk mobil. Kamu ingin jenis objek ini disebut Car
, dan kamu ingin punya properti pembuat, model, dan tahun. Untuk melakukan ini, kamu akan menulis fungsi berikut:
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
Perhatikan penggunaan this
untuk mengassign nilai ke properti objek berdasarkan nilai yang diteruskan kepada fungsi.
Sekarang kamu bisa membuat objek myCar
sebagai berikut:
var mycar = new Car('Eagle', 'Talon TSi', 1993);
Statement ini membuat myCar
dan mengassign ia nilai spesifik untuk propertinya. Lalu nilai dari myCar.make
ialah string "Eagle", myCar.year
ialah integer 1993, dan seterusnya.
Kamu bisa membuat sejumlah objek Car
dengan memanggil new
. Sebagai contoh.
var kenscar = new Car('Nissan', '300ZX', 1992);
var vpgscar = new Car('Mazda', 'Miata', 1990);
Objek bisa punya properti yang merupakan objek lain. Misalnya, kamu mendefinisi objek person
sebagai berikut:
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
dan kemudian menginstantiasi dua objek person
baru sebagai berikut:
var rand = new Person('Rand McKinnon', 33, 'M');
var ken = new Person('Ken Jones', 39, 'M');
Kemudian, kamu bisa menulis ulang definisi Car
untuk memasukkan properti owner
yang mengambil objek person
sebagai berikut:
function Car(make, model, year, owner) {
this.make = make;
this.model = model;
this.year = year;
this.owner = owner;
}
Untuk menginstantiasi objek baru, gunakan ini:
var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
var car2 = new Car('Nissan', '300ZX', 1992, ken);
Perhatikan bahwa ketimbang meneruskan nilai string atau integer literal ketika membuat objek baru, statement diatas meneruskan objek rand
dan ken
sebagai argumen untuk pemilik. Lalu jika kamu mau mencari nama pemilik car2, kamu bisa mengakses properti berikut:
car2.owner.name
Ingat bahwa kamu selalu bisa menambah properti ke objek yang sudah dibuat sebelumnya. Contohnya statement
car1.color = 'black';
menambah properti color
pada car1, dan mengassign nilai "black". Ini tak mempengaruhi objek lain. Untuk menambah properti baru ke semua objek dari tipe yang sama, kamu harus menambah properti pada definisi tipe objek Car
.
Menggunakan metode Object.create
Objek bisa juga dibuat menggunakan metode Object.create()
. Metode ini bisa sangat berguna, karena ia memungkinkan kamu memilih prototipe objek untuk objek yang mau kamu buat, tanpa harus mendefinisi fungsi konstruktor.
// Enkapsulasi metode dan properti Animal
var Animal = {
type: 'Invertebrates', // Nilai properti default
displayType: function() { // Method which will display type of Animal
console.log(this.type);
}
};
// Create new animal type called animal1
var animal1 = Object.create(Animal);
animal1.displayType(); // Output:Invertebrates
// Create new animal type called Fishes
var fish = Object.create(Animal);
fish.type = 'Fishes';
fish.displayType(); // Output:Fishes
Warisan
Semua objek di javascript diwariskan setidaknya dari satu objek lain. Objek yang diwariskan disebut prototipe, dan properti warisan bisa ditemukan dalam objek prototype
dari konstruktor. Lihat Rantai warisan dan prototype untuk informasi lebih lanjut.
Mengindex properti objek
Kamu dapat merujuk ke properti dari objek menggunakan nama propertinya ataupun index urutannya. Jika kamu awalnya mendefinisi properti memakai namanya, kamu harus selalu merujuknya dengan namanya, dan jika kamu awalnya mendefinisikan properti memakai index, kamu harus selalu merujuknya dengan indexnya.
Pembatasan ini berlaku ketika kamu membuat objek dan propertinya dengan fungsi konstruktor (seperti yang kita lakukan sebelumnya dengan jenis objek Car
) dan ketika kamu mendefinisi properti individual secara explisit (misalnya, myCar.color = "ref"
). Jika kamu awalnya mendefinisi properti objek dengan index, seperti myCar[5] = "25 mpg"
, maka kamu merujuk ke properti tersebut dengan myCar[5]
.
Pengecualian dalam aturan ini adalah objek mirip-array pantulan dari HTML, seperti objek mirip-array forms
. Kamu selalu dapat merujuk ke objek dalam objek mirip-array ini menggunakan nomor urutan mereka (berdasarkan di mana mereka muncul dalam dokumen) atau nama mereka (jika didefinisi). Misalnya, jika tag <FORM>
kedua dalam dokumen punya atribut NAME
"myForm", kamu dapat merujuk ke form tersebut sebagai document.forms[1]
atau document.forms["myForm"]
atau document.forms.myForm
.
Mendefinisi properti untuk tipe objek
Kamu dapat menambah properti ke tipe objek yang didefinisi sebelumnya menggunakan properti prototype
. Ini mendefinisi properti yang dibagikan semua objek dari tipe yang dispesifikasi, bukan cuma satu instance objek. Kode berikut menambahkan sebuah properti color
ke semua objek dari tipe objek Car
, dan kemudian mengassign nilai ke properti color
dari objek car1
.
Car.prototype.color = null;
car1.color = 'black';
Lihat properti prototipe
dari objek Function
dalam referensi JavaScript untuk informasi lebih lanjut.
Mendefiniskan metode
Metode ialah fungsi yang terasosiasi dengan objek, atau sederhananya, metode ialah properti dari objek berupa fungsi. Metode didefinisi sebagai cara fungsi nornal didefinisi, kecuali mereka harus diassign sebagai properti objek. Lihat juga definisi metode untuk lebih detil. Contohnya:
objectName.methodname = functionName;
var myObj = {
myMethod: function(params) {
// ...do something
}
// OR THIS WORKS TOO
myOtherMethod(params) {
// ...do something else
}
};
Di mana objectName
adalah metode yang sudah ada, methodname
ialah nama yang kamu assign ke metode, dan functionName
adalah nama fungsi.
Lalu kamu bisa memanggil metode dalam kontex objek sebagai berikut:
object.methodname(params);
Kamu bisa mendefinisi metode untuk tipe objek dengan memasukkan sebuah definisi metode dalam fungsi konstruktor objek. Kamu bisa mendefinisi fungsi yang akan memformat dan menampilkan properti objek Car
sebelumnya; contohnya,
function displayCar() {
var result = `A Beautiful ${this.year} ${this.make} ${this.model}`;
pretty_print(result);
}
Di mana pretty_print
adalah fungsi untuk menampilkan garis horizontal dan string. Perhatikan penggunaan this
untuk merujuk ke objek yang punya metode tersebut.
Kamu bisa menjadikan fungsi ini metode Car
dengan menambah statement
this.displayCar = displayCar;
ke definisi objek. Jadi definisi penuh dari Car
sekarang akan terlihat seperti
function Car(make, model, year, owner) {
this.make = make;
this.model = model;
this.year = year;
this.owner = owner;
this.displayCar = displayCar;
}
Maka kamu bisa memanggil metode displayCar
untuk masing-masig objek sebagai berikut:
car1.displayCar();
car2.displayCar();
Menggunakan this untuk referensi Objek
JavaScript punya katakunci spesial this
, kamu bisa memakainya dalam metode untuk merujuk ke objek saat ini. Misalnya, kamu punya fungsi yang disebut validate
yang memvalidasi properti value
, yang diberikan objek dan nilai atas dan bawah:
function validate(obj, lowval, hival) {
if ((obj.value < lowval) || (obj.value > hival)) {
alert('Invalid Value!');
}
}
Kemudian kamu bisa panggil validate
di penangan event onchange
setiap elemen form, gunakan this
untuk meneruskan elemen. Seperti contoh berikut:
<input type="text" name="age" size="3"
onChange="validate(this, 18, 99)">
Secara umum, this
merujuk ke pemanggilan objek dalam metode.
Ketika dikombinasikan dengan properti form
, this
bisa mengacu ke induk objek form saat ini. Dalam contoh berikut, form myForm
berisi objek Text
dan sebuah tombol. Ketika pengguna mengklik tombol, nilai objek Text
diset ke nama form tersebut. Penangan event onclick
tombol menggunakan this.form
untuk merujuk ke induk form, myForm
.
<form name="myForm">
<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
<p><input name="button1" type="button" value="Show Form Name"
onclick="this.form.text1.value = this.form.name">
</p>
</form>
Mendefinisikan getter dan setter
Getter ialah metode yang mendapat nilai dari properti spesifik. Setter ialah metode yang mengatur nilai properti spesifik. Kamu bisa mendefinisi getter dan setter objek inti apapun yang sudah ditetapkan atau objek yang ditetapkan pengguna yang mendukung penambahan peroperti-properti baru. Syntax untuk mendefinisi getter dan setter menggunakan syntax literal objek.
Berikut ilustrasi cara getter dan setter bisa bekerja untuk objek o
yang sudah didefinisi user.
var o = {
a: 7,
get b() {
return this.a + 1;
},
set c(x) {
this.a = x / 2;
}
};
console.log(o.a); // 7
console.log(o.b); // 8
o.c = 50;
console.log(o.a); // 25
Properti objek o
adalah:
o.a
— angkao.b
— getter yang mengembalikano.a
tambah 1o.c
— setter yang mengeset nilaio.a
setengah dari nilaio.c
yang diset.
Harap diingat bahwa nama fungsi dari getter dan setter yang didefisini dalam literal objek menggunakan "[gs]et property()" (dibandingkan dengan __define[GS]etter__
) bukanlah nama getter mereka sendiri, meski syntax [gs]et propertyName(){ }
membuatmu berpikir lain. Untuk menamai fungsi dalam getter atau setter menggunakan syntax "[gs]et property()", definiskan fungsi, dengan nama explisit, secara terprogram menggunakan Object.defineProperty
(atau pengganti legacy Object.prototype.__defineGetter__
).
Kode berikut mengilustrasikan cara getter dan setter bisa memperluas prototipe Date
untuk menambah properti year
ke semua instance dari kelas Date
yang sudah didefinisi. Ia menggunakan metode kelas Date
yang sudah ada, getFullYear
dan setFullYear
untuk mendukung properti getter dan setter year
.
Statement ini mendefinisi getter dan setter untuk properti tahun:
var d = Date.prototype;
Object.defineProperty(d, 'year', {
get: function() { return this.getFullYear(); },
set: function(y) { this.setFullYear(y); }
});
Statement ini menggunakan getter dan setter dalam objek Date
:
var now = new Date();
console.log(now.year); // 2000
now.year = 2001; // 987617605170
console.log(now);
// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
Secara pinsip, getter dan setter bisa
- didefinisi menggunakan object initializers, atau
- ditambahkan kemudian ke objek apapun kapanpun menggunakan metode penambahan getter atau setter.
Ketika mendefiniisi getter dan setter menggunakan object initializer yang harus kamu lakukan adalah memprefix metode getter dengan get
dan metode setter dengan set
. Tentunya, metode getter tidak boleh mengharapkan parameter, lalu metode setter mengharapkan hanya satu parameter (nilai baru untuk diset). Contohnya:
var o = {
a: 7,
get b() { return this.a + 1; },
set c(x) { this.a = x / 2; }
};
Getter dan setter juga bisa ditambah ke objek kapanpun setelah membuat objek menggunakan metode Object.defineProperties
. Parameter pertama metode ini ialah object tempat kamu mendefinisi getter atau setter. Parameter kedua ialah objek yang nama propertinya berupa nama getter atau setter,dan yang nilai propertinya berupa objek yang mendefinisi fungsi getter atau setter. Berikut adalah contoh mendefinisi getter dan setter yang sama yang digunakan dalam contoh sebelumnya:
var o = { a: 0 };
Object.defineProperties(o, {
'b': { get: function() { return this.a + 1; } },
'c': { set: function(x) { this.a = x / 2; } }
});
o.c = 10; // Menjalankan setter, yang mengassign 10 / 2 (5) ke properti 'a'
console.log(o.b); // Menjalankan getter, yang menghasilkan a + 1 atau 6
Yang manapun dari dua form ini yang dipilih tergantung dari gaya pemrograman dan tugas di tangan. Jika kamu sudah memilih object initializer ketika mendefinisi prototipe kamu mungkin akan sering memilih form pertama. Form ini lebih compact dan natural. Namun, kalau kamu harus menambah getter dan setter nanti — karena kamu tak menulis prototipenya atau object khusus — maka form kedua menjadi satu-satunya solusi. Form kedua mungkin paling baik mewakiliki sifat dinamis JavaScript — tapi ia bisa membuat kode sulit dibaca dan dipahami.
Menghapus properti
Kamu bisa menghapus properti yang bukan warisan menggunakan operator delete
. Kode berikut menampilkan cara menghapus properti.
// Membuat objek baru, myobj, dengan dua properti, a dan b.
var myobj = new Object;
myobj.a = 5;
myobj.b = 12;
// Mengapus properti a, menyisakan myobj hanya dengan properti b.
delete myobj.a;
console.log ('a' in myobj); // menghasilkan "false"
Kamu juga bisa memakai delete
untuk menghapus variabel global jika katakunci var
tidak dipakai untuk mendeklarasi variabel itu:
g = 17;
delete g;
Membandingkan objek
Dalam JavaScript objek ialah tipe referensi. Dua objek berbeda tak akan pernah sama, meski mereka punya properti yang sama. Hanya membandingkan referensi objek yang sama dengannya menghasilkan true.
// Dua variabel, dua objek berbeda dengan properti yang sama
var fruit = {name: 'apple'};
var fruitbear = {name: 'apple'};
fruit == fruitbear; // mengembalikan false
fruit === fruitbear; // mengembalikan false
// Dua variabel, objek tunggal
var fruit = {name: 'apple'};
var fruitbear = fruit; // assign referensi objek buah ke fruitbear
// di sini fruit dan fruitbear menunjuk ke objek yang sama
fruit == fruitbear; // mengembalikan true
fruit === fruitbear; // mengembalikan true
fruit.name = 'grape';
console.log(fruitbear); // menghasilkan { name: "grape" } ketimbang { name: "apple" }
Untuk informasi lebih tentang operator pembandingan, lihat Operator pembandingan.
Lihat juga
- Untuk mempelajari lebih dalam, baca detil model objek javaScript.
- Untuk belejar tentang kelas ECMAScript 2015 (cara baru membuat objek), baca bab kelas JavaScript.