Ringkasan Skema Membuat Objek dalam JavaScript

Penulis：Eve Cole Waktu Pembaruan：2025-08-03 05:00:03

** 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 (); // greg

Perbedaan 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); // true

Kode 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

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 prototipe

Gunakan 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")); // false

Gambar 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 (); // error

Alasan 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); // Benar

5. 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); // Benar

6. 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 lagi

Bacaan 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!