Mensimulasikan hubungan warisan kelas dan kelas dalam javascript

Sintaks Javascipt tidak mendukung "kelas" (kelas) [sudah didukung oleh ES6], tetapi ada metode untuk mensimulasikan kelas. Hari ini saya terutama akan berbicara tentang metode simulasi "kelas" di Javascipt dan ringkasan dan ulasan warisan dalam JS.

Menerapkan "kelas" dan warisan dalam JS adalah kunci dan kesulitannya. Banyak siswa mungkin memiliki pemahaman tentang "kelas" dan warisan dalam JS, tetapi ketika mereka menganalisis secara mendalam, mereka merasa bahwa mereka tidak dapat melakukannya dan ambigu.

Pertama, mari kita merangkum beberapa metode untuk mendefinisikan "kelas" oleh JS:

Metode 1: Metode Konstruktor

Metode ini adalah metode yang relatif klasik dan kita akan sering melihatnya. Saat menghasilkan instance, gunakan kata kunci baru. Properti dan metode kelas juga dapat didefinisikan pada objek prototipe konstruktor.

 Function Person (Name, Umur, Job) {this.name = name; this.age = usia; this.job = job;} person.prototype.sayname = function () {waspada (this.name);} var person1 = orang baru ("Zhang San", "29", "Web Frontpage Manager"); var Person2 = orang baru ("li si", "22", "Doctor"); orang 1.sayname (); // Pop "Zhang San" Console.log (Person2.Name) // Output "Li Si"

Metode 2: Metode Object.Create ()

Metode objek.creat () sebagai alternatif untuk operator baru hanya dirilis setelah ES5. Menggunakan metode ini, "kelas" adalah objek, bukan fungsi.

 var myMammal = {name: 'herb mammal', get_name: function () {return this.name; }, scese: function () {return this.saying || ''; }} var mycat = object.create (myMammal); mycat.name = 'henrietta'; mycat.saying = 'meow'; mycat.get_name = function () {console.log (this.says + ' + this.name + this.says);} mycat.get_n

Keluaran:

 function () {return this.saying || ''; } Henriettafunction () {return this.saying || ''; }

Saat ini, versi terbaru dari browser utama (termasuk IE9) telah menggunakan metode ini. Jika Anda menemukan browser lama, Anda dapat menggunakan kode berikut untuk menggunakannya sendiri.

 if (! Object.create) {object.create = function (o) {function f () {} f.prototype = o; mengembalikan f baru (); }; }

Metode 3: Hukum Minimalis

Kemasan

Metode ini tidak menggunakan ini dan prototipe, dan kodenya sangat mudah digunakan. Pertama -tama, ia juga menggunakan objek untuk mensimulasikan "kelas". Di kelas ini, tentukan konstruktor creatfn () untuk menghasilkan instance.

 var dog = {creatfn: function () {// Beberapa kode di sini}};

Kemudian, di createFn (), tentukan objek instan dan gunakan objek instan ini sebagai nilai pengembalian.

 var dog = {creatfn: function () {var dog = {}; dog.name = "dog"; dog.makeound = function () { Peringatan ("woofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofw oofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwo ofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwo ofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoo fwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoo fwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoof woofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofw oofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwo

Saat menggunakannya, hubungi metode createFn () untuk mendapatkan objek instan.

 var dog1 = dog.creatfn (); dog1.makeound (); // woof

Keuntungan dari pendekatan ini adalah mudah dimengerti, memiliki struktur yang jelas dan elegan, dan sejalan dengan konstruksi tradisional "pemrograman berorientasi objek" tradisional, sehingga fitur-fitur berikut dapat dengan mudah digunakan.

mewarisi

Sangat nyaman untuk mengimplementasikan satu kelas di kelas berikutnya. Panggil saja metode creatfn () dari yang terakhir dalam metode creatfn (). Pertama -tama tentukan kelas hewan.

 var hewan = {creatfn: function () {var hewan = {}; animal.eat = function () {waspada ("makan makanan"); }; hewan kembali; }};

Kemudian, dalam metode Creatfn () Dog, metode creatfn () disebut.

 var dog = {creatfn: function () {var dog = animal.creatfn (); dog.name = "dog"; dog.makeound = function () {alert ("wangwoo"); }; anjing kembali; }};

Contoh anjing yang diperoleh dengan cara ini akan mewarisi kelas anjing dan kelas hewan secara bersamaan.

 var dog1 = dog.creatfn (); dog1.eat (); // makan

Properti pribadi dan metode pribadi

Dalam metode creatfn (), selama metode dan sifat yang tidak didefinisikan pada objek anjing bersifat pribadi.

 var dog = {creatfn: function () {var dog = {}; var sound = "woof woof"; dog.makeound = function () {alert (sound); }; anjing kembali; }};

Suara variabel internal dalam contoh di atas tidak dapat dibaca secara eksternal, dan hanya dapat dibaca melalui metode publik membuat () anjing.

 var dog1 = dog.creatfn (); waspada (dog1.sound); // belum diartikan

Berbagi data

Terkadang, kita membutuhkan semua objek instan untuk dapat membaca dan menulis data internal yang sama. Pada saat ini, cukup balas data internal ini di dalam objek kelas dan di luar metode createFn ().

 var dog = {sound: "wowangwoo", creatfn: function () {var dog = {}; dog.makeound = function () {waspada (dog.sound); }; dog.changesound = function (x) {dog.sound = x; }; anjing kembali; }};

Kemudian, dua objek instance dihasilkan:

 var dog1 = dog.creatfn (); var dog2 = dog.creatfn (); dog1.makeound (); // woof

Pada saat ini, jika ada objek instan dan data bersama dimodifikasi, objek instance lainnya juga akan terpengaruh.

 dog2.changeSound ("wuwuwu"); dog1.makeound (); // Wuwuwuwu

JS Warisan

Mengenai warisan, ada juga banyak informasi yang tersedia untuk penyelidikan di internet, tetapi banyak teman tidak memahaminya secara mendalam. Ketika datang ke warisan, jika Anda tidak memeriksa informasi dan tiba -tiba Anda mungkin tidak dapat mengetahui alasannya. Ini menunjukkan bahwa pengetahuan dasar kita tidak cukup solid. Tidak sepenuhnya dipahami. Hari ini, saya berdiri berdasarkan pendahulu saya, dan mari kita tinjau warisan ini dengan Anda.

Dua metode warisan yang paling umum digunakan adalah sebagai berikut:

• Warisan rantai prototipe (warisan antara objek)
• Warisan klasik (warisan antara konstruktor)

Warisan rantai prototipe

Apa itu warisan rantai prototipe? Saya tidak akan membicarakan definisi di sini. Bahkan, itu adalah menggunakan prototipe untuk mewarisi tingkat induk.

Misalnya:

 function parent () {this.name = 'mike';} function child () {this.age = 12;} child.prototype = new Parent (); // anak mewarisi orangtua dan membentuk rantai melalui prototipe var test = new child () (test.age); weran (test.name);/GET GET WIN dalam // life/life/function (test. 60;} Brother.prototype = new child (); // Lanjutkan rantai prototipe mewarisi var saudara = saudara baru (); waspada (saudara.

Dalam contoh di atas, melalui prototipe, rantai terbentuk. Anak mewarisi orang tua. Saudara mewarisi anak. Akhirnya, saudara memiliki atribut anak dan orang tua, serta atributnya sendiri. Ini adalah warisan dari rantai aslinya.

Warisan klasik (pinjam konstruktor)

Warisan klasik umumnya menggunakan panggilan atau berlaku untuk memanggil konstruktor supertype secara internal. Misalnya:

 Function Parent (usia) {this.name = ['mike', 'jack', 'smith']; this.age = usia;} fungsi anak (usia) {parent.call (ini, usia);} var test = anak baru (21); waspada (test.age); // 21alert (test.name); // mike, jack, smithtest.name.push ('tagihan'); waspada (test.name); // mike, smith, smith, smith, 'tagihan'); test.name); // mike, smith, smith, smith, 'tagihan'); test.name); // mike, smith, smith, smith, 'tagihan'); test.name); // mike, smith, smith, smith, 'tagihan');

Dua warisan di atas adalah dua metode warisan paling mendasar.

Selain itu, ada beberapa metode warisan, mari kita lihat!

Warisan Kombinasi

Kombinasi warisan biasanya merupakan metode warisan yang digunakan dalam kombinasi dari dua metode warisan di atas.

Sebagai contoh:

 Function Parent (usia) {this.name = ['mike', 'jack', 'smith']; this.age = usia;} parent.prototype.run = function () {return this.name + 'keduanya' + this.age;}; function anak (usia) {parent.call (ini, usia); // objek peniruan, lulus argumen ke supertype} anak -anak. Peringatan (test.run ()); // Mike, Jack, Smith adalah Both21

Warisan prototipe

Ini hanya satu kata yang berbeda dari warisan rantai asli yang disebutkan di atas, tetapi bukan konten yang sama. Apa yang kita bicarakan tentang prototipe warisan adalah apa yang kita bicarakan di kelas terakhir, membuat kelas baru melalui metode objek.create (). Karena metode ini tidak didukung oleh browser lama. Oleh karena itu, jika kita tidak menggunakan objek.create (), juga bisa ada metode alternatif, sebagai berikut:

 fungsi obj (o) {function f () {} f.prototype = o; mengembalikan f baru (); }

Fungsi ini mengimplementasikan cara kita membuat kelas di objek.create ()!

Karena itu, berikut ini adalah:

 fungsi obj (o) {function f () {} f.prototype = o; mengembalikan f baru (); } var box = {name: 'trigkit4', arr: ['Brother', 'Sister', 'baba']}; var b1 = obj (kotak); waspada (b1.name); // trigkit4b1.name = 'Mike'; waspada (b1.name); // mikealert (b1.arr); // saudara laki -laki, saudari, babab1.arr.push ('orang tua'); waspada (b1.arr); // saudara laki -laki, saudara perempuan, baba, orang tua B2 = obj (kotak); waspada (b2.name); // trigkit4alert (Boxr); Bab.

Warisan parasit

Sebagai contoh:

 fungsi creatanother (asli) {var clone = objek baru (asli); clone.sayhi = function () {alert ("hai")}; return clone;} var person = {name: "haorooms", friends: ["hao123", "zhansan", "lisi"]} var lainperson = creatanother (orang); Antherperson.sayhi (); // hai

Kombinasi parasit

 function wenchPrototype (subtipe, supertype) {var prototipe = object.creat (supertype.prototype); prototipe.constructor = subtipe; subType.prototype = prototipe;}; function superType (name) {this.name = name; this.colors = ['red', 'blue', 'green'];} supertype.prototype.sayname = function () {console.log (this.name);} function subtipe (nama, usia) {//inheritePrototype.call(this.name); this.age = age;} // wheritprototype (subtipe, supertype); subtype.prototype.sayage = function () {console.log (this.age);} var instance = new subtipe ();

Warisan kelas pada dasarnya adalah metode di atas. Mari kita bicara secara singkat tentang kelas kelas ES6!

Kelas Implementasi ES6

 // Tentukan titik kelas titik {konstruktor (x, y) {this.x = x; this.y = y; } toString () {return '('+this.x+','+this.y+')'; }} var point = titik baru (2, 3); point.tostring () // (2, 3) point.hasownproperty ('x') // truepoint.hasownproperty ('y') // truepoint.hasownproperty ('tostring') // falsepoint.

Warisan kelas

 kelas ColorPoint memperluas titik {konstruktor (x, y, warna) {super (x, y); // panggil konstruktor (x, y) dari kelas induk this.color = warna; } toString () {return this.color + '' + super.toString (); // hubungi tostring () dari kelas induk}}