Ringkasan Skema Membuat Objek dalam JavaScript
** JavaScript membuat pola objek:
Objek literal
Model pabrik
Mode konstruktor
Mode prototipe
Menggabungkan pola konstruktor dan prototipe
Mode Dinamis Prototipe
**
Sebagian besar bahasa yang berorientasi objek memiliki konsep kelas, di mana banyak objek dengan metode dan atribut yang sama dapat dibuat. Meskipun secara teknis, JavaScript adalah bahasa yang berorientasi objek, JavaScript tidak memiliki konsep kelas, semuanya adalah objek. Objek apa pun adalah instance dari jenis referensi tertentu dan dibuat melalui jenis referensi yang ada; Jenis referensi bisa asli atau disesuaikan.
1. Objek literal
var person = {name: 'nicholas'; Usia: '22'; Pekerjaan: "Insinyur Perangkat Lunak" mengatakan nama: function () {alter (this.name); }}Dalam contoh, objek bernama orang dibuat dan tiga atribut (nama, usia, pekerjaan) dan metode (sayname ()) ditambahkan ke dalamnya. Metode SayName () digunakan untuk menampilkan nilai ini.name (diselesaikan sebagai orang.name).
Literal objek dapat digunakan untuk membuat objek tunggal, tetapi metode ini memiliki kerugian yang jelas: membuat banyak objek menggunakan antarmuka yang sama akan menghasilkan banyak kode duplikat.
2. Model pabrik
Pola pabrik adalah pola desain yang terkenal di bidang rekayasa perangkat lunak. Pola Pabrik Abstrak Proses membuat objek spesifik dan menggunakan fungsi untuk merangkum detail membuat objek dengan antarmuka tertentu.
function createPerson (nama, usia, pekerjaan) {var o = objek baru {}; o.name = nama; o.age = usia; o.job = pekerjaan; o.sayname = function () {alert (this.name); }; return o;} var person1 = createPerson ("Nicholas", 22, "Software Engineer"); var person2 = createPerson ("greg", 24, "mahasiswa");Fungsi createPerson {} dapat membangun objek orang yang berisi semua informasi yang diperlukan berdasarkan parameter yang diterima. Fungsi ini dapat disebut berkali -kali, dan setiap kali akan mengembalikan objek yang berisi tiga properti dan satu metode.
Meskipun model pabrik memecahkan masalah membuat beberapa objek serupa, itu tidak menyelesaikan masalah pengenalan objek (mis. Cara mengetahui jenis objek).
3. Mode Konstruktor
Function Person (Name, Umur, Job) {this.name = name; this.age = usia; this.job = pekerjaan; this.sayname = function () {alert (this.name); }} // Buat instance orang melalui operator baru var person1 = orang baru ("nicholas", 22, "insinyur perangkat lunak"); var person2 = orang baru ("greg", 24, "mahasiswa"); orang1.sayname (); //Nicholasperson2.sayname (); // gregPerbedaan dari model pabrik adalah
Buat objek yang tidak ditampilkan
Tetapkan atribut dan metode langsung ke objek ini
Tidak ada pernyataan pengembalian
Untuk membuat instance orang baru, Anda harus menggunakan operator baru. 4 langkah untuk menelepon konstruktor:
Buat Objek Baru
Tetapkan ruang lingkup konstruktor ke objek baru (ini menunjuk ke objek baru ini)
Menjalankan kode di konstruktor
Mengembalikan objek baru
Semua objek yang dibuat dalam contoh ini adalah contoh objek dan orang. Itu dapat diverifikasi dengan contoh operator.
waspada (person1 instance dari objek); // true
Pola konstruktor juga memiliki masalah sendiri. Bahkan, metode Sayname akan diciptakan kembali sekali pada setiap contoh. Perlu dicatat bahwa metode yang dibuat oleh instantiasi tidak sama. Kode berikut dapat membuktikannya
alert (person1.sayname == person2.sayname); // false
Masalah ini dapat diselesaikan dengan memindahkan metode di luar konstruktor sebagai fungsi global.
Function Person (Name, Umur, Job) {this.name = name; this.age = usia; this.job = pekerjaan; } function Wissname () {waspada (this.name); }Fungsi global yang dibuat di dunia global sebenarnya dapat disebut dengan contoh yang dibuat oleh orang, yang sedikit tidak realistis; Jika objek perlu mendefinisikan metode yang sangat benar, maka banyak fungsi global perlu didefinisikan, yang tidak memiliki enkapsulasi.
4. Mode prototipe
Setiap fungsi yang dibuat dalam JavaScript memiliki properti prototipe, yang merupakan penunjuk ke suatu objek, berisi properti dan metode yang dapat dibagikan oleh semua contoh jenis tertentu (biarkan semua instance objek berbagi sifat dan metode)
function person () {} person.prototype.name = "nicholas"; Person.prototype.age = 22; Orang.prototype.job = "Insinyur Perangkat Lunak"; Person.prototype.sayname () {waspada (this.name); }; var person1 = orang baru (); person1.sayname (); //Nicholasalert(person1.sayname == person2.sayname); // trueKode di atas melakukan hal -hal ini:
Tentukan orang konstruktor. Fungsi orang secara otomatis memperoleh properti prototipe. Properti ini hanya berisi properti konstruktor yang menunjuk ke orang secara default.
Tambahkan tiga properti dan satu metode melalui orang. Prototype
Buat instance orang, dan kemudian hubungi metode SayName () pada instance
Menggunakan orang konstruktor dan orang. Prototype untuk membuat instance sebagai contoh, untuk menunjukkan hubungan antar objek
Menggunakan orang konstruktor dan orang. Prototype untuk membuat instance sebagai contoh, untuk menunjukkan hubungan antar objek
Angka tersebut menunjukkan hubungan antara konstruktor orang, properti prototipe orang, dan dua contoh orang. Person.prototype menunjuk ke objek prototipe, tuan.prototype.constructor point kembali ke orang. Selain berisi atribut konstruktor, objek prototipe juga berisi sifat dan metode lain yang ditambahkan kemudian. Dua contoh orang 1 dan person2 berisi properti internal, yang hanya menunjuk ke orang. Prototipe.
Proses panggilan metode SayName ():
Mencari metode LOGNAME () pada instance orang1, saya menemukan bahwa tidak ada metode seperti itu, jadi saya menelusuri kembali ke prototipe orang1
Cari metode Sayame () pada prototipe orang1. Ada metode ini, jadi metode ini disebut
Berdasarkan proses pencarian seperti itu, kami dapat mencegah instance mengakses atribut nama yang sama pada prototipe dengan mendefinisikan atribut nama yang sama dalam prototipe pada instance. Perlu dicatat bahwa melakukan hal itu tidak akan menghapus atribut nama yang sama pada prototipe, tetapi hanya akan mencegah instance mengakses.
function person () {} person.prototype.name = "nicholas"; Person.prototype.age = 22; Orang.prototype.job = "Insinyur Perangkat Lunak"; Person.prototype.sayname () {waspada (this.name); }; var person1 = orang baru (); var person2 = orang baru (); person1.name = "greg" alert (person1.name) // Greg berasal dari peringatan instance (person2.name) // Nicholas berasal dari prototipeGunakan operator hapus untuk sepenuhnya menghapus properti instance
Hapus orang1.name; waspada (person1.name) // nicholas dari prototipe
Gunakan metode hasownproperty () untuk mendeteksi apakah ada properti dalam sebuah instance atau prototipe
function person () {} person.prototype.name = "nicholas"; Person.prototype.age = 22; Orang.prototype.job = "Insinyur Perangkat Lunak"; Person.prototype.sayname () {waspada (this.name); }; var person1 = orang baru (); var person2 = orang baru (); waspada (person1, hasownproperty ("name")); // false person1.name = "greg" alert (person1.name) // greg dari instance alert (person1, hasownproperty ("name")); // truealert (person2.name) // nicholas dari prototipe waspada (person2, hasownert ("nameprope) dari prototipe (person2, hasownert (" hasowner) // name) dari prototipe (Person2, Hasowner ("hasowner) // name) person1.name; alert (person1.name) // nicholas dari prototipe alert (person1, hasownproperty ("name")); // falseGambar berikut menunjukkan hubungan antara instance dan prototipe dalam situasi yang berbeda
Sintaks prototipe sederhana
function person () {} person.prototype = {name: "nicholas", usia: 22, pekerjaan: "insinyur perangkat lunak", sayname: function () {alert (this.name); }};Dalam kode di atas, atribut konstruktor tidak lagi menunjuk ke orang, dan jenis objek tidak dapat ditentukan melalui konstruktor. Anda dapat mengaturnya kembali ke nilai yang sesuai seperti di bawah ini
function person () {} person.prototype = {konstruktor: orang, nama: "nicholas", usia: 22, pekerjaan: "insinyur perangkat lunak", sayname: function () {waspada (this.name); }};Mengatur ulang properti konstruktor akan menyebabkan properti [[enumerable]] -nya diatur ke true. Secara default, properti konstruktor asli tidak dapat dihitung. Anda dapat menggunakan metode object.defineproperty () untuk mengubahnya.
Object.defineproperty (person.prototype, "constructor", {enumerable: false, value: person});Proses menemukan nilai dalam prototipe adalah pencarian, dan modifikasi apa pun yang dibuat oleh objek prototipe dapat segera tercermin dari instance.
var friend = orang baru (); orang.prototype.sayhi = function () {alert ("hai);} teman, sayhi (); //" hai "(tidak masalah)Contoh orang dibuat sebelum menambahkan metode baru, tetapi masih memiliki akses ke metode yang baru ditambahkan karena koneksi longgar antara instance dan prototipe
Situasi setelah menulis ulang objek prototipe
function person () {} var teman = orang baru (); Person.prototype = {name: "nicholas", usia: 22, job: "software engineer", sayname: function () {alert (this.name); }}; friend.sayname (); // errorAlasan kesalahan saat memanggil teman.
Masalah objek prototipe
Objek prototipe menghilangkan proses lulus parameter inisialisasi untuk konstruktor, dan semua kekuatan memperoleh nilai atribut yang sama secara default. Masalah terbesar dengan model prototipe adalah bahwa mereka memiliki sifat bersama mereka. Ketika model prototipe berisi atribut jenis referensi, masalahnya lebih serius. Mari kita lihat contoh berikut.
function person () {} person.prototype = {konstruktor: orang, nama: "nicholas", usia: 22, pekerjaan: "insinyur perangkat lunak", teman: ["shelby", "court"], sayname: function () {alert (this.name); }}; var person1 = orang baru (); var person2 = orang baru (); person1.friend.push ("van"); waspada (person1.friends); // "Shelby, Court, Van" Alert (Person2.Friends); // "Shelby, Court, Van" Alert (Person1.Friends == Person2.Friends); // Benar5. Menggabungkan mode konstruktor dan mode prototipe
Dalam kombinasi mode konstruktor dan mode prototipe, konstruktor digunakan untuk mendefinisikan sifat instance, dan model prototipe digunakan untuk menentukan metode dan sifat bersama. Dengan cara ini, setiap instance akan memiliki salinannya sendiri dari atribut instance, dan juga dapat berbagi referensi untuk metode, menyimpan memori ke tingkat maksimum.
Function Person (Name, Umur, Job) {this.name = name; this.age = usia; this.job = pekerjaan; this.friends = ["shelby", "court"];} person.prototype = {constructor: person, sayname: function () {alert (this.name); }} var person1 = orang baru ("Nicholas", 22, "Insinyur Perangkat Lunak"); var Person2 = orang baru ("Greg", 24, "Siswa"); person1.friend.push ("van"); waspada (person1.friends); // "Shelby, Court, Van" Alert (Person2.Friends); // "Shelby, Court" Alert (Person1.Friends == Person2.Friends); // false alert (Person1.SayName == Person2.sayname); // Benar6. Mode Prototipe Dinamis
Mode dinamis prototipe merangkum semua informasi yang diperlukan ke dalam konstruktor, dan menggunakan pernyataan IF untuk menentukan apakah properti tertentu dalam prototipe ada. Jika tidak ada (ketika konstruktor dipanggil untuk pertama kalinya), jalankan kode inisialisasi prototipe di dalam pernyataan IF.
function person (name, use) {this.name = name; this.age = usia; this.job = job; // metode if (typeof this.sayname! = 'function') {person.prototype.sayname = function () {waspada (this.name); }; }} var friend = orang baru ('Nicholas', '22', 'Software Engineer'); // Konstruktor dipanggil untuk pertama kalinya, dan prototipe dimodifikasi pada saat ini var person2 = orang baru ('Amy', '21'); // Metode Sayname () sudah ada dan prototipe tidak akan dimodifikasi lagi lagiBacaan yang Disarankan:
Beberapa cara umum untuk membuat objek dalam objek JS berorientasi (mode pabrik, mode konstruktor, mode prototipe)
Di atas adalah pola membuat objek dalam JavaScript yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu semua orang!