Rumah  >  Artikel  >  hujung hadapan web  >  Pelajari kemahiran pengaturcaraan berorientasikan objek Javascript encapsulation_javascript

Pelajari kemahiran pengaturcaraan berorientasikan objek Javascript encapsulation_javascript

WBOY
WBOYasal
2016-05-16 15:14:141198semak imbas

Javascript ialah bahasa berasaskan objek dan hampir semua yang anda temui adalah objek. Walau bagaimanapun, ia bukan bahasa pengaturcaraan berorientasikan objek (OOP) sebenar kerana tiada kelas dalam sintaksnya.
Jadi, jika kita ingin merangkum "harta" dan "kaedah" ke dalam objek, atau menjana objek contoh daripada objek prototaip, apakah yang perlu kita lakukan?
1. Mod penjanaan objek asal
Katakan kita menganggap kucing sebagai objek, yang mempunyai dua sifat: "nama" dan "warna".

var Cat = {
    name : '',
    color : ''
  }

Sekarang, kita perlu menjana dua objek contoh berdasarkan spesifikasi (skema) objek prototaip ini.

var cat1 = {}; // 创建一个空对象
    cat1.name = "大毛"; // 按照原型对象的属性赋值
    cat1.color = "黄色";
  var cat2 = {};
    cat2.name = "二毛";
    cat2.color = "黑色";

Baiklah, ini adalah enkapsulasi paling mudah, merangkum dua sifat ke dalam objek. Walau bagaimanapun, cara penulisan ini mempunyai dua kelemahan Pertama, jika lebih banyak contoh dihasilkan, ia akan menjadi sangat menyusahkan untuk menulis, kedua, tidak ada cara untuk melihat hubungan antara contoh dan prototaip.
2. Penambahbaikan kepada mod asal
Kita boleh menulis fungsi untuk menyelesaikan masalah pertindihan kod.

function Cat(name,color){
    return {
      name:name,
      color:color
    }
  }

Kemudian menjana objek contoh adalah bersamaan dengan memanggil fungsi:

var cat1 = Cat("大毛","黄色");
  var cat2 = Cat("二毛","黑色");

Masalah kaedah ini ialah tiada kaitan intrinsik antara cat1 dan cat2, dan ia tidak dapat menggambarkan bahawa ia adalah contoh objek prototaip yang sama.
3. Corak pembina
Untuk menyelesaikan masalah menjana contoh daripada objek prototaip, Javascript menyediakan corak pembina (Pembina).
Apa yang dipanggil "pembina" sebenarnya adalah fungsi biasa, tetapi pembolehubah ini digunakan secara dalaman. Menggunakan pengendali baharu pada pembina akan menjana contoh, dan pembolehubah ini akan terikat pada objek contoh.
Sebagai contoh, objek prototaip kucing kini boleh ditulis seperti ini,

 function Cat(name,color){
    this.name=name;
    this.color=color;
  }

Kini kami boleh menjana objek contoh.

 var cat1 = new Cat("大毛","黄色");
  var cat2 = new Cat("二毛","黑色");
  alert(cat1.name); // 大毛
  alert(cat1.color); // 黄色

Pada masa ini, cat1 dan cat2 secara automatik akan mengandungi atribut pembina yang menunjuk kepada pembinanya.

alert(cat1.constructor == Cat); //true
  alert(cat2.constructor == Cat); //true

Javascript juga menyediakan operator instanceof untuk mengesahkan hubungan antara objek prototaip dan objek instance.

 alert(cat1 instanceof Cat); //true
  alert(cat2 instanceof Cat); //true

4. Masalah dengan corak pembina
Kaedah pembina mudah digunakan, tetapi terdapat masalah membazir memori.
Sila lihat, kami kini menambah atribut tidak boleh ubah "jenis" (jenis) pada objek Cat, dan kemudian menambah kaedah makan (makan tikus). Kemudian, objek prototaip Cat menjadi seperti berikut:

 function Cat(name,color){
    this.name = name;
    this.color = color;
    this.type = "猫科动物";
    this.eat = function(){alert("吃老鼠");};
  }

Gunakan kaedah yang sama untuk menjana tika:

 var cat1 = new Cat("大毛","黄色");
  var cat2 = new Cat ("二毛","黑色");
  alert(cat1.type); // 猫科动物
  cat1.eat(); // 吃老鼠

Pada zahirnya, nampaknya tiada masalah, tetapi sebenarnya ada keburukan besar dalam melakukan ini. Iaitu, untuk setiap objek contoh, atribut jenis dan kaedah eat() mempunyai kandungan yang sama Setiap kali kejadian dijana, ia mesti menduduki lebih banyak memori untuk kandungan berulang. Ini tidak mesra alam dan tidak cekap.

alert(cat1.eat == cat2.eat); //false

Bolehkah atribut jenis dan kaedah eat() dijana sekali sahaja dalam ingatan, dan kemudian semua kejadian menghala ke alamat memori tersebut? Jawapannya ya.
5. Mod prototaip
Javascript menetapkan bahawa setiap pembina mempunyai atribut prototaip yang menunjuk ke objek lain. Semua sifat dan kaedah objek ini akan diwarisi oleh contoh pembina.
Ini bermakna kita boleh mentakrifkan sifat dan kaedah tidak berubah tersebut secara langsung pada objek prototaip:

 function Cat(name,color){
    this.name = name;
    this.color = color;
  }
  Cat.prototype.type = "猫科动物";
  Cat.prototype.eat = function(){alert("吃老鼠")};

Kemudian, jana tika itu.

 var cat1 = new Cat("大毛","黄色");
  var cat2 = new Cat("二毛","黑色");
  alert(cat1.type); // 猫科动物
  cat1.eat(); // 吃老鼠

Pada masa ini, atribut jenis dan kaedah eat() bagi semua kejadian sebenarnya adalah alamat memori yang sama, menunjuk ke objek prototaip, sekali gus meningkatkan kecekapan pengendalian.

 alert(cat1.eat == cat2.eat); //true

6. Kaedah pengesahan mod Prototaip
Untuk bekerjasama dengan atribut prototaip, Javascript mentakrifkan beberapa kaedah tambahan untuk membantu kami menggunakannya. ,
6.1 isPrototypeOf()
Kaedah ini digunakan untuk menentukan hubungan antara objek proptotaip tertentu dan kejadian.

 alert(Cat.prototype.isPrototypeOf(cat1)); //true
  alert(Cat.prototype.isPrototypeOf(cat2)); //true

6.2 hasOwnProperty()
Setiap objek contoh mempunyai kaedah hasOwnProperty(), yang digunakan untuk menentukan sama ada harta tertentu ialah harta tempatan atau harta yang diwarisi daripada objek prototaip.

 alert(cat1.hasOwnProperty("name")); // true
  alert(cat1.hasOwnProperty("type")); // false

6.3 dalam pengendali
Operator dalam boleh digunakan untuk menentukan sama ada suatu kejadian mengandungi atribut tertentu, sama ada ia adalah atribut tempatan atau tidak.

 alert("name" in cat1); // true
  alert("type" in cat1); // true
Operator

in juga boleh digunakan untuk melintasi semua sifat objek.

 for(var prop in cat1) { alert("cat1["+prop+"]="+cat1[prop]); }

Di atas adalah mengenai enkapsulasi javascript Saya harap ia akan membantu pembelajaran semua orang.

Kenyataan:
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