Contoh:
<!DOCTYPE html> <html> <body> <h2>Konstruktor Objek JavaScript</h2> <p id="demo"></p> <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 var myFather = new Person("John", "Doe", 50, "blue"); // Display age document.getElementById("demo").innerHTML = "Ayah saya adalah " + myFather.age + "."; </script> </body> </html>
Implementasi yang baik untuk menamai fungsi konstruktor adalah dengan menggunakan huruf besar pada huruf pertama.
Section Artikel
Object Types (Blueprints) (Classes)
Contoh dari bab sebelumnya tidak lengkap hanya menunjukan cara membuat objek tunggal.
Terkadang kita memerlukan “blueprint” untuk membuat banyak objek dengan “tipe” yang sama.
Cara untuk membuat “tipe objek”, adalah dengan menggunakan fungsi konstruktor objek.
Dalam contoh di atas, fungsi Person() adalah fungsi konstruktor objek.
Objek dengan tipe yang sama dibuat dengan memanggil fungsi konstruktor dengan kata kunci new:
<!DOCTYPE html> <html> <body> <h2>Konstruktor Objek JavaScript</h2> <p id="demo"></p> <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 two Person objects var myFather = new Person("John", "Doe", 50, "blue"); var myMother = new Person("Sally", "Rally", 48, "green"); // Display age document.getElementById("demo").innerHTML = "Ayah saya adalah " + myFather.age + ". My mother is " + myMother.age + "."; </script> </body> </html>
Keyword this
Dalam JavaScript, yang disebut this adalah objek yang “memiliki” kode.
Nilai this, bila digunakan dalam suatu objek, adalah objek itu sendiri.
Dalam fungsi konstruktor, this tidak memiliki nilai. this adalah pengganti untuk objek baru. Nilai this akan menjadi objek baru saat objek baru dibuat.
Perhatikan bahwa this bukan variabel. Tetapi this adalah kata kunci dan kita tidak dapat mengubah nilainya.
Menambahkan Properti ke Objek
Menambahkan properti baru ke objek yang sudah ada adalah hal mudah.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>Konstruktor Objek JavaScript</h2>
<p id="demo"></p>
<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 2 Person objects
var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");
// Add nationality to first object
myFather.nationality = "English";
// Display nationality
document.getElementById("demo").innerHTML =
"Ayah saya adalah " + myFather.nationality;
</script>
</body>
</html>
Properti itu akan ditambahkan ke myFather. Tidak untuk myMother dan juga tidak untuk objek Person lain.
Menambahkan Metode ke Objek
Menambahkan metode baru ke objek yang ada itu mudah:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Constructors</h2>
<p id="demo"></p>
<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 2 Person objects
var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");
// Add a name method to first object
myFather.name = function() {
return this.firstName + " " + this.lastName;
};
// Display full name
document.getElementById("demo").innerHTML =
"Ayah saya adalah " + myFather.name();
</script>
</body>
</html>
Metode ini akan ditambahkan ke myFather. Bukan untuk myMother dan tidak untuk objek Person lain).
Menambahkan Properti ke Konstruktor
Anda tidak dapat menambahkan properti baru ke konstruktor objek dengan cara yang sama seperti Anda menambahkan properti baru ke objek yang sudah ada.
Berikut contohnya:
<!DOCTYPE html>
<html>
<body>
<h2>Konstruktor Objek JavaScript</h2>
<p> Anda tidak dapat menambahkan properti baru ke fungsi konstruktor. </p>
<p id="demo"></p>
<script>
// Constructor function for Person objects
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// You can NOT add a new property to a constructor function
Person.nationality = "English";
// Create 2 Person objects
var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");
// Display nationality
document.getElementById("demo").innerHTML =
"Kebangsaan ayah saya adalah " + myFather.nationality;
</script>
</body>
</html>
Untuk menambahkan properti baru ke konstruktor, Anda harus menambahkannya ke fungsi konstruktor, caranya:
<!DOCTYPE html>
<html>
<body>
<p> Anda tidak dapat menambahkan properti baru ke fungsi konstruktor. </p>
<p id="demo"></p>
<script>
// Constructor function for Person objects
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.nationality = "English";
}
// Create 2 Person objects
var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");
// Display nationality
document.getElementById("demo").innerHTML =
"Ayah saya adalah " + myFather.nationality + ". My mother is " + myMother.nationality;
</script>
</body>
</html>
Dengan cara ini properti objek dapat memiliki nilai default.
Menambahkan Metode ke Konstruktor
Dengan menggunakan fungsi konstruktor juga dapat menentukan metode.
Contoh:
<!DOCTYPE html>
<html>
<body>
<p> Anda tidak dapat menambahkan properti baru ke fungsi konstruktor. </p>
<p id="demo"></p>
<script>
// Constructor function for Person objects
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.name = function() {
return this.firstName + " " + this.lastName
};
}
// Create a Person object
var myFather = new Person("John", "Doe", 50, "blue");
// Display full name
document.getElementById("demo").innerHTML =
"Ayah saya adalah " + myFather.name();
</script>
</body>
</html>
Anda tidak dapat menambahkan metode baru ke konstruktor objek dengan cara yang sama seperti Anda menambahkan metode baru ke objek yang sudah ada.
Menambahkan metode ke konstruktor objek harus dilakukan di dalam fungsi konstruktor.
Contoh:
function Person(firstName, lastName, age, eyeColor) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
this.changeName = function (name) {
this.lastName = name;
};
}Fungsi changeName() memberikan nilai nama ke properti lastName orang tersebut.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>Konstruktor Objek JavaScript</h2>
<p id="demo"></p>
<script>
// Constructor function for Person objects
function Person(firstName,lastName,age,eyeColor) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
this.changeName = function (name) {
this.lastName = name;
}
}
// Create a Person object
var myMother = new Person("Sally","Rally",48,"green");
// Change last name
myMother.changeName("Doe");
// Display last name
document.getElementById("demo").innerHTML =
"Nama belakang ibuku adalah " + myMother.lastName;
</script>
</body>
</html>
JavaScript tahu Person yang kita maksud dengan “menggantikan” menjadi myMother.
Konstruktor JavaScript Bawaan
JavaScript memiliki konstruktor bawaan untuk objek asli:
<!DOCTYPE html> <html> <body> <h2>Konstruktor Objek JavaScript</h2> <p id="demo"></p> <script> var x1 = new Object(); // A new Object object var x2 = new String(); // A new String object var x3 = new Number(); // A new Number object var x4 = new Boolean(); // A new Boolean object var x5 = new Array(); // A new Array object var x6 = new RegExp(); // A new RegExp object var x7 = new Function(); // A new Function object var x8 = new Date(); // A new Date object // Display the type of all objects document.getElementById("demo").innerHTML = "x1: " + typeof x1 + "<br>" + "x2: " + typeof x2 + "<br>" + "x3: " + typeof x3 + "<br>" + "x4: " + typeof x4 + "<br>" + "x5: " + typeof x5 + "<br>" + "x6: " + typeof x6 + "<br>" + "x7: " + typeof x7 + "<br>" + "x8: " + typeof x8 + "<br>"; </script> <p> Tidak perlu menggunakan String(), Number(), Boolean(), Array(), dan RegExp() </p> <p> Baca tutorial JavaScript. </p> </body> </html>
Objek Math() tidak ada dalam daftar. Math adalah objek global. Kata kunci new tidak dapat digunakan untuk Math.
Tahukah kamu?
Seperti yang Anda lihat di atas, JavaScript memiliki versi objek dari tipe data primitif String, Number, dan Boolean. Tetapi tidak ada alasan untuk membuat objek yang kompleks. Nilai primitif jauh lebih cepat.
JUGA:
Gunakan literal objek {} sebagai ganti new Object().
Gunakan string literal “” bukan new String().
Gunakan literal angka 12345, bukan new Number().
Gunakan literal boolean true/false alih-alih new Boolean().
Gunakan literal array [] sebagai ganti new Array().
Gunakan literal pola / () / sebagai ganti new RegExp().
Gunakan ekspresi fungsi () {} alih-alih new Function().
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x1 = {}; // object
var x2 = ""; // string
var x3 = 0; // number
var x4 = false; // boolean
var x5 = []; // object (not array)
var x6 = /()/; // object
var x7 = function(){}; // function
// Display the type of all
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>";
</script>
</body>
</html>
Objek String
Biasanya, string dibuat sebagai primitif: var firstName = “John”
Tetapi string juga dapat dibuat sebagai objek menggunakan kata kunci new: var firstName = new String (“John”)
Objek Angka
Biasanya, angka dibuat sebagai primitive : var x = 123
Tapi bilangan juga bisa dibuat sebagai objek menggunakan kata kunci new: var x = new Number (123)
Objek Boolean
Biasanya, boolean dibuat sebagai primitive: var x = false
Tetapi boolean juga dapat dibuat sebagai objek menggunakan kata kunci new: var x = new Boolean (false)
