Objek dalam JavaScript

Saya memulakan satu siri siaran tentang konsep JavaScript, dan ini hanyalah permulaan. Dalam siaran pertama ini, konsep asas objek akan diterokai, yang penting untuk memahami cara struktur data berfungsi dalam JavaScript.

Nantikan siaran seterusnya, yang akan meneruskan artikel ini dan beberapa topik lain.

---

Apakah objek?

dunia sebenar, objek ialah entiti (nyata atau abstrak). Contohnya: pensel, kereta, buku nota. Setiap objek ini mempunyai sifat tertentu. Contohnya: kereta biru, pensel merah atau buku nota besar.

Dalam JavaScript, objek ialah entiti bebas yang mengumpul sifat. Sifat ialah perkaitan antara nama dan nilai, iaitu maklumat yang menerangkan objek.

const carro = {
  cor: "amarelo",
  tamanho: "grande",
};

Dalam contoh ini, warna dan saiz ialah sifat objek kereta, dan setiap daripadanya mempunyai nilai yang berkaitan.

Mencipta Objek

Sintaks literal

Objek literal dicipta dengan cara yang mudah dan langsung, di mana nilai telah ditakrifkan secara manual. Sintaks ini sesuai apabila anda mempunyai set sifat tetap untuk objek.

const pessoa = {
  nome: "João",
  idade: 19,
  rua: "Rua Erva Daninha",
};

Objek jenis ini berguna apabila sifat tidak kerap berubah atau apabila anda perlu membuat objek dengan nilai tetap dengan cepat.

Fungsi Pembina

Fungsi pembina digunakan untuk mencipta objek secara dinamik, terutamanya apabila anda memerlukan berbilang objek yang serupa. Apabila menggunakan kata kunci baharu, objek baharu dicipta yang merujuk kepada fungsi pembina.

function NomeDoConstrutor(parâmetros) {

  this.propriedade1 = valor1;
  this.propriedade2 = valor2;

  this.método = function() {
    // Código do método
  };
}

const variavel1 = new NomeDoConstrutor(parâmetros)
const variavel2 = new NomeDoConstrutor(parâmetros)

Sebagai contoh yang lebih konvensional dan kurang akademik:

function Pessoa(nome, idade) {
  this.nome = nome;
  this.idade = idade;

  this.cumprimentar = function () {
    console.log("Olá, meu nome é " + this.nome);
  };
}

const pessoa1 = new Pessoa("João", 30);
const pessoa2 = new Pessoa("Maria", 25);

pessoa1.cumprimentar(); // Olá, meu nome é João
pessoa2.cumprimentar(); // Olá, meu nome é Maria

Dalam kes ini, output akan "Dicap" dengan nilai yang diberikan oleh pembolehubah person1 dan person2 dalam model yang ditetapkan oleh fungsi Person.

Penggunaan perkataan Ini

Dalam pembina, kami menggunakan kata kunci ini untuk merujuk kepada objek yang dibuat. Ini membolehkan anda menentukan sifat dinamik dan kaedah untuk objek.

Sebagai contoh, dalam kod di atas, this.name dan this.age mentakrifkan sifat objek dan kaedah salam ialah fungsi yang dikaitkan dengan objek.

Warisan dalam pembina

Warisan dalam JavaScript berfungsi melalui prototaip. Daripada mencipta satu objek terus daripada yang lain, anda membuat hierarki di mana satu objek boleh mewarisi sifat dan kaedah daripada yang lain. Ini dilakukan menggunakan kaedah panggilan atau gunakan.

const carro = {
  cor: "amarelo",
  tamanho: "grande",
};

Bagaimanakah Warisan berfungsi?

Apabila kami menggunakan Pessoa.call(ini, nome), kami memanggil pembina Pessoa dan menghantar konteks objek Pelajar. Ini menyebabkan objek pelajar1 mewarisi harta nama daripada Orang dan juga mempunyai harta umur, yang eksklusif untuk fungsi Pelajar.

Fungsi konstruktor paling banyak digunakan apabila terdapat keperluan untuk mencipta beberapa objek dengan banyak sifat dan kaedah dengan nilai berubah. Dalam kes ini, lebih baik menggunakan objek pembina sebagai "setem" daripada menulis berbilang objek secara manual.

Objek pembina

Objek yang dibuat menggunakan fungsi pembina ialah kejadian yang dijana oleh pengendali baharu. Setiap kejadian mempunyai sifatnya sendiri, tetapi berkongsi kaedah yang ditakrifkan dalam prototaip fungsi pembina.

Ini bermakna jika anda mencipta berbilang objek daripada fungsi pembina, ia akan mempunyai kaedah yang sama tetapi nilai berbeza untuk sifatnya.

const pessoa = {
  nome: "João",
  idade: 19,
  rua: "Rua Erva Daninha",
};

• Dalam kes ini, pengendali baharu mencipta objek baharu, mengikat konteks (ini) kepada fungsi pembina

• Untuk kaedah yang dikongsi, adalah lebih cekap untuk menambah prototaip fungsi pembina. Ini mengelakkan pertindihan dalam ingatan.
  

function NomeDoConstrutor(parâmetros) {

  this.propriedade1 = valor1;
  this.propriedade2 = valor2;

  this.método = function() {
    // Código do método
  };
}

const variavel1 = new NomeDoConstrutor(parâmetros)
const variavel2 = new NomeDoConstrutor(parâmetros)

Dengan mentakrifkan kaedah dalam prototaip fungsi pembina, kami mengelakkan pertindihan kod. Daripada setiap objek mempunyai salinan kaedah, mereka semua berkongsi kaedah yang sama, menjimatkan memori.

Pengendali baharu mencipta objek baharu dan mengikat konteks (ini) kepada fungsi pembina.

Untuk kaedah yang dikongsi, adalah lebih cekap untuk menambahkannya pada prototaip fungsi pembina, mengelakkan pertindihan dalam ingatan.

Atas ialah kandungan terperinci Objek dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!