Konsep JavaScript yang hebat yang anda akan dapati keren juga

Selepas beberapa tahun bekerja dengan JavaScript, saya menyedari bahawa banyak masalah yang saya hadapi menjadi mencabar hanya kerana saya tidak mengetahui beberapa konsep penting. Jika saya menguasai topik ini lebih awal, saya pasti akan mengelakkan tekanan.

Jadi, saya membawa 4 konsep yang entah bagaimana terlekat dalam kepala saya dan saya hanya TERUJA apabila saya belajar dan saya syorkan untuk melihat dan memahami cara bekerja dengan JavaScript, terutamanya bagi mereka yang baru bermula dan sudah mempunyai sekurang-kurangnya konsep asas bahasa.

1. Penutupan

Penutupan ialah salah satu konsep yang paling berkuasa dan sering mengelirukan dalam JavaScript, berkaitan dengan skop. Mereka membenarkan fungsi untuk "mengingat" persekitaran di mana ia dicipta, walaupun selepas persekitaran itu tidak lagi berjalan. Ini berguna untuk mencipta pembolehubah "peribadi" dan mengurus keadaan tanpa mencemarkan skop global.

Contoh:

function criarContador() {
    let contador = 0;

    return {
        incrementar: function() {
            contador++;
            return contador;
        },
        obterValor: function() {
            return contador;
        }
    };
}

const meuContador = criarContador();

console.log(meuContador.obterValor()); // 0
console.log(meuContador.incrementar()); // 1
console.log(meuContador.incrementar()); // 2
console.log(meuContador.obterValor()); // 2

Dalam contoh di atas, fungsi dalaman mengakses pembolehubah pembilang, yang dimiliki oleh fungsi luaran, walaupun selepas myCounter telah mengembalikan nilai menggunakan sama adaobtainValor atau naikkannya. Ini boleh dilakukan kerana penutupan.

2. Warisan Prototaip

Walaupun JavaScript menyokong kelas dan warisan kelas (konsep yang mantap dalam bahasa seperti Java atau C), ia membezakan dirinya dengan menggunakan model warisan berasaskan prototaip secara asli. Dalam JavaScript, setiap objek mempunyai "prototaip", yang berfungsi sebagai sejenis pelan tindakan (template), membenarkan sifat dan kaedah dikongsi antara objek. Model pewarisan prototaip ini merupakan salah satu ciri bahasa yang paling asas, menjadikannya lebih fleksibel berbanding pewarisan berasaskan kelas tradisional.

Contoh:

function Carro(nome) {
    this.nome = nome;
}

Carro.prototype.buzina = function() {
    console.log(`${this.nome} faz um som de buzina`);
}

const camaro = new Carro('Camaro');
camaro.buzina(); // Camaro faz um som de buzina

Di sini, camaro mewarisi kaedah tanduk daripada prototaip Carro, menunjukkan idea pewarisan dalam JavaScript. Melalui rantaian prototaip, kami dapat berkongsi gelagat antara objek yang berbeza tanpa perlu menduplikasi kod.

3. Karipap

Kari ialah teknik yang mengubah fungsi yang mengambil berbilang argumen kepada satu siri fungsi yang mengambil satu hujah pada satu masa. Pendekatan ini berguna untuk mencipta fungsi boleh guna semula dan mengarang fungsi baharu dengan cara yang lebih fleksibel.

Contoh:

function somar(a) {
    return function(b) {
        return a + b;
    }
}

const somarTres = somar(3);
console.log(somarTres(3)); // 6

Dalam contoh, add(5) mengembalikan fungsi baharu yang mengambil hujah kedua, membolehkan anda menggunakan semula logik dalam bahagian kod yang berlainan.

4. Gelung Peristiwa dan Panggilan Balik

Gelung Peristiwa ialah konsep asas untuk memahami cara JavaScript mengendalikan operasi tak segerak — dan anak lelaki, memahami ini adalah pengubah permainan dalam pembelajaran JavaScript saya. Apa yang ia lakukan pada asasnya ialah memantau Tindanan Panggilan (tempat kod segerak dilaksanakan) dan Baris Gilir Acara (tempat tugas tak segerak, seperti panggilan balik, acara dan janji, disimpan). Apabila Tindanan Panggilan kosong, Gelung Acara mengambil tugas daripada Baris Gilir Acara dan meletakkannya pada tindanan untuk dilaksanakan. Ini memastikan JavaScript boleh terus menjalankan kod tanpa menyekat operasi lain, sesuatu yang penting untuk mengekalkan kelancaran aplikasi yang berurusan dengan acara I/O, pemasa dan interaksi dengan DOM.
Contoh:

console.log('Início');

setTimeout(() => {
    console.log('Timer expirou');
}, 0);

console.log('Fim');

// Saída:
// Início
// Fim
// Timer expirou

Walaupun setTimeout ditetapkan kepada 0 milisaat, ia diletakkan dalam Baris Gilir Acara dan hanya akan dilaksanakan selepas kod segerak (seperti console.log) telah diproses.
Saya berhasrat untuk memperincikan perkara ini dengan lebih terperinci dan dengan imej dalam artikel lain tertumpu pada konsep ini, kerana bagi saya ia adalah sangat penting untuk difahami dan saya pasti ia akan menjadi sama untuk ramai orang.

Adakah anda ingin mengetahui lebih lanjut tentang mana-mana konsep ini atau adakah anda mempunyai soalan khusus? Tinggalkan dalam komen dan saya akan lihat!

Atas ialah kandungan terperinci Konsep JavaScript yang hebat yang anda akan dapati keren juga. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!