Perbedaan pertama dapat diringkas sebagai: this
merujuk pada Instance dari kelas. prototype
mengacu pada Definisi .
Katakanlah kita memiliki kelas berikut:
var Flight = function ( number ) { this.number = number; };
Jadi di sini kita melekat this.number
pada setiap instance kelas, dan itu masuk akal karena setiap orang Flight
harus memiliki nomor penerbangan mereka sendiri.
var flightOne = new Flight( "ABC" );
var flightTwo = new Flight( "XYZ" );
Sebaliknya, prototype
mendefinisikan satu properti yang dapat diakses oleh semua instance.
Sekarang jika kita ingin mendapatkan nomor penerbangan, kita cukup menulis cuplikan berikut ini dan semua instance kita akan mendapatkan Referensi ke objek yang baru di-prototipe ini.
Flight.prototype.getNumber = function () { return this.number; };
Perbedaan kedua adalah tentang cara JavaScript mencari properti suatu objek. Saat Anda mencari Object.whatever
, JavaScript bergerak sampai ke objek Obyek utama (objek yang diwarisi dari yang lainnya), dan segera setelah menemukan kecocokan, ia akan kembali atau memanggilnya.
Tapi itu hanya terjadi untuk properti prototipe. Jadi, jika Anda memiliki suatu tempat di tingkat yang lebih tinggi this.whatever
, JavaScript tidak akan menganggapnya sebagai pertandingan dan akan melanjutkan pencarian.
Mari kita lihat bagaimana itu terjadi dalam kenyataan.
Catatan pertama bahwa [hampir] semuanya adalah Objek dalam JavaScript. Coba ini:
typeof null
Sekarang mari kita lihat apa yang ada di dalam Object
(perhatikan Huruf Besar O
dan .
pada akhirnya). Di Alat Pengembang Google Chrome saat Anda memasukkan, .
Anda akan mendapatkan daftar properti yang tersedia di dalam objek tertentu.
Object.
Sekarang lakukan hal yang sama untuk Function
:
Function.
Anda mungkin memperhatikan name
metodenya. Pergi saja dan nyalakan dan mari kita lihat apa yang terjadi:
Object.name
Function.name
Sekarang mari kita buat fungsi:
var myFunc = function () {};
Dan mari kita lihat apakah kita punya name
metode di sini juga:
myFunc.name
Anda harus mendapatkan string kosong, tapi tidak apa-apa. Anda seharusnya tidak mendapatkan Kesalahan atau Pengecualian.
Sekarang mari kita tambahkan sesuatu seperti dewa itu Object
dan lihat apakah kita mendapatkannya di tempat lain juga?
Object.prototype.test = "Okay!";
Dan itu dia:
Object.prototype.test
Function.prototype.test
myFunc.prototype.test
Dalam semua kasus, Anda harus melihat "Okay!"
.
Mengenai pro dan kontra dari masing-masing metode Anda dapat mempertimbangkan prototyping sebagai cara "lebih efisien" dalam melakukan sesuatu, karena itu membuat referensi pada setiap contoh daripada menyalin seluruh properti di setiap objek. Di sisi lain itu adalah contoh Tightly Coupling yang merupakan no-no besar sampai Anda benar-benar dapat membenarkan alasannya. this
cukup rumit karena relevan dengan konteks. Anda dapat menemukan banyak sumber daya yang baik secara gratis di internet.
Itu semua mengatakan, kedua cara hanyalah alat bahasa dan itu benar-benar tergantung pada Anda dan masalah yang Anda coba pecahkan untuk memilih yang lebih cocok.
Jika Anda perlu memiliki properti agar relevan dengan setiap instance kelas, maka gunakan this
. Jika Anda perlu memiliki properti agar berfungsi sama di setiap instance, kemudian gunakan prototype
.
Memperbarui
Mengenai cuplikan sampel Anda, yang pertama adalah contoh Singleton , jadi masuk akal untuk digunakan this
dalam tubuh objek. Anda juga dapat meningkatkan contoh Anda dengan menjadikannya modular seperti ini (dan Anda tidak perlu selalu menggunakannya this
juga).
/* Assuming it will run in a web browser */
(function (window) {
window.myApp = {
...
}
})( window );
/* And in other pages ... */
(function (myApp) {
myApp.Module = {
...
}
})( myApp );
/* And if you prefer Encapsulation */
(function (myApp) {
myApp.Module = {
"foo": "Foo",
"bar": function ( string ) {
return string;
},
return {
"foor": foo,
"bar": bar
}
}
})( myApp );
Cuplikan kedua Anda tidak masuk akal karena pertama kali Anda gunakan this
dan kemudian Anda mencoba meretasnya prototype
, yang tidak berfungsi karena this
diprioritaskan prototype
. Saya tidak yakin apa yang Anda harapkan dari potongan kode itu dan bagaimana cara kerjanya, tetapi saya sangat menyarankan Anda untuk memperbaikinya.
Memperbarui
Untuk menguraikan tentang this
diutamakan prototype
saya dapat menunjukkan kepada Anda sebuah contoh dan memberi tahu Anda bagaimana hal itu dapat dijelaskan, tetapi saya tidak memiliki sumber daya eksternal untuk mendukungnya.
Contohnya sangat sederhana:
var myClass = function () { this.foo = "Foo"; };
myClass.prototype.foo = "nice try!";
myClass.prototype.bar = "Bar";
var obj = new myClass;
obj.foo; // Still contains "Foo" ...
obj.bar; // Contains "Bar" as expected
Penjelasannya, seperti yang kita ketahui, this
relevan dengan konteksnya. Jadi itu tidak akan ada sampai konteksnya siap. Kapan konteks siap? Saat instance baru sedang dibuat! Anda harus menebak sisanya sekarang! Ini berarti bahwa meskipun ada prototype
definisi, tetapi this
lebih masuk akal untuk diutamakan karena ini semua tentang contoh baru yang dibuat pada saat itu.