Dalam tutorial ini, anda akan belajar mengenai 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 pembina objek.
Untuk membuat objek dari fungsi konstruktor, kami menggunakan newkata kunci.
Catatan : Merupakan amalan yang baik untuk memanfaatkan huruf pertama fungsi pembina anda.
Buat Pelbagai Objek dengan Fungsi Pembina
Dalam JavaScript, anda boleh 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, apabila thiskata kunci digunakan dalam fungsi konstruktor, thismerujuk pada objek ketika objek tersebut dibuat. Sebagai contoh,
// constructor function function Person () ( this.name = 'John', ) // create object const person1 = new Person(); // access properties console.log(person1.name); // John
Oleh itu, apabila objek mengakses sifat, ia dapat langsung mengakses harta tanah sebagai person1.name.
Parameter Fungsi Pembina JavaScript
Anda juga boleh 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 menyampaikan argumen kepada fungsi konstruktor semasa penciptaan objek.
const person1 = new Person('John', 23, 'male'); const person2 = new Person('Sam', 25, 'male');
Ini membolehkan setiap objek mempunyai sifat yang berbeza. Seperti yang ditunjukkan di atas,
console.log(person1.name); memberi John
console.log(person2.name); memberi Sam
Buat Objek: Fungsi Konstruktor Vs Objek Literal
- Objek Literal umumnya digunakan untuk membuat satu objek. Fungsi konstruktor berguna jika anda ingin membuat pelbagai 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 adalah unik. Anda boleh mempunyai sifat yang sama dengan fungsi konstruktor atau menambahkan harta 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 agesifat ini unik untuk person1objek dan tidak tersedia untuk person2objek.
Namun, jika suatu objek dibuat dengan objek objek, dan jika suatu pemboleh ubah didefinisikan dengan nilai objek tersebut, setiap perubahan nilai pemboleh ubah akan mengubah objek asalnya. 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
Apabila objek dibuat dengan objek objek, pemboleh ubah objek yang berasal dari objek tersebut akan bertindak sebagai klon objek asal. Oleh itu, sebarang perubahan yang anda buat dalam satu objek juga akan tercermin dalam objek yang lain.
Menambah Sifat dan Kaedah dalam Objek
Anda boleh menambahkan sifat atau kaedah 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();
Pengeluaran
hello Uncaught TypeError: person2.greet bukan fungsi
Dalam contoh di atas, harta baru genderdan kaedah baru greet()ditambahkan ke person1objek.
Walau bagaimanapun, harta dan kaedah baru ini hanya ditambahkan person1. Anda tidak dapat mengakses genderatau greet()dari person2. Oleh itu program ini memberikan kesilapan ketika kita cuba mengaksesperson2.greet();
Prototaip Objek JavaScript
Anda juga boleh menambahkan sifat dan kaedah ke fungsi konstruktor menggunakan prototaip . 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 mengetahui lebih lanjut mengenai prototaip, lawati Prototaip JavaScript.
Pembina Dalam JavaScript
JavaScript juga mempunyai konstruktor terbina dalam. Sebahagian daripadanya 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, nombor dapat dibuat sebagai objek dengan:
const number = new Number (57); console.log(number); // 57
Dalam JavaScript, booleans dapat dibuat sebagai objek dengan:
const count = new Boolean(true); console.log(count); // true
Catatan : Sebaiknya gunakan jenis data primitif dan membuatnya dengan cara biasa, seperti const name = 'John';, const number = 57;danconst count = true;
Anda tidak boleh menyatakan rentetan, nombor, dan nilai boolean sebagai objek kerana memperlahankan program.
Catatan : Dalam JavaScript, kata kunci classdiperkenalkan dalam ES6 (ES2015) yang juga memungkinkan kita membuat objek. Kelas serupa dengan fungsi pembina dalam JavaScript. Untuk mengetahui lebih lanjut, lawati Kelas JavaScript.
