Tutorial klasik tentang fitur canggih pemrograman berorientasi objek JavaScript (layak koleksi)

Artikel ini menjelaskan fitur canggih pemrograman berorientasi objek dalam JavaScript. Bagikan untuk referensi Anda, sebagai berikut:

1. Tiga cara untuk membuat objek:

Metode Konstruksi Pertama: Objek Baru

 var a = objek baru (); ax = 1, ay = 2;

Metode Konstruksi Kedua: Pengukuran Langsung Objek

 var b = {x: 1, y: 2};

Metode Konstruksi Ketiga: Tentukan Jenis

 titik fungsi (x, y) {this.x = x; this.y = y;} var p = titik baru (1,2);

2. Akses objek

Mengakses properti objek

Notasi braket: pahlawan ['nama']. ,

Point Notation: Hero.name.

Jika properti yang diakses tidak ada, tidak terdefinisi akan dikembalikan.

Metode untuk mengakses objek

Tambahkan sepasang tanda kurung setelah nama metode: hero.say ().

Metode akses seperti Access Atribut: Pahlawan ['Say'] ().

3. Hapus atribut dan metode

 // Buat objek kosong var hero = {}; // tambahkan atribut dan metode ke hero.name = "javascript"; hero.value = "helloWorld"; hero.sayname = function () {return "hello" + hero.name;}; // uji peringatan (hero.name); // output javascriptalert (hero.sayname ()); // output halo javascript // hapus atribut nama hero hapus hero.name; // uji peringatan (hero.sayname ()); // output Halo tidak ditentukan

4. Gunakan nilai ini

 // Buat objek kosong var hero = {}; // tambahkan atribut dan metode untuk pahlawan objek hero.name = "javascript"; hero.value = "helloWorld"; hero.sayname = function () {return "hello" + this.name;}; // uji peringatan (hero.name); // output javascripttalet (hero.sayname ()); // output Halo JavaScript

Meringkaskan:

① Ini di sini sebenarnya mengacu pada "objek ini" atau "objek saat ini".

② Penggunaan ini adalah masalah bagi kebanyakan orang. Jadi tidak disarankan untuk menggunakan terlalu banyak!

5. Objek bawaan

Objek bawaan dapat dibagi secara kasar menjadi tiga kelompok:

① Objek Kelas Enkapsulasi Data - termasuk objek, array, boolean, angka dan string. Objek -objek ini mewakili tipe data yang berbeda dalam JavaScript, dan semuanya memiliki nilai pengembalian tipe yang berbeda, serta status tidak terdefinisi dan nol.

② Objek Kelas Alat - Termasuk objek yang digunakan untuk menyediakan traversal, seperti matematika, tanggal, regexp, dll.

③ Objek Kelas Kesalahan - Termasuk objek kesalahan umum dan berbagai objek kelas kesalahan yang lebih khusus lainnya. Mereka dapat membantu kami memperbaiki kondisi kerja program ketika pengecualian tertentu terjadi.

6. Objek objek

Objek adalah objek induk dari semua objek dalam JavaScript, yang berarti bahwa semua objek diwarisi dari objek objek.

Buat objek kosong:

 var objek = {}; var obj = objek baru ();

7. Objek ARRAY

Objek array digunakan untuk menyimpan beberapa nilai dalam satu variabel.

Buat objek array kosong:

 var objek = {}; var obj = array baru ();

Misalnya 1:

 // Balikkan string Contoh // Tentukan string var str = "a, b, c, d, e, f, g"; // Gunakan metode split () dari objek string untuk memotong string menjadi array var arr = str.split (","); // Gunakan metode terbalik () dari objek array untuk membalikkan urutan elemen dalam array. arr = arr.reverse (); // uji peringatan cetak (arr.tostring ());

8. Objek String

Perbedaan antara objek string dan tipe string dasar:

 var str = "halo"; var obj = string baru ("dunia"); waspada (typeof str); // typeof StringAlert (Typeof Obj); // typeof objek

Misalnya 1:

 // Contoh penentuan apakah suatu string berisi string yang ditentukan // Tentukan dua string untuk dinilai var str = "abcdefg"; var substr = "efg";/** Tentukan fungsi untuk menilai apakah suatu string berisi string yang ditentukan * * Parameter pertama: string yang akan dinilai * * Parameter kedua: string yang ditilai oleh sub (string (string yang ditilai, String (str); // mencegat string var dihakimi result = string.substr (str.indexof (substr), substr.length);/** Tentukan apakah string yang dicegat kosong * * kosong, menunjukkan bahwa string yang ditentukan tidak mengandung string yang ditentukan * * tidak kosong, menunjukkan bahwa string yang ditentukan */IF (hasil == substr) {true) {lai yang benar). false;}} peringatan (sub (str, substr));

9. Prototipe

Fungsi itu sendiri juga merupakan metode dan sifat yang mengandung objek. Sekarang yang ingin kami pelajari adalah properti lain dari objek fungsi - prototipe.

Tambahkan metode dan properti menggunakan prototipe

Tulis ulang properti prototipe menggunakan propertinya sendiri

Memperluas objek bawaan

Tambahkan metode dan properti menggunakan prototipe

Di bawah ini adalah membuat objek fungsi baru dan mengatur beberapa properti dan metode:

 function hero (name, color) {this.name = name; this.color = warna; this.whatareyou = function () {return "Saya adalah" + this.color + "" + this.name; }} var hero = new hero ("javascript", "red"); alert (hero.whatareyou ()); // output saya adalah javascript merah

Tambahkan beberapa properti dan metode ke objek fungsi pahlawan di atas:

 Hero.prototype.price = 100; hero.prototype.rating = 3; hero.prototype.getInfo = function () {return "rating:" + this.rating + ", harga:" + this.price;} ware (hero.getinfo ()); // peringkat output: 3, harga: 100

Metode di atas juga dapat dilakukan seperti ini:

 Hero.prototype = {harga: 100, peringkat: 3, getInfo: function () {return "rating:" + this.rating + ", harga:" + this.price; }};

Tulis ulang properti prototipe menggunakan propertinya sendiri

Apa yang harus saya lakukan jika atribut objek sendiri sama dengan atribut prototipe? Jawabannya adalah bahwa atribut objek sendiri memiliki prioritas lebih tinggi daripada atribut prototipe.

 function hero () {this.name = "jscript";} hero.prototype.name = "javaScript"; var hero = new hero (); alert (hero.name); // output jscriptdelete hero.name; waspada (hero.name); // Output JavaScript

Memperluas objek bawaan

 // Tambahkan fungsi untuk menilai untuk array array prototipe array.prototype.inArray = function (warna) {untuk (var i = 0, len = this.length; i <len; i ++) {if (ini [i] === warna) {return true; }} return false;} // Tentukan objek array var a = ["merah", "hijau", "biru"]; // uji peringatan (a.inarray ("merah")); //truealert(a.inarray("yellow ")); //PALSU

10. Warisan

Jika kedua kelas memiliki tipe instance yang sama, maka ada beberapa hubungan di antara mereka. Kami menyebut hubungan umum antara jenis dari contoh yang sama "warisan".

Hubungan warisan berisi setidaknya tiga makna:

① Contoh subkelas dapat berbagi metode kelas orang tua.

② Subkelas dapat mengganti metode kelas induk atau memperluas metode baru.

③ Subkelas dan kelas orang tua keduanya "tipe" dari instance subclass.

Dalam JavaScript, "warisan" tidak didukung. Dengan kata lain, tidak ada sintaks yang diwariskan dalam JavaScript. Dalam hal ini, JavaScript bukan bahasa yang berorientasi objek langsung.

11. Rantai prototipe

Rantai prototipe adalah metode warisan default yang diformulasikan oleh standar ecmascript.

Misalnya:

 Fungsi a () {this.name = "a"; this.toString = function () {return this.name};} function b () {this.name = "b";} function c () {this.name = "c"; this.age = 18; this.getage = function () {return this.age = "c"; this.age = 18; this.getage = function () {return this.age};};

Penjelasan:

Objek dibuat secara langsung dalam properti prototipe objek B, dan tidak memperluas prototipe asli dari objek ini.

Entitas baru dibuat melalui A baru () dan kemudian digunakan untuk menimpa prototipe objek.

JavaScript adalah bahasa yang sepenuhnya bergantung pada objek, dan tidak ada konsep kelas.

Oleh karena itu, perlu untuk secara langsung membuat entitas dengan A () baru sebelum pekerjaan warisan yang relevan dapat diselesaikan melalui sifat -sifat entitas.

Setelah menyelesaikan implementasi warisan tersebut, setiap modifikasi, penulisan ulang atau penghapusan A () tidak akan mempengaruhi B ().

Diwarisi dari prototipe saja:

 fungsi a () {} a.prototype.name = "a"; a.prototype.toString = function () {return this.name}; function b () {} b.prototype = a.prototype; b.prototype.name = "b"; fungsi c () {} c.prototype = b. = 18; c.prototype.getage = function () {return this.age};

Warisan antara objek (konten yang diperluas, tidak dapat) (salinan dangkal)

 // Fungsi menerima objek dan mengembalikan fungsi salinnya ExtandCopy (p) {var z = {}; // Tentukan objek kosong z untuk (var i di p) {// var i = 0; i <p.length; i ++ z [i] = p [i]; // Jika Anda diperlakukan sebagai array, Anda dapat memahami} // atribut uber: gunakan p sebagai induk dari z dan titik z ke prototipe p z.uber = p; return z;} // Tentukan objek A, tetapi objek A bukan objek fungsi var a = {name: "a", tostr: function () {return this.name;} // tentukan objek B, tetapi objek B bukan objek fungsi var b = extandcopy (a); b.name = "b"; b.tostr = function () {return this.uber.toStr () + "," + this.name;}; // Tentukan objek C, tetapi objek C bukan objek fungsi var c = extendcopy (b); c.name = 18; waspada (c.toStr ()); // output a, b, 18

PS: Banyak tata letak kode dalam tutorial tidak distandarisasi. Berikut adalah beberapa alat format dan kecantikan kode JavaScript untuk digunakan semua orang:

Alat pemformatan kode JavaScript:

http://tools.vevb.com/code/js

Kode JavaScript Keindahan/Kompresi/Format/Alat Enkripsi:

http://tools.vevb.com/code/jscompress

JSMIN ONLINE JS Compression Tool:

http://tools.vevb.com/code/jsmincompress

Untuk informasi lebih lanjut tentang JavaScript, silakan periksa topik khusus situs ini: "Tutorial Berorientasi Objek JavaScript", "Ringkasan Keterampilan Operasi JSON dalam JavaScript", "Ringkasan Efek Peralihan dan Teknik JavaScript dan Ringkasan Keterampilan Javascript" Ringkasan Javascript "Ringkasan Javascript" Ringkasan Javascript "Ringkasan Javascript" Ringkasan Javascript "Ringkasan Javascript" Ringkasan Javascript " "Ringkasan Struktur Data Javascript dan Keterampilan Algoritma", "Ringkasan Algoritma dan Teknik Traversal JavaScript" dan "Ringkasan Penggunaan Operasi Matematika JavaScript"

Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.