memperkenalkan
Setiap orang akrab dengan konstruktor, tetapi jika Anda seorang pemula, masih perlu untuk memahami apa itu konstruktor. Konstruktor digunakan untuk membuat jenis objek tertentu - tidak hanya menyatakan objek yang digunakan, tetapi juga menerima parameter untuk mengatur nilai anggota objek ketika objek dibuat untuk pertama kalinya. Anda dapat menyesuaikan konstruktor Anda sendiri dan mendeklarasikan properti atau metode objek tipe khusus.
Penggunaan dasar
Dalam JavaScript, konstruktor biasanya dianggap digunakan untuk mengimplementasikan contoh. JavaScript tidak memiliki konsep kelas, tetapi memiliki konstruktor khusus. Gunakan kata kunci baru untuk memanggil fungsi awal yang ditentukan. Anda dapat memberi tahu JavaScript bahwa Anda ingin membuat objek baru dan bahwa deklarasi anggota objek baru didefinisikan dalam konstruktor. Di dalam konstruktor, kata kunci ini mengacu pada objek yang baru dibuat. Penggunaan dasarnya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
Function Car (Model, Year, Miles) {
this.model = model;
this.year = tahun;
this.miles = mil;
this.output = function () {
kembalikan this.model + "kiri" + this.miles + "km";
};
}
var tom = mobil baru ("Paman", 2009, 20000);
var dudu = mobil baru ("dudu", 2010, 5000);
console.log (tom.output ());
console.log (dudu.output ());
Contoh di atas adalah pola konstruktor yang sangat sederhana, tetapi sedikit masalah. Pertama -tama, sangat merepotkan untuk menggunakan warisan. Kedua, output () didefinisikan ulang setiap kali objek dibuat. Cara terbaik adalah membiarkan semua contoh tipe mobil berbagi metode output () ini, sehingga jika ada sejumlah besar contoh, itu akan menghemat banyak memori.
Untuk mengatasi masalah ini, kita dapat menggunakan metode berikut:
Salinan kode adalah sebagai berikut:
Function Car (Model, Year, Miles) {
this.model = model;
this.year = tahun;
this.miles = mil;
this.output = formatCar;
}
format formatCar () {
kembalikan this.model + "kiri" + this.miles + "km";
}
Meskipun metode ini tersedia, kami memiliki metode yang lebih baik berikut.
Konstruktor dan prototipe
Ada properti prototipe di javascript yang disebut prototipe. Ketika konstruktor dipanggil untuk membuat objek, semua properti prototipe konstruktor tersedia pada objek yang baru dibuat. Dengan cara ini, beberapa instance objek mobil dapat berbagi prototipe yang sama. Mari kita perluas kode dalam contoh di atas:
Salinan kode adalah sebagai berikut:
Function Car (Model, Year, Miles) {
this.model = model;
this.year = tahun;
this.miles = mil;
}
/*
Catatan: Di sini kami menggunakan objek.prototype. nama metode, bukan objek.prototype
Ini terutama digunakan untuk menghindari penulisan ulang objek prototipe prototipe
*/
Car.prototype.output = function () {
kembalikan this.model + "kiri" + this.miles + "km";
};
var tom = mobil baru ("Paman", 2009, 20000);
var dudu = mobil baru ("dudu", 2010, 5000);
console.log (tom.output ());
console.log (dudu.output ());
Di sini, output () contoh tunggal dapat dibagikan dan digunakan dalam semua instance objek mobil.
Juga: kami merekomendasikan agar konstruktor mulai dengan huruf kapital untuk membedakan fungsi biasa.
Bisakah Anda menggunakan yang baru?
Dalam contoh di atas, mobil fungsi dibuat menggunakan baru untuk membuat objek. Apakah hanya ada satu arah? Bahkan, ada cara lain, mari kita daftar dua:
Salinan kode adalah sebagai berikut:
Function Car (Model, Year, Miles) {
this.model = model;
this.year = tahun;
this.miles = mil;
// Kustomisasi output output
this.output = function () {
kembalikan this.model + "kiri" + this.miles + "km";
}
}
// Metode 1: Dipanggil sebagai fungsi
Mobil ("Paman", 2009, 20000); // tambahkan ke objek jendela
console.log (window.output ());
// Metode 2: Panggilan dalam lingkup objek lain
var o = objek baru ();
Car.call (o, "dudu", 2010, 5000);
console.log (o.output ());
Metode 1 dari kode ini sedikit istimewa. Jika baru memanggil fungsi secara langsung, ini menunjuk ke jendela objek global. Mari kita verifikasi:
Salinan kode adalah sebagai berikut:
// sebagai panggilan fungsi
var tom = mobil ("paman", 2009, 20000);
console.log (typeof tom); // "belum diartikan"
console.log (window.output ()); // "Paman berjalan 20.000 kilometer"
Pada saat ini, objek TOM tidak terdefinisi, dan window.output () akan menghasilkan hasilnya dengan benar. Jika Anda menggunakan kata kunci baru, tidak ada masalah seperti itu. Verifikasi adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
// Gunakan kata kunci baru
var tom = mobil baru ("Paman", 2009, 20000);
console.log (typeof tom); // "objek"
console.log (tom.output ()); // "Paman berjalan 20.000 kilometer"
Memaksa baru
Contoh di atas menunjukkan masalah tidak menggunakan yang baru. Jadi adakah cara bagi konstruktor untuk memaksa kata kunci baru? Jawabannya adalah ya, kode di atas:
Salinan kode adalah sebagai berikut:
Function Car (Model, Year, Miles) {
if (! (Contoh mobil ini)) {
mengembalikan mobil baru (model, tahun, mil);
}
this.model = model;
this.year = tahun;
this.miles = mil;
this.output = function () {
kembalikan this.model + "kiri" + this.miles + "km";
}
}
var tom = mobil baru ("Paman", 2009, 20000);
var dudu = mobil ("dudu", 2010, 5000);
console.log (typeof tom); // "objek"
console.log (tom.output ()); // "Paman berjalan 20.000 kilometer"
console.log (tipe dudu); // "objek"
console.log (dudu.output ()); // "Dudu berjalan 5000 kilometer"
Dengan menilai apakah contoh ini adalah mobil, kami memutuskan untuk mengembalikan mobil baru atau terus menjalankan kode. Jika kata kunci baru digunakan, (contoh mobil ini) benar, dan penugasan parameter berikut akan berlanjut. Jika baru tidak digunakan, (contoh mobil ini) salah, dan contoh baru akan dikembalikan lagi.
Fungsi pembungkus asli
Ada 3 fungsi pembungkus asli di JavaScript: Number, String, Boolean, Terkadang keduanya digunakan:
Salinan kode adalah sebagai berikut:
// Gunakan fungsi pembungkus asli
var s = string baru ("string saya");
var n = angka baru (101);
var b = boolean baru (true);
// Rekomendasikan ini
var s = "string saya";
var n = 101;
var b = true;
Direkomendasikan, hanya gunakan fungsi pembungkus ini saat Anda ingin melestarikan keadaan numerik. Untuk perbedaannya, Anda dapat merujuk pada kode berikut:
Salinan kode adalah sebagai berikut:
// string asli
var salam = "halo disana";
// Gunakan metode split () untuk membagi
sapa.split ('') [0]; // "Halo"
// Menambahkan atribut baru ke jenis asli tidak akan melaporkan kesalahan
salam.smile = true;
// Nilai ini tidak dapat diperoleh (kami berbicara tentang mengapa dalam Bab 18 Implementasi ECMascript)
console.log (typeof salam.smile); // "belum diartikan"
// string asli
var salam = string baru ("halo disana");
// Gunakan metode split () untuk membagi
sapa.split ('') [0]; // "Halo"
// Menambahkan atribut baru ke jenis fungsi pembungkus tidak akan melaporkan kesalahan
salam.smile = true;
// Properti baru dapat diakses secara normal
console.log (typeof salam.smile); // "Boolean"
Meringkaskan
Bab ini terutama menjelaskan perbedaan antara penggunaan mode konstruktor, metode panggilan dan kata kunci baru. Saya harap semua orang akan memperhatikannya saat menggunakannya.
Referensi: http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#constructorpatternjavascript