Rumah > hujung hadapan web > tutorial js > kemahiran enkapsulasi berorientasikan objek javascript dan inheritance_javascript

kemahiran enkapsulasi berorientasikan objek javascript dan inheritance_javascript

WBOY
Lepaskan: 2016-05-16 16:30:02
asal
1268 orang telah melayarinya

Mari kita selesaikan enkapsulasi dan pewarisan dalam js berorientasikan objek.

1. Enkapsulasi
Terdapat banyak cara untuk melaksanakan enkapsulasi dalam js. Berikut adalah beberapa cara yang biasa digunakan.

1.1 Objek penjanaan mod asal
Tulis ahli kami secara langsung ke dalam objek dan kembalikan mereka dengan fungsi tersebut. Kelemahan: Sukar untuk melihat contoh corak.

Kod:

Salin kod Kod adalah seperti berikut:

fungsi Stu(nama, markah) {
             kembali {
nama: nama,
markah: markah
            }
}
        var stu1 = Stu("张三", 80);
        var stu2 = Stu("李思", 90);
console.log(stu1.name); // Zhang San

1.2 Menjana objek corak pembinaan

JS memberikan kita corak penggunaan pembina untuk menjana objek Apa yang dipanggil "pembina" sebenarnya adalah fungsi biasa, tetapi pembolehubah ini digunakan secara dalaman. Apabila kata kunci baharu digunakan untuk menjana contoh pembina, pembolehubah ini akan terikat pada objek contoh.

Terus masukkan kod:

Salin kod Kod adalah seperti berikut:

Fungsi Stu(nama, markah) {
This.name = nama,
This.skor = skor
}
        var stu1 = Stu baharu("张三", 80);
        var stu2 = Stu baharu("李思", 90);
console.log(stu1.name "/" stu2.score); // Zhang San 90
console.log((stu1.constructor == Stu) "/" (stu2.constructor == Stu)); // true true
console.log((stu1 instanceof Stu) "/" (stu2 instanceof Stu)); // true true

Tidak sukar untuk melihat bahawa objek yang dijana oleh pembina js adalah sama persis dengan objek yang dijana oleh kelas dalam C# Kedua-duanya menggunakan templat untuk mentakrifkan ahli objek dan mewujudkannya melalui kata kunci baharu.

Jana objek Stu yang sama menggunakan kod C#

Salin kod Kod adalah seperti berikut:

Kelas Stu
{
​nama rentetan awam;
skor berganda awam;​​​​​
}

OK, sekarang kita mempunyai objek asas. Jadi sekarang kita memerlukan kaedah yang biasa kepada semua objek, dan hanya membenarkan kaedah ini dibuat sekali sahaja. (Tidak dibuat berulang kali dengan objek baharu) Apakah yang perlu saya lakukan? Semua orang tahu bahawa dalam C# kita boleh menggunakan ahli statik. Jadi bagaimana untuk melakukannya dalam js?

1.3 Mod Prototaip

Dalam js, setiap pembina mempunyai atribut prototaip Semua sifat dan kaedah objek ini akan diwarisi oleh contoh pembina. Kemudian menambah ahli secara langsung ke prototaip adalah sama dengan mengisytiharkan ahli statik dalam C#.

Kod:

Salin kod Kod adalah seperti berikut:

Fungsi Stu(nama, markah) {
This.name = nama,
This.skor = skor
}
Stu.prototype.type='Pelajar';
Stu.prototype.log = fungsi (s) {
console.log(s);
}
        var stu1 = Stu baharu("张三", 80);
        var stu2 = Stu baharu("李思", 90);
console.log(stu1.type "/" stu2.type); // Pelajar Pelajar
          stu1.log('hello'); // hello
console.log(stu1.log == stu2.log); // benar

Itu sahaja untuk enkapsulasi. Mari kita lihat bagaimana pewarisan dilaksanakan dalam js?

2

2.1 Pengikat Pembina


Panggil terus panggilan atau gunakan kaedah dalam fungsi anak untuk mengikat pembina objek induk kepada objek anak.



fungsi Stu(nama, markah) {
Grade.apply(this, arguments);
//Grade.call(this, arguments);
This.name = nama,
This.skor = skor
}
fungsi Gred() {
This.code = "Sekolah Menengah Rendah";
This.ask = fungsi () {
console.log("Hello semua");
            }
}
        var stu1 = Stu baharu("张三", 80);
        var stu2 = Stu baharu("李思", 90);
console.log(stu1.code); // Sekolah Menengah Rendah
          stu1.ask(); // Hello semua


Aplikasi di sini melakukan dua perkara Ia memberikan parameter pertama ini kepada pembina Gred (pemanggil), dan kemudian melaksanakan kod dalam Gred. Ia bersamaan dengan melaksanakan ahli yang ditakrifkan dengan ini dalam Gred sekali lagi dalam Stu.

2.2 Pewarisan melalui prototaip

Tengok kod dulu
Kod:

Fungsi Stu(nama, markah) {
This.name = nama,
This.skor = skor
}
fungsi Gred() {
This.code = "Sekolah Menengah Rendah";
}
Stu.prototype = Gred baharu();
Stu.prototype.constructor = Stu; //Cegah gangguan rantaian warisan dan tetapkan semula pernyataan
secara manual         var stu1 = Stu baharu("张三", 80);
        var stu2 = Stu baharu("李思", 90);
console.log(Stu.prototype.constructor); // Pembina sendiri
console.log(stu1.code); // Sekolah Menengah Rendah

Seperti yang dinyatakan sebelum ini, prototaip adalah bersamaan dengan ahli statik dalam C#, jadi kami menukar semua ahli kelas induk kepada ahli statik kami sendiri untuk mencapai warisan.

Terdapat kelemahan pewarisan melalui prototaip: semua ahli yang diwarisi adalah statik, jadi bagaimana untuk mewarisi ahli objek?

2.3 Salin warisan

Salin semua sifat dan kaedah objek induk ke dalam objek anak untuk mencapai pewarisan.

Kod:

Salin kod Kod adalah seperti berikut:

Fungsi Stu(nama, markah) {
This.name = nama,
This.skor = skor
}
fungsi Gred() {}
Grade.prototype.code = "Sekolah Menengah Rendah";
}
//Fungsi enkapsulasi
fungsi extend(C, P) {
          var p = P.prototaip;
          var c = C.prototaip;
untuk (var i dalam p) {
                     c[i] = p[i];
            }
}
lanjutkan(Stu, Gred);
        var stu1 = Stu baharu("张三", 80);
        var stu2 = Stu baharu("李思", 90);
         stu1.code='Sekolah Menengah';
console.log(stu1.code); // Sekolah Menengah
console.log(stu2.code); // Sekolah Menengah Rendah
console.log(Stu.prototype.constructor);
console.log(Grade.prototype.constructor)

Itu sahaja untuk organisasi berorientasikan objek js Perkara ini tidak statik Anda boleh membuat perubahan mengikut keperluan anda sendiri apabila menggunakannya. Ada pepatah yang sangat bagus, yang betul adalah yang terbaik.

Di sini kami hanya menganalisis enkapsulasi dan warisan Kami akan melakukan beberapa artikel lain pada masa hadapan untuk memberi anda pemahaman yang lebih mendalam tentang pengaturcaraan berorientasikan objek JavaScript. Sudah tentu, ini semua adalah pemahaman peribadi Jika terdapat sebarang ketinggalan, sila hubungi saya.

Label berkaitan:
sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan