JavaScript OOP Berorientasi Objek

Pemrograman Berorientasi Objek (OOP) adalah paradigma pemrograman dan juga metode pengembangan program. Objek mengacu pada contoh kelas. Ini menggunakan objek sebagai unit dasar program, merangkum program dan data di dalamnya untuk meningkatkan penggunaan kembali, fleksibilitas, dan skalabilitas perangkat lunak. - Wikipedia

Umumnya, berorientasi objek meliputi: warisan, enkapsulasi, polimorfisme, abstraksi

Warisan bentuk objek

Salinan lampu

 var person = {name: 'allin', usia: 18, alamat: {home: 'home', Office: 'Office',} sclools: ['x', 'z'],}; var programer = {bahasa: 'js',}; fungsi perluasan (p, c) {var c = c | {}; untuk (var prop di p) {c [prop] = p [prop]; }} extension (orang, program); programer.name; // allInprogramer.address.home; // homeprogramer.address.home = 'house'; //houseperson.address.home; // rumah

Dari hasil di atas, cacat salinan dangkal adalah bahwa memodifikasi nilai jenis referensi dalam objek anak akan mempengaruhi nilai dalam objek induk, karena dalam salinan dangkal jenis referensi hanya menyalin alamat dan menunjuk ke salinan yang sama dalam memori.

Salinan yang dalam

 Fungsi ExtentDeeply (p, c) {var c = c || {}; untuk (var prop di p) {if (typeof p [prop] === "objek") {c [prop] = (p [prop] .constructor === array)? []: {}; ExtandingDeeply (p [prop], c [prop]); } else {c [prop] = p [prop]; }}}

Gunakan rekursi untuk penyalinan mendalam, sehingga modifikasi sub-objek tidak akan mempengaruhi objek induk.

 ExtlateDeeply (orang, programer); Programer.address.home = 'allin'; person.address.home; // Home menggunakan panggilan dan berlaku untuk warisan fungsi parent () {this.name = "abc"; this.address = {home: "home"};} function child () {parent.call (ini); this.banguage = "js"; } Object.create () di ES5 var p = {name: 'allin'}; var obj = objek.create (o); obj.name; // allin

Object.create () sebagai alternatif untuk operator baru hanya dirilis setelah ES5. Kita juga dapat mensimulasikan metode ini sendiri:

 // Simulasikan objek.Create () Fungsi metode myCreate (o) {function f () {}; F.prototype = o; o = f () baru; return o;} var p = {name: 'allin'}; var obj = myCreate (o); obj.name; // allin

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 (); }; }

Warisan kelas

 Object.Create () Function Person (Name, Usia) {} Person.Prototype.HeadCount = 1; person.prototype.eat = function () {console.log ('Eating ...');} Fungsi Programmer (nama, usia, judul) {} programmer.prototype = object.create (orang.protype); // Buat Programmer Hubungan Warisan.Prototype.Constructor = Programmer; // Ubah penunjuk konstruktor

Hubungi Metode Kelas Orangtua

 function person (name, use) {this.name = name; this.age = usia;} person.prototype.headcount = 1; person.prototype.eat = function () {console.log ('Eating ...');} Fungsi programmer (nama, usia, judul) {person.Apply (ini, argumen); // Panggil konstruktor kelas induk} programmer.prototype = object.create (person.prototype); Programmer.prototype.constructor = Programmer; Programmer.Prototype.Language = "js"; Programmer.prototype.work = function () {konsol.log ('i am working code in'+ this. Orang.prototype.eat.Apply (ini, argumen); // Panggil metode pada kelas induk}

Kemasan

Namespace

JS tidak memiliki namespace, sehingga dapat disimulasikan dengan objek.

 var app = {}; // aplikasi namespace // modul 1app.module1 = {name: 'allin', f: function () {console.log ('hi robot'); }}; app.module1.name; // "allin" app.module1.f (); // hai robot

Anggota statis

 function person (name) {var usia = 100; this.name = name;} // statis anggota person.walk = function () {console.log ('static');}; person.walk (); // statis

Pribadi dan publik

 function person (id) {// Properti dan metode pribadi var name = 'allin'; var work = function () {console.log (this.id); }; // properti dan metode publik this.id = id; this.say = function () {console.log ('Say Hello'); work.call (ini); };}; var p1 = orang baru (123); p1.name; // undefinedp1.id; // 123p1.say (); // Say Hello 123

Modular

 var modulea; modulea = function () {var prop = 1; fungsi func () {} return {func: func, prop: prop};} (); // Jalankan fungsi anonim segera

Prop, func tidak akan bocor ke ruang lingkup global. Atau cara menulis lain, gunakan yang baru

 modulea = fungsi baru () {var prop = 1; fungsi func () {} this.func = func; this.prop = prop;}

Polimorfik

Muat ulang metode simulasi

Atribut argumen dapat memperoleh jumlah parameter aktual dari panggilan fungsi, dan dapat menggunakannya untuk mensimulasikan kelebihan metode.

 fungsi demo (a, b) {console.log (demo.length); // Dapatkan jumlah parameter formal Console.log (argumen.length); // Dapatkan jumlah parameter aktual konsol.log (argumen [0]); // parameter aktual pertama 4 console.log (argumen [1]); // parameter aktual kedua 5} demo (4, 5, 6); // Implementasikan penambahan fungsi parameter aktual panjang variabel add () {var total = 0; untuk (var i = argumen.length-1; i> = 0; i-) {total += argumen [i]; } return total;} console.log (add (1)); // Implementasikan penambahan fungsi parameter aktual panjang variabel add () {var total = 0; untuk (var i = argumen.length-1; i> = 0; i-) {total += argumen [i]; } return total;} console.log (add (1)); // 1console.log (add (1, 2, 3)); // 7 // dalam hal fungsi parameter yang berbeda fontSize () {var ele = document.getElementById ('js'); if (arguments.length == 0) {return ele.style.fontsize; } else {ele.style.fontsize = argumen [0]; }} fontSize (18); console.log (fontSize ()); // dalam hal berbagai jenis pengaturan fungsi () {var ele = document.getElementById ('js'); if (typeof argumen [0] === "objek") {for (var p dalam argumen [0]) {ele.style [p] = argumen [0] [p]; }} else {ele.style.fontsize = argumen [0]; ele.style.backgroundcolor = argumen [1]; }} pengaturan (18, 'merah'); pengaturan ({fontsize: 20, latar belakangcolor: 'green'});

Metode menulis ulang

 fungsi f () {} var f = baru f (); f.prototype.run = function () {console.log ('f');} f.run (); // ff.run = function () {console.log ('fff');} f.run (); // fff

Kelas abstrak

Lempar kesalahan baru (''); dalam konstruktor melempar pengecualian. Ini mencegah kelas ini dipanggil secara langsung.

 function detectorBase () {throw new error ('Kelas abstrak tidak dapat dipanggil secara langsung!');} detectorbase.prototype.detect = function () {console.log ('Deteksi Mulai ...');}; detectorbase.prototype.stop = function () {konsol.log ('detectore.'); detectore; function {) {console.log ('stop. throw new Error('Error');};// var d = new DetectorBase();// Uncaught Error: Abstract class can not be invoked directly!function LinkDetector() {}LinkDetector.prototype = Object.create(DetectorBase.prototype);LinkDetector.prototype.constructor = LinkDetector;var l = new LinkDetector();console.log(l); // LinkDetector {} __ Proto__: LinkDetectorl.Detect (); // Deteksi Mulai ... l.init (); // Kesalahan Tak Terbang: Kesalahan