masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > Penjelasan terperinci tentang pengetahuan constructor_basic Javascript

Penjelasan terperinci tentang pengetahuan constructor_basic Javascript

WBOY
Lepaskan： 2016-05-16 16:33:07
asal
1443 orang telah melayarinya

1. Apakah itu pembina

Dalam sesetengah bahasa berorientasikan objek, seperti Java, C dan PHP, pembina adalah sangat biasa. Dalam Javascript, pembina ialah fungsi biasa, yang boleh dipanggil menggunakan operator baharu dan menjana objek jenis khas.

Salin kod Kod adalah seperti berikut:

// "Benjamin" ialah pembina
var benjamin = Benjamin baharu("zuojj", "lelaki");

Dalam contoh di atas, benjamin ialah objek Benjamin, jadi bagaimanakah ia instantiated?

Salin kod Kod adalah seperti berikut:

fungsi Benjamin(nama pengguna, jantina) {
This.username = nama pengguna;
This.sex = seks;
}
var benjamin = Benjamin baharu("zuojj", "lelaki");
//Output: Benjamin{jantina: "lelaki", nama pengguna: "zuojj"}
console.log(benjamin);

Seperti yang dapat kita lihat, pembina "Benjamin" hanya menerima parameter yang dihantar dan memberikannya kepada objek ini. Ini kerana apabila pembina dipanggil oleh pengendali baharu, objek pembina ini diberikan objek yang dikembalikan oleh operasi baharu.
Ini bermakna kod di atas adalah bersamaan dengan:

Salin kod Kod adalah seperti berikut:

benjamin = {
"nama pengguna": "zuojj",
"seks": "lelaki"
}

2. Mengapa menggunakan pembina

Terdapat beberapa sebab mengapa pembina digunakan:
1. Menggunakan pembina bermakna semua objek ini boleh dibuat menggunakan struktur asas yang sama
2. Menggunakan pembina bermakna objek "benjamin" ditandakan secara eksplisit sebagai contoh fungsi "Benjamin"

Salin kod Kod adalah seperti berikut:

fungsi Benjamin(nama pengguna, jantina) {
This.username = nama pengguna;
This.sex = seks;
}
var benjamin = Benjamin baharu("zuojj", "lelaki");
var ben = {
"nama pengguna": "zuojj",
"seks": "lelaki"
}
//Output: benar
console.log(benjamin instanceof Benjamin);
//Output: palsu
console.log(ben instanceof Benjamin);

3. Menggunakan pembina bermakna kita boleh menentukan kaedah awam pada prototaip untuk perkongsian dengan berbilang kejadian

Salin kod Kod adalah seperti berikut:

fungsi Benjamin(nama pengguna, jantina) {
This.username = nama pengguna;
This.sex = seks;
}
Benjamin.prototype.getName = function() {
kembalikan this.username;
}
var benjamin = Benjamin baharu("zuojj", "lelaki");
var ben = Benjamin baru("lemon", "perempuan");
//Output: zuojj
console.log(benjamin.getName());
//Output: limau
console.log(ben.getName());

3. Langkah berjaga-jaga

1.kata kunci baharu
Jangan lupa untuk menggunakan kata kunci baharu apabila membuat instantiat pembina Sama ada menggunakan kata kunci baharu mempunyai kesan yang besar pada objek ini Tanpa kata kunci baharu, objek ini akan menunjuk ke objek global (tetingkap dalam pelayar dan global nod). Oleh itu, apabila mentakrifkan pembina, adalah disyorkan bahawa huruf pertama nama fungsi itu ditulis dengan huruf besar.
2. Jika fungsi yang dipanggil tidak mempunyai ungkapan pulangan yang jelas, ia akan mengembalikan objek ini secara tersirat - iaitu, objek yang baru dibuat Jika tidak, ia akan menjejaskan hasil yang dikembalikan, tetapi hanya jika ia mengembalikan objek

Salin kod Kod adalah seperti berikut:

fungsi Bar() {
Kembali 2;
}
bar var = Bar baharu();
//Kembalikan objek yang baru dibuat
//Output: Bar {}
console.log(bar);
function Test() {
This.value = 2;
Kembali {
foo: 1
};
}
var test = new Test();
//Benda yang dikembalikan
//Output: Objek {foo: 1}
console.log(ujian);

Apa yang perlu kita beri perhatian ialah:
a) new Bar() mengembalikan objek yang baru dibuat, bukan nilai literal nombor 2. Oleh itu new Bar().constructor === Bar, tetapi jika objek berangka dikembalikan, hasilnya berbeza;
b) Ujian() baharu yang diperoleh di sini ialah objek yang dikembalikan oleh fungsi, bukan objek yang baru dibuat melalui kata kunci baharu, seperti yang ditunjukkan di bawah:

Salin kod Kod adalah seperti berikut:

fungsi Bar() {
Kembali 2;
}
bar var = Bar baharu();
fungsi BarN() {
kembalikan Nombor baharu(2);
}
var barn = BarN baharu();
//Output: benar
console.log(bar.constructor === Bar);
//Output: Nombor {}
console.log(barn);
//Keluaran: palsu
console.log(barn.constructor === BarN);
//Output: benar
console.log(barn.constructor === Nombor);
/*------------------------------------------------ */
function Test() {
This.value = 2;
Kembali {
foo: 1
};
}
var test = new Test();
//Output: undefined
console.log(test.value);
//Keluaran: 1
console.log(test.foo);

Di atas adalah ringkasan fungsi konstruktor Saya harap ia akan membantu untuk pemula.

Label berkaitan：
javascript Pembina
sumber：php.cn
Artikel sebelumnya：javascript Had tertunda dan rekursi examples_javascript kemahiran Artikel seterusnya：Penyelesaian kepada masalah aksara Cina bercelaru dalam kaedah Pos Ajax_jquery JQuery
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Kaedah CSS sahaja untuk mengubah suai imej src secara dinamik pada klik tanpa menggunakan JavaScript Saya perlu menukar src imej pada klik tetikus hanya menggunakan css seperti img:active{}
daripada 2024-04-06 19:25:49
0
1
505
Titik Scatterplot tidak mengekalkan nilai semasa mengezum masuk d3.js Ini adalah kali pertama saya menggunakan d3.js, jadi harap bersabar. Saya melaksanakannya ...
daripada 2024-04-06 18:16:26
0
1
403
Acara tuding JavaScript pada elemen pseudo khusus vendor 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...
daripada 2024-04-06 15:35:24
0
1
274
Hantar borang tanpa butang menggunakan Javascript/Jquery Saya cuba menyerahkan borang tanpa butang dengan memanggil fungsi JavaScript dan melaksana...
daripada 2024-04-06 14:54:03
0
2
421
Sesuaikan penampilan pengepala akordion Bootstrap menggunakan kelas CollapseDisplay Saya ingin menggayakan tajuk kad panel dengan rancangan runtuh kelas. Dalam contoh ini, ia...
daripada 2024-04-06 12:53:11
0
1
376
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan