Dalam tutorial ini, Anda akan belajar tentang fungsi konstruktor JavaScript dengan bantuan contoh.
Dalam JavaScript, fungsi konstruktor digunakan untuk membuat objek. Sebagai contoh,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // create an object const person = new Person();
Dalam contoh di atas, function Person()adalah fungsi konstruktor objek.
Untuk membuat objek dari fungsi konstruktor, kami menggunakan newkata kunci.
Catatan : Merupakan praktik yang baik untuk menggunakan huruf besar pada huruf pertama dari fungsi konstruktor Anda.
Buat Banyak Objek dengan Fungsi Pembuat
Dalam JavaScript, Anda dapat membuat banyak objek dari fungsi konstruktor. Sebagai contoh,
// constructor function function Person () ( this.name = 'John', this.age = 23, this.greet = function () ( console.log('hello'); ) ) // create objects const person1 = new Person(); const person2 = new Person(); // access properties console.log(person1.name); // John console.log(person2.name); // John
Dalam program di atas, dua objek dibuat menggunakan fungsi konstruktor yang sama.
JavaScript Kata Kunci ini
Dalam JavaScript, ketika thiskata kunci digunakan dalam fungsi konstruktor, thismengacu pada objek saat objek dibuat. Sebagai contoh,
// constructor function function Person () ( this.name = 'John', ) // create object const person1 = new Person(); // access properties console.log(person1.name); // John
Karenanya, ketika sebuah objek mengakses properti, ia dapat langsung mengakses properti sebagai person1.name.
Parameter Fungsi Pembuat JavaScript
Anda juga dapat membuat fungsi konstruktor dengan parameter. Sebagai contoh,
// constructor function function Person (person_name, person_age, person_gender) ( // assigning parameter values to the calling object this.name = person_name, this.age = person_age, this.gender = person_gender, this.greet = function () ( return ('Hi' + ' ' + this.name); ) ) // creating objects const person1 = new Person('John', 23, 'male'); const person2 = new Person('Sam', 25, 'female'); // accessing properties console.log(person1.name); // "John" console.log(person2.name); // "Sam"
Dalam contoh di atas, kami telah memberikan argumen ke fungsi konstruktor selama pembuatan objek.
const person1 = new Person('John', 23, 'male'); const person2 = new Person('Sam', 25, 'male');
Ini memungkinkan setiap objek memiliki properti yang berbeda. Seperti yang ditunjukkan di atas,
console.log(person1.name); memberi John
console.log(person2.name); memberi Sam
Membuat Objek: Fungsi Pembuat Vs Objek Literal
- Object Literal umumnya digunakan untuk membuat satu objek. Fungsi konstruktor berguna jika Anda ingin membuat banyak objek. Sebagai contoh,
// using object literal let person = ( name: 'Sam' )
// using constructor function function Person () ( this.name = 'Sam' ) let person1 = new Person(); let person2 = new Person();
- Setiap objek yang dibuat dari fungsi konstruktor bersifat unik. Anda dapat memiliki properti yang sama dengan fungsi konstruktor atau menambahkan properti baru ke satu objek tertentu. Sebagai contoh,
// using constructor function function Person () ( this.name = 'Sam' ) let person1 = new Person(); let person2 = new Person(); // adding new property to person1 person1.age = 20;
Sekarang ageproperti ini unik untuk person1objek dan tidak tersedia untuk person2objek.
Namun, jika sebuah objek dibuat dengan literal objek, dan jika sebuah variabel ditentukan dengan nilai objek tersebut, setiap perubahan dalam nilai variabel akan mengubah objek aslinya. Sebagai contoh,
// using object lateral let person = ( name: 'Sam' ) console.log(person.name); // Sam let student = person; // changes the property of an object student.name = 'John'; // changes the origins object property console.log(person.name); // John
Saat sebuah objek dibuat dengan literal objek, variabel objek apa pun yang diturunkan dari objek tersebut akan bertindak sebagai tiruan dari objek aslinya. Karenanya, setiap perubahan yang Anda buat pada satu objek juga akan tercermin di objek lainnya.
Menambahkan Properti dan Metode di Objek
Anda dapat menambahkan properti atau metode dalam objek seperti ini:
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects let person1 = new Person(); let person2 = new Person(); // adding property to person1 object person1.gender = 'male'; // adding method to person1 object person1.greet = function () ( console.log('hello'); ) person1.greet(); // hello // Error code // person2 doesn't have greet() method person2.greet();
Keluaran
hello Uncaught TypeError: person2.greet bukanlah sebuah fungsi
Dalam contoh di atas, properti baru genderdan metode baru greet()ditambahkan ke person1objek.
Namun, properti dan metode baru ini hanya ditambahkan ke person1. Anda tidak dapat mengakses genderatau greet()dari person2. Karenanya program memberikan kesalahan ketika kami mencoba mengaksesperson2.greet();
Prototipe Objek JavaScript
Anda juga dapat menambahkan properti dan metode ke fungsi konstruktor menggunakan prototipe . Sebagai contoh,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects let person1 = new Person(); let person2 = new Person(); // adding new property to constructor function Person.prototype.gender = 'Male'; console.log(person1.gender); // Male console.log(person2.gender); // Male
Untuk mempelajari lebih lanjut tentang prototipe, kunjungi Prototipe JavaScript.
Pembuat Bawaan JavaScript
JavaScript juga memiliki konstruktor bawaan. Beberapa dari mereka adalah:
let a = new Object(); // A new Object object let b = new String(); // A new String object let c = new Number(); // A new Number object let d = new Boolean(); // A new Boolean object
Dalam JavaScript, string dapat dibuat sebagai objek dengan:
const name = new String ('John'); console.log(name); // "John"
Dalam JavaScript, angka dapat dibuat sebagai objek dengan:
const number = new Number (57); console.log(number); // 57
Dalam JavaScript, boolean dapat dibuat sebagai objek dengan:
const count = new Boolean(true); console.log(count); // true
Catatan : Direkomendasikan untuk menggunakan tipe data primitif dan membuatnya dengan cara biasa, seperti const name = 'John';, const number = 57;danconst count = true;
Anda tidak boleh mendeklarasikan string, angka, dan nilai boolean sebagai objek karena mereka memperlambat program.
Catatan : Dalam JavaScript, kata kunci classdiperkenalkan di ES6 (ES2015) yang juga memungkinkan kita membuat objek. Kelas mirip dengan fungsi konstruktor di JavaScript. Untuk mempelajari lebih lanjut, kunjungi Kelas JavaScript.
