Pemahaman mendalam tentang siri JavaScript (26): Penjelasan terperinci tentang corak pembina corak reka bentuk

Pemahaman mendalam tentang siri JavaScript (26): Penjelasan terperinci tentang corak pembina corak reka bentuk_kemahiran javascript

WBOY

Lepaskan： 2016-05-16 16:11:28

asal

794 orang telah melayarinya

Pengenalan

Semua orang sudah biasa dengan pembina, tetapi jika anda seorang pemula, anda masih perlu memahami apa itu pembina. Pembina digunakan untuk mencipta objek jenis tertentu - bukan sahaja ia mengisytiharkan objek untuk digunakan, pembina juga boleh menerima parameter untuk menetapkan nilai ahli objek apabila objek itu mula-mula dicipta. Anda boleh menyesuaikan pembina anda sendiri dan mengisytiharkan sifat atau kaedah objek jenis tersuai di dalamnya.

Penggunaan asas

Dalam JavaScript, pembina biasanya digunakan untuk melaksanakan kejadian JavaScript tidak mempunyai konsep kelas, tetapi terdapat pembina khas. Dengan memanggil fungsi yang ditentukan menggunakan kata kunci baharu, anda boleh memberitahu JavaScript bahawa anda ingin mencipta objek baharu dan pengisytiharan ahli objek baharu semuanya ditakrifkan dalam pembina. Di dalam pembina, kata kunci ini merujuk kepada objek yang baru dibuat. Penggunaan asas adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

fungsi Kereta(model, tahun, batu) {
This.model = model;
This.year = tahun;
This.miles = batu;
This.output= function () {
pulangkan this.model "Gone" this.miles "Kilometers";
};
}

var tom= Kereta baru("Pakcik", 2009, 20000);
var dudu= New Car("Dudu", 2010, 5000);

console.log(tom.output());
console.log(dudu.output());

Contoh di atas ialah corak pembina yang sangat mudah, tetapi terdapat beberapa masalah. Pertama sekali, menggunakan warisan sangat menyusahkan Kedua, output() ditakrifkan semula setiap kali objek dibuat Cara terbaik adalah dengan membenarkan semua contoh jenis Kereta berkongsi kaedah output() ini, supaya jika terdapat besar bilangan kejadian Jika ya, ia akan menjimatkan banyak memori.

Untuk menyelesaikan masalah ini, kita boleh menggunakan kaedah berikut:

Salin kod Kod adalah seperti berikut:

fungsi Kereta(model, tahun, batu) {
This.model = model;
This.year = tahun;
This.miles = batu;
This.output= formatCar;
}

format fungsiCar() {
Kembalikan this.model "Gone" this.miles "Kilometers";
}

Walaupun kaedah ini tersedia, kami mempunyai kaedah yang lebih baik seperti berikut.

Pembina dan prototaip

Fungsi dalam JavaScript mempunyai atribut prototaip yang dipanggil prototaip Apabila pembina dipanggil untuk mencipta objek, semua atribut prototaip pembina tersedia pada objek yang baru dibuat. Mengikut ini, berbilang contoh objek Kereta boleh berkongsi prototaip yang sama Mari kembangkan kod contoh di atas:

Salin kod Kod adalah seperti berikut:

fungsi Kereta(model, tahun, batu) {
This.model = model;
This.year = tahun;
This.miles = batu;
}

/*
Nota: Di sini kami menggunakan nama kaedah Object.prototype dan bukannya Object.prototype
Digunakan terutamanya untuk mengelak daripada menulis semula objek prototaip prototaip yang ditentukan
*/
Car.prototype.output= function () {
Kembalikan this.model "Gone" this.miles "Kilometers";
};

var tom = Kereta baru("Pakcik", 2009, 20000);
var dudu = Kereta baharu("Dudu", 2010, 5000);

console.log(tom.output());
console.log(dudu.output());

Di sini, contoh tunggal output() boleh dikongsi antara semua kejadian objek Kereta.

Juga: Kami mengesyorkan agar pembina bermula dengan huruf besar untuk membezakannya daripada fungsi biasa.

Bolehkah saya hanya menggunakan yang baru?

Contoh di atas semuanya menggunakan baru untuk mencipta objek untuk kereta fungsi Adakah ini satu-satunya cara? Sebenarnya ada cara lain, kami senaraikan dua:

Salin kod Kod adalah seperti berikut:

fungsi Kereta(model, tahun, batu) {
This.model = model;
This.year = tahun;
This.miles = batu;
// Sesuaikan kandungan output
This.output = fungsi () {
pulangkan this.model "Gone" this.miles "Kilometers";
}
}

//Kaedah 1: Panggilan sebagai fungsi
Kereta("Pakcik", 2009, 20000); //Tambah pada objek tingkap
console.log(window.output());

//Kaedah 2: Panggilan dalam skop objek lain
var o = Objek baharu();
Car.call(o, "Dudu", 2010, 5000);
console.log(o.output());

Kaedah 1 kod ini agak istimewa Jika anda tidak menggunakan baharu untuk memanggil fungsi secara langsung, ini menghala ke tetingkap objek global. Mari sahkannya:

Salin kod Kod adalah seperti berikut:

//Panggil sebagai fungsi

var tom = Kereta("Pakcik", 2009, 20000);

console.log(typeof tom); // "tidak ditentukan"

console.log(window.output()); // "Pakcik berjalan 20,000 kilometer"

Pada masa ini, objek tom tidak ditentukan, dan window.output() akan mengeluarkan hasil dengan betul Walau bagaimanapun, jika anda menggunakan kata kunci baharu, tidak akan ada masalah seperti berikut:

Salin kod Kod adalah seperti berikut:

//Gunakan kata kunci baharu 

var tom = Kereta baru("Pakcik", 2009, 20000);

console.log(typeof tom); // "objek"

console.log(tom.output()); // "Pakcik telah berjalan sejauh 20,000 kilometer"

Paksa baharu

Contoh di atas menunjukkan masalah tidak menggunakan baharu, jadi adakah cara untuk kita memaksa pembina menggunakan kata kunci baharu Jawapannya ya, kod di atas:

Salin kod Kod adalah seperti berikut:

fungsi Kereta(model, tahun, batu) {
Jika (!(contoh Kereta ini)) {
pulangkan Kereta baharu(model, tahun, batu);
}
This.model = model;
This.year = tahun;
This.miles = batu;
This.output = fungsi () {
pulangkan this.model "Gone" this.miles "Kilometers";
}
}

var tom = Kereta baru("Pakcik", 2009, 20000);
var dudu = Kereta("Dudu", 2010, 5000);

console.log(typeof tom); // "objek"
console.log(tom.output()); // "Pakcik telah berjalan sejauh 20,000 kilometer"
console.log(typeof dudu); // "objek"
console.log(dudu.output()); // "Dudu berjalan sejauh 5000 kilometer"

Dengan menilai sama ada contoh bagi ini ialah Kereta, anda boleh memutuskan sama ada untuk mengembalikan Kereta baharu atau terus melaksanakan kod tersebut Jika kata kunci baharu digunakan, (contoh Kereta ini) adalah benar, dan penetapan parameter berikut akan diteruskan tidak digunakan, (contoh Kereta ini) adalah palsu, dan kejadian baharu akan dikembalikan.

Fungsi pembalut asal

Terdapat tiga fungsi pembalut primitif dalam JavaScript: nombor, rentetan, boolean Kadangkala kedua-duanya digunakan:

Salin kod Kod adalah seperti berikut:

// Gunakan fungsi pembungkus asal
var s = new String("rentetan saya");
var n = Nombor baharu(101);
var b = Boolean baharu(benar);

// Ini disyorkan
var s = "rentetan saya";
var n = 101;
var b = benar;

Adalah disyorkan untuk menggunakan fungsi pembungkus ini hanya apabila anda ingin mengekalkan keadaan berangka Untuk perbezaan, sila rujuk kod berikut:

Salin kod Kod adalah seperti berikut:

// rentetan asal
var greet = "Hello";
// Pisahkan
menggunakan kaedah split(). greet.split(' ')[0]; // "Hello"
// Tiada ralat akan dilaporkan apabila menambahkan atribut baharu pada jenis primitif
salam.senyum = benar;
// Tiada cara untuk mendapatkan nilai ini (kami bercakap tentang sebab dalam Bab 18 Pelaksanaan ECMAScript)
console.log(typeof greet.smile); // "undefined"

//rentetan asal
var greet = new String("Hello there");
// Pisahkan
menggunakan kaedah split(). greet.split(' ')[0]; // "Hello"
// Menambah atribut baharu pada jenis fungsi pembungkus tidak akan menyebabkan ralat
salam.senyum = benar;
// Sifat baharu boleh diakses seperti biasa
console.log(typeof greet.smile); // "boolean"

Ringkasan

Bab ini menerangkan terutamanya cara menggunakan corak pembina, cara memanggilnya dan perbezaan antara kata kunci baharu saya harap semua orang akan memberi perhatian kepadanya apabila menggunakannya.

Rujukan: http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#constructorpatternjavascript