Home » Javascript » Konstruktor Object JavaScript: Contoh – Code dan Cara Membuatnya

Konstruktor Object JavaScript: Contoh – Code dan Cara Membuatnya

by Catur Kurnia Sari
by Catur Kurnia Sari

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.

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)

You may also like