Penjelasan Dasar Berorientasi Objek JS (Mode Pabrik, Mode Konstruktor, Mode Prototipe, Mode Campuran, Mode Prototipe Dinamis)

Apa itu berorientasi objek? Berorientasi objek adalah semacam pemikiran! (omong kosong).

Berorientasi objek dapat memperlakukan semua modul kunci dalam suatu program sebagai objek, dan modul memiliki atribut dan metode. Dengan cara ini, jika kita merangkum beberapa sifat dan metode, akan sangat nyaman untuk digunakan di masa depan dan juga dapat menghindari pekerjaan yang membosankan dan berulang. Selanjutnya, kami akan menjelaskan implementasi berorientasi objek di JS.

Model pabrik

Pola pabrik adalah pola desain yang terkenal di bidang rekayasa perangkat lunak, dan karena kelas tidak dapat dibuat dalam ecmascript, objek dibuat dengan enkapsulasi fungsi. Metode implementasi sangat sederhana, yaitu membuat objek dalam fungsi, menetapkan atribut dan metode ke objek dan kemudian mengembalikan objek.

 function createBlog (name, url) {var o = objek baru (); o.name = nama; o.url = url; o.sayUrl = function () {alert (this.url); } return o;} var blog1 = createBlog ('wuyuchang', '//www.vevb.com/');

Dapat dilihat bahwa metode implementasi pola pabrik sangat sederhana, menyelesaikan masalah membuat beberapa objek yang sama, tetapi pola pabrik tidak dapat mengidentifikasi jenis objek karena semua objek, tidak seperti tanggal, array, dll., Jadi pola konstruktor muncul.

Mode konstruktor

Konstruktor dalam ecmascript dapat membuat objek jenis tertentu, mirip dengan objek JS asli seperti array dan tanggal. Metode implementasi adalah sebagai berikut:

 Function Blog (Name, URL) {this.name = name; this.url = url; this.alerTurl = function () {alert (this.url); }} var blog = blog baru ('wuyuchang', '//www.vevb.com/');console.log(blog contoh blog); // Benar, tentukan apakah blog adalah instance dari blog, yaitu, itu memecahkan masalah yang tidak mungkin dilakukan oleh mode pabrik

Contoh ini berbeda dari model pabrik kecuali untuk nama fungsi, sepatu anak -anak yang cermat harus menemukan banyak perbedaan:

Huruf pertama dari nama fungsi dikapitalisasi (meskipun standar tidak sepenuhnya menetapkan bahwa huruf pertama dikapitalisasi, menurut konvensi, huruf pertama konstruktor dikapitalisasi.

Buat objek yang tidak ditampilkan

Tetapkan atribut dan metode langsung ke objek ini

Tidak ada pernyataan pengembalian

Buat Objek Menggunakan Baru

Dapat mengenali objek (di sinilah pola konstruktor lebih besar daripada pola pabrik)

Meskipun konstruktor mudah digunakan, mereka bukan tanpa kerugian. Masalah terbesar dengan menggunakan konstruktor adalah mereka harus menciptakan kembali metode setiap kali mereka membuat instance (secara teoritis, sifat -sifat objek berbeda setiap kali mereka membuat objek, dan metode objeknya sama). Namun, tidak perlu membuat metode yang persis sama dua kali, sehingga kita dapat memindahkan fungsi di luar objek (mungkin sepatu anak -anak telah melihat kerugiannya, shhhh!).

 Function Blog (Name, URL) {this.name = name; this.url = url; this.alerTurl = alertUrl;} function alertURl () {waspada (this.url);} var blog = blog baru ('scjb51', 'http://sc.vevb.com/'), blog2 = blog baru ('jb51', '//www.vevb.com/'); blog.alal ('jb51', '//www.vevb.com/'); blog.alal ('jb51', '//www.vevb.com/'); blog. // http://sc.vevb.com/blog2.alerturl (); // //www.vevb.com/

Kami menetapkan peringatan ke fungsi global, sehingga blog dan blog2 mengakses fungsi yang sama, tetapi masalahnya muncul lagi. Fungsi yang sebenarnya hanya ingin blog untuk digunakan didefinisikan dalam ruang lingkup global, yang menunjukkan bahwa ruang lingkup global agak layak atas namanya. Yang lebih tidak dapat diterima adalah bahwa banyak metode yang didefinisikan dalam ruang lingkup global yang hanya digunakan oleh objek tertentu. Tidak hanya ruang yang terbuang, itu jelas kehilangan enkapsulasi yang berorientasi pada objek, sehingga masalah ini dapat diselesaikan melalui prototipe.

Mode prototipe

Setiap fungsi yang kami buat memiliki atribut prototipe, yang merupakan penunjuk ke objek, dan tujuan objek ini adalah untuk berisi properti dan metode yang dapat dibagikan oleh semua contoh jenis tertentu. Keuntungan menggunakan objek prototipe adalah bahwa semua instance objek dapat berbagi properti dan metode yang dikandungnya.

 Function Blog () {} blog.prototype.name = 'wuyuchang'; blog.prototype.url = 'http://tools.vevb.com/';blog.prototype.friend = [' fr1 ',' fr2 ',' fr3 ',' fr4 ']; blog.pototype.alerTye', 'fr3', 'fr4']; blog.pototype.alerType = funch = (fR3 ',' fr4 ']; blog.pototype.alerType = Funch =) (FR3', 'fr4']; blog.pototype.alerTye = FR2 ',' FR3 ',' FR4 ']; blog.pototype.alerType = Function =) (function) (function (function (funchf3', 'fR4']; blog.protype.alerType. this.friend);} // Berikut ini adalah kode tes var blog = blog baru (), blog2 = blog baru (); blog.alertInfo (); // wuyuchanghttp: //tools.vevb.com/fr1,fr2,fr3,fr4blog2.alertinfo (); // wuyuchanghttp: //tools.vevb.com/fr1,fr2,fr3,fr4blog.name = 'wyc1'; blog.url = 'http: //***.com'; blog.friend.pop (); blog2.name = 'wyc2'; blog2.url = 'http (); blog2.name =' wyc2 '; blog2.url =' http (); Blog. // wyc1http: //***.comfr1,fr2,fr3blog2.alertinfo (); // WYC2HTTP: //++.comfr1,fr2,fr3

Pola prototipe bukan tanpa kekurangannya. Pertama -tama, ini menghilangkan tautan parameter inisialisasi konstruktor yang lewat. Akibatnya, semua contoh memperoleh nilai atribut yang sama secara default, yang sangat tidak nyaman, tetapi ini bukan masalah terbesar dari prototipe. Masalah terbesar dengan pola prototipe disebabkan oleh sifat berbagi. Karena berbagi, satu contoh memodifikasi referensi, dan yang lainnya juga mengubah referensi. Oleh karena itu, kami biasanya tidak menggunakan prototipe saja, tetapi menggabungkan pola prototipe dengan pola konstruktor.

Mode campuran (mode prototipe + mode konstruktor)

 Function Blog (Nama, URL, teman) {this.name = name; this.url = url; this.friend = friend;} blog.prototype.alertInfo = function () {waspada (this.name + this.url + this.friend);} var blog = blog baru ('wuyuchang', 'http://tools.vevb.com/', ['fr1', 'fr2', 'wyc.' 'http: //**.com', ['a', 'b']); blog.friend.pop (); blog.alertinfo (); // wuyuchanghttp: //tools.vevb.com/fr1,fr2blog2.alertinfo (); // wychttp: //**.coma,b

Dalam mode hybrid, mode konstruktor digunakan untuk mendefinisikan atribut instance, sedangkan mode prototipe digunakan untuk mendefinisikan metode dan atribut bersama. Setiap instance akan memiliki atribut instance sendiri, tetapi pada saat yang sama ia berbagi metode, menghemat memori hingga tingkat maksimum. Selain itu, mode ini juga mendukung parameter awal yang lewat. Banyak keuntungan. Pola ini adalah metode yang paling banyak digunakan dan paling dikenal untuk membuat objek khusus dalam ecmascript.

Mode prototipe dinamis

Mode prototipe dinamis merangkum semua informasi dalam konstruktor, dan dengan menginisialisasi prototipe dalam konstruktor (hanya prototipe yang diinisialisasi ketika objek pertama dipakai), ini memungkinkan Anda untuk memilih apakah prototipe perlu diinisialisasi dengan menilai apakah metode tersebut valid.

 Function Blog (Name, URL) {this.name = name; this.url = url; if (typeOf this.alertInfo! = 'function') {// kode ini hanya dieksekusi setelah peringatan ('exe time'); Blog.prototype.alertInfo = function () {alert (thia.name + this.url); }}} var blog = blog baru ('wuyuchang', 'http://tools.vevb.com'), blog2 = blog baru ('wyc', 'http: ***. com');

Anda dapat melihat bahwa dalam contoh di atas, jendela muncul sekali, 'exe time', yaitu, ketika blog diinisialisasi, blog2 tidak perlu menginisialisasi prototipe. Untuk membuat objek menggunakan pola ini, itu dapat dianggap sempurna.

Posting blog ini mengacu pada edisi ketiga dari "JavaScript Advanced Programming", tetapi bahasa telah disederhanakan dan contoh -contoh telah ditulis ulang. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan dan balasan, dan penulis akan memperbarui blog.