Penjelasan asas berorientasikan objek JS (mod kilang, mod pembina, mod prototaip, mod campuran, mod prototaip dinamik)_kemahiran javascript

Apakah itu berorientasikan objek? Berorientasikan objek adalah pemikiran! (karut).

Berorientasikan objek boleh menganggap modul utama dalam program sebagai objek, dan modul mempunyai sifat dan kaedah. Dengan cara ini, jika kita merangkum beberapa sifat dan kaedah, ia akan menjadi sangat mudah untuk digunakan pada masa hadapan, dan kita juga boleh mengelakkan kerja yang membosankan dan berulang. Seterusnya, saya akan menerangkan pelaksanaan berorientasikan objek dalam JS.

Mod kilang

Corak kilang ialah corak reka bentuk yang terkenal dalam bidang kejuruteraan perisian Memandangkan kelas tidak boleh dibuat dalam ECMAScript, enkapsulasi fungsi digunakan untuk mencipta objek dengan antara muka tertentu. Kaedah pelaksanaan adalah sangat mudah, iaitu, cipta objek dalam fungsi, tetapkan sifat dan kaedah kepada objek, dan kemudian kembalikan objek.

function createBlog(name, url) {
  var o = new Object();
  o.name = name;
  o.url = url;
  o.sayUrl= function() {
    alert(this.url);
  }
  return o;
}

var blog1 = createBlog('wuyuchang', 'http://www.jb51.net/');

Anda dapat melihat bahawa kaedah pelaksanaan corak kilang adalah sangat mudah, yang menyelesaikan masalah mencipta berbilang objek yang serupa Namun, corak kilang tidak dapat mengenal pasti jenis objek kerana semuanya adalah Objek, tidak seperti Tarikh, Array, dan lain-lain, jadi terdapat corak Pembina.

　Corak Pembina

Pembina dalam ECMAScript boleh mencipta objek jenis tertentu, serupa dengan objek JS asli seperti Array dan Date. Kaedah pelaksanaan adalah seperti berikut:

function Blog(name, url) {
  this.name = name;
  this.url = url;
  this.alertUrl = function() {
    alert(this.url);
  }
}

var blog = new Blog('wuyuchang', 'http://www.jb51.net/');
console.log(blog instanceof Blog);  // true， 判断blog是否是Blog的实例，即解决了工厂模式中不能

Kecuali nama fungsi yang berbeza antara contoh ini dan model kilang, kanak-kanak yang berhati-hati harus menemui banyak perbezaan:

Huruf pertama nama fungsi hendaklah menggunakan huruf besar (Walaupun piawaian tidak memerlukan huruf besar huruf pertama, mengikut konvensyen, huruf pertama pembina hendaklah menggunakan huruf besar
Tiada objek yang dicipta ditunjukkan
Tetapkan sifat dan kaedah secara langsung kepada objek ini
Tiada kenyataan pemulangan
Gunakan baharu untuk mencipta objek
Dapat mengenali objek (di sinilah corak pembina lebih baik daripada corak kilang)

Walaupun pembina mudah digunakan, ia bukan tanpa kekurangannya Masalah terbesar dengan menggunakan pembina ialah kaedah mesti dicipta semula setiap kali contoh dicipta (secara teori, sifat objek adalah. berbeza setiap kali objek dicipta Kaedah objek adalah sama), tetapi tidak perlu mencipta kaedah yang sama dua kali, jadi kita boleh memindahkan fungsi di luar objek (mungkin beberapa kanak-kanak telah melihat kekurangan, boo!).

function Blog(name, url) {
  this.name = name;
  this.url = url;
  this.alertUrl = alertUrl;
}

function alertUrl() {
  alert(this.url);
}

var blog = new Blog('scjb51', 'http://sc.jb51.net/'),
  blog2 = new Blog('jb51', 'http://www.jb51.net/');
blog.alertUrl();  // http://sc.jb51.net/
blog2.alertUrl();  // http://www.jb51.net/

Kami menetapkan alertUrl sebagai fungsi global, supaya blog dan blog2 mengakses fungsi yang sama Tetapi masalah itu datang lagi agak sesuai dengan namanya. Apa yang lebih tidak boleh diterima ialah banyak kaedah ditakrifkan dalam skop global yang hanya digunakan oleh objek tertentu, apatah lagi membuang ruang, ia jelas kehilangan pengkapsulan berorientasikan objek, jadi ini boleh diselesaikan melalui prototaip. soalan .

　Mod prototaip

Setiap fungsi yang kami cipta mempunyai atribut prototaip, yang merupakan penunjuk kepada objek, dan tujuan objek ini adalah untuk mengandungi sifat dan kaedah yang boleh dikongsi oleh semua kejadian jenis tertentu. Kelebihan menggunakan objek prototaip ialah semua contoh objek boleh berkongsi sifat dan kaedah yang terkandung di dalamnya.

function Blog() {
}

Blog.prototype.name = 'wuyuchang';
Blog.prototype.url = 'http://tools.jb51.net/';
Blog.prototype.friend = ['fr1', 'fr2', 'fr3', 'fr4'];
Blog.prototype.alertInfo = function() {
  alert(this.name + this.url + this.friend );
}

// 以下为测试代码
var blog = new Blog(),
  blog2 = new Blog();
blog.alertInfo();  // wuyuchanghttp://tools.jb51.net/fr1,fr2,fr3,fr4
blog2.alertInfo();  // wuyuchanghttp://tools.jb51.net/fr1,fr2,fr3,fr4

blog.name = 'wyc1';
blog.url = 'http://***.com';
blog.friend.pop();
blog2.name = 'wyc2';
blog2.url = 'http://+++.com';
blog.alertInfo();  // wyc1http://***.comfr1,fr2,fr3
blog2.alertInfo();  // wyc2http://+++.comfr1,fr2,fr3

Corak prototaip bukan tanpa kekurangannya Pertama sekali, ia mengecualikan pembina untuk lulus parameter permulaan Akibatnya, semua keadaan memperoleh nilai atribut yang sama secara lalai masih bukan prototaip Masalah terbesar, masalah terbesar dengan corak prototaip adalah disebabkan oleh sifat perkongsian, jika satu contoh mengubah rujukan, yang lain juga mengubah rujukan. Oleh itu, kami biasanya tidak menggunakan prototaip sahaja, tetapi menggabungkan corak prototaip dan corak pembina.

　Mod campuran (mod prototaip, mod pembina)

function Blog(name, url, friend) {
  this.name = name;
  this.url = url;
  this.friend = friend;
}

Blog.prototype.alertInfo = function() {
  alert(this.name + this.url + this.friend);
}

var blog = new Blog('wuyuchang', 'http://tools.jb51.net/', ['fr1', 'fr2', 'fr3']),
  blog2 = new Blog('wyc', 'http://**.com', ['a', 'b']);

blog.friend.pop();
blog.alertInfo();  // wuyuchanghttp://tools.jb51.net/fr1,fr2
blog2.alertInfo();  // wychttp://**.coma,b

Dalam mod campuran, mod pembina digunakan untuk menentukan sifat contoh, manakala mod prototaip digunakan untuk menentukan kaedah dan sifat kongsi. Setiap contoh akan mempunyai atribut contoh sendiri, tetapi pada masa yang sama berkongsi kaedah, menjimatkan memori ke tahap maksimum. Selain itu, mod ini juga menyokong lulus parameter awal. Banyak kelebihannya. Mod ini ialah kaedah yang paling banyak digunakan dan diiktiraf untuk mencipta objek tersuai dalam ECMAScript.

　Mod Prototaip Dinamik

Mod prototaip dinamik merangkum semua maklumat dalam pembina, dan dengan memulakan prototaip dalam pembina (hanya prototaip dimulakan apabila objek pertama dimulakan), anda boleh memilih sama ada untuk memulakan prototaip dengan menilai sama ada kaedah itu sah.

function Blog(name, url) {
  this.name = name;
  this.url = url;

  if (typeof this.alertInfo != 'function') {
    // 这段代码只执行了一次
    alert('exe time');
    Blog.prototype.alertInfo = function() {
      alert(thia.name + this.url);
    }
  }
}

var blog = new Blog('wuyuchang', 'http://tools.jb51.net'),
  blog2 = new Blog('wyc', 'http:***.com');

Anda boleh melihat bahawa dalam contoh di atas, tetingkap hanya muncul sekali, 'exe time', iaitu, apabila blog dimulakan Dengan cara ini, blog2 tidak lagi perlu memulakan prototaip mencipta objek menggunakan mod ini.

Catatan blog ini merujuk kepada edisi ke-3 "Pengaturcaraan Lanjutan dengan JavaScript ", tetapi bahasa telah dipermudahkan dan contoh telah ditulis semula Jika ada apa-apa yang anda tidak faham, sila tinggalkan jawapan dan penulis akan mengemaskini blog.