Bagaimana kita menjalankan fungsi dalam javascript?

Fungsi dalam JavaScript dapat dipanggil dengan berbagai cara. Sepintas, itu mungkin tampak seperti pernyataan gila. Bagaimana bisa ada lebih dari satu cara untuk memanggil suatu fungsi?

Nah, para pembaca yang budiman, seperti yang akan kita bahas pada postingan kali ini, ada 4 cara untuk memanggil sebuah fungsi di JavaScript. Skenario khusus Anda akan menentukan mana yang akan digunakan. Selain itu, setiap metode akan menentukan nilai "ini", juga dikenal sebagai konteks, di dalam fungsi

Poin yang perlu diingat

Setiap kali suatu fungsi dipanggil dalam JavaScript, terlepas dari bagaimana itu dipanggil, dua argumen implisit diteruskan ke sana. 2 argumen implisit tersebut adalah ini, konteks di mana fungsi akan dieksekusi dan parameter argumen. Parameter argumen adalah struktur mirip larik yang berisi argumen apa pun yang diteruskan. Ini "seperti array" tetapi ini bukan array

Sekarang, tanpa basa-basi lagi, mari perkenalkan empat cara pemanggilan fungsi

Fungsi JavaScript dapat dipanggil

1. Sebagai fungsi
2. Sebagai metode
3. Sebagai konstruktor
4. melalui panggilan dan melamar

Mari kita lihat masing-masing

Memanggil fungsi sebagai fungsi

Sejak pembuatan bahasa, ini mungkin cara sebagian besar fungsi dipanggil. sebagai fungsi. Jika Anda pernah menempatkan cuplikan JavaScript di halaman web dan memanggilnya dari klik tombol, Anda telah memanggil fungsi JavaScript sebagai fungsi. Mari kita lihat contoh kode

<button onclick="sayHello()">say hello</button>
  <script>
    function sayHello() {
      console.log(this);
      console.log(arguments);
      console.log('hello');
    }
  </script>

Dalam contoh kode sederhana ini, kami memiliki tombol yang ketika diklik, memanggil fungsi sayHello(). Di dalam fungsi, kami mencatat nilai this diikuti dengan nilai argumen. Lalu kami menyapa. Mari kita lihat apa yang kita dapatkan di konsol saat kita mengklik tombolnya

Seperti yang Anda lihat, nilai dari this adalah objek Window. Itulah konteks di mana fungsi kecil kami yang bagus dijalankan. Anda memiliki opsi untuk memaksa konteks ini menjadi tidak terdefinisi dalam kasus ini. Untuk melakukannya, Anda cukup menambahkan 'use strict';

<button onclick="sayHello()">say hello</button>
  <script>
    'use strict';  //force the context to be undefined
    function sayHello() {
      console.log(this);
      console.log(arguments);
      console.log('hello');
    }
  </script>

Parameter argumen dalam contoh ini tidak memiliki nilai apa pun karena tidak ada parameter yang diteruskan ke fungsi

Memanggil fungsi sebagai metode

Untuk memanggil fungsi sebagai metode, itu harus didefinisikan sebagai properti pada objek. Mari kita lihat beberapa kode

  <button onclick="greeter.sayHello()">say hello</button>
  <script>
    greeter = {
      sayHello: function () {
        console.log(this);
        console.log(arguments);
        console.log('hello');
      }
    }

Di sini Anda dapat melihat bahwa kami telah membungkus fungsi sayHello() di dalam objek yang disebut penyapa sehingga menjadikannya properti pada objek tersebut. Kami kemudian memperbarui penangan onclick kami untuk memanggilnya menggunakan sintaks titik objek. penyambut. katakan halo()

Saat kami memanggil fungsi dengan cara ini, inilah yang kami dapatkan di konsol

Di sini kita melihat bahwa konteks argumen this menunjuk ke objek penyapa. Ini lebih masuk akal daripada objek jendela global. Seperti yang diharapkan, kami juga masih memiliki akses ke parameter argumen

Memanggil fungsi sebagai konstruktor

Sebelum kita melihat kode untuk memanggil fungsi sebagai konstruktor, mari luangkan waktu sejenak dan pertimbangkan tujuan dari konstruktor. Konstruktor dimaksudkan untuk mengatur beberapa keadaan awal dalam suatu objek. Untuk membangunnya. Karena itu, ini adalah kasus yang lebih khusus tentang cara memanggil suatu fungsi. Kami memanggil fungsi ini dengan maksud untuk membuat sesuatu yang baru dan mendapatkannya kembali. Mari kita lihat contoh kode

  <input type="text" id="name"></input>
  <button onclick="sayHello()">say hello</button>
  <script>

    function Greeter(name) {
      console.info('begin constructor');
      console.log(this);
      console.log(arguments);
      this.name = name;
      console.info('end constructor')
    }


    function sayHello() {
      var name = document.getElementById('name').value;
      var grtr = new Greeter(name);
      console.log('hello ' + grtr.name);
    }
  </script>

Dalam contoh ini, kami telah menambahkan kotak teks masukan sehingga pengguna dapat memasukkan namanya. Ini bukan sapaan yang tepat tanpa nama. Sekali lagi, ketika tombol kita diklik kita memanggil fungsi sayHello(). Dalam fungsi sayHello kami, kami mengambil nilai di kotak teks dan membuat instance baru dari objek Greeter dengan memanggil new Greeter()

Kata kunci new dan huruf kapital G memperjelas bahwa fungsi ini disebut sebagai konstruktor. Saat sebuah fungsi dipanggil dengan cara ini, ini disetel ke objek yang baru dibuat. Kami kemudian menambahkan properti name ke objek yang baru dibuat dan menetapkan nilainya ke parameter yang diteruskan ke konstruktor. Objek yang baru dibuat dikembalikan ke kode panggilan dan disimpan dalam variabel grtr. Terakhir, dalam panggilan untuk menghibur. log, kita mengakses properti name yang baru saja kita atur pada objek Greeter

Memanggil fungsi melalui panggilan dan melamar

Satu hal yang harus selalu diingat saat bekerja dengan fungsi dalam JavaScript adalah bahwa mereka adalah objek kelas satu. Itu berarti bahwa suatu fungsi dapat memiliki properti dan metodenya sendiri. Ya, Anda membacanya dengan benar. Suatu fungsi dapat memiliki metodenya sendiri. Metode panggilan dan terapkan adalah dua dari metode tersebut. Metode panggilan dan terapkan memungkinkan Anda untuk menentukan konteks di mana fungsi akan dijalankan. Mereka memungkinkan Anda untuk mengatur nilai ini. Mari kita lihat contoh kode

  <button onclick="go()">GO</button>
  <script>
    var people = [];
    var name = 'alex';

    function Person(idx) {
      idx % 2 === 0 ? 
        this.name = 'alex ' + idx : 
        this.name = 'bob ' + idx;
    }

    function printName() {
      console.log(this.name);
    }

    function go() {
      //call printName to print the name variable defined on the window object
      printName();

      //populate the people array with a couple of people
      for (let idx = 0; idx < 5; idx++) {
        people.push(new Person(idx));
      }

      // lets call the printName for each object that we just created 
      // seting this dynamically
      people.forEach(p => {
        printName.call(p);
      });
      // printName.call(valueOfThis, 1, 2, 3);
      // printName.apply(valueOfThis, [1, 2, 3])
    }
  </script>

Dalam kode ini, kita mulai dengan mendefinisikan beberapa variabel. Array kosong yang akan kita isi dengan beberapa objek Person dan sebuah nama. Kami kemudian memiliki konstruktor untuk objek Person. Yang dilakukannya hanyalah memilih nama berdasarkan indeks yang diteruskan ke sana

Selanjutnya, kita memiliki fungsi printName(). Itu hanya mencetak nilai apa pun yang ada dalam variabel nama dari objek apa pun yang diatur ke konteks saat ini. Dan terakhir, kita memiliki fungsi go() yang dijalankan saat pengguna menekan tombol

Hal pertama yang kita lakukan saat tombol diklik adalah memanggil printName() secara langsung. Jika Anda ingat dari awal posting ini, ini memanggil fungsi sebagai fungsi. Akibatnya, konteksnya adalah objek jendela global dan nama 'alex' dicetak ke konsol. Sejauh ini bagus

Selanjutnya, kami menyiapkan loop for dan membuat objek 5 Orang dan mendorongnya ke array orang

Lalu kita langsung masuk ke array. forEach pada susunan orang kami. Selama setiap iterasi, kami memanggil printName. call() melewati objek saat ini sebagai konteksnya. Ini berarti kita mengatur konteks fungsi secara dinamis. Cukup keren. Ini menghasilkan output berikut di konsol

'alex' pertama dalam output berasal dari panggilan kami sebelumnya ke printName(). Setiap baris output tambahan berasal dari iterasi di atas array

Kode ini mendemonstrasikan metode call() yang tersedia di semua fungsi. Ini terlihat sangat mirip dengan sintaks titik objek karena itu adalah sintaks titik objek. Semua fungsi dalam JavaScript adalah objek

Metode penerapannya sangat mirip. Satu-satunya perbedaan antara keduanya adalah argumen yang mereka terima. call() menerima daftar nilai sementara apply() menerima array, seperti itu

//call accepts a list of values
printName.call(valueOfThis, 1, 2, 3);

//apply accepts an array of values
printName.apply(valueOfThis, [1, 2, 3]);

Itu merangkum pengenalan singkat dari 4 cara untuk memanggil fungsi JavaScript. Saya menemukan bahwa saya menggunakan semua metode ini dan mengetahui apa yang terjadi di balik layar sangat membantu

Ingatlah bahwa dalam JavaScript, fungsi adalah objek kelas satu. Mereka dapat memiliki properti dan metode mereka sendiri dan dapat diedarkan seperti objek lainnya. Konsep fungsi sebagai objek ini dapat sedikit membiasakan diri jika Anda berasal dari bahasa lain seperti C# atau Java. Saya tahu saya butuh sedikit untuk membuat kepala saya melilitnya

Bagaimana cara memanggil fungsi dalam JavaScript?

Bagaimana kita memanggil suatu fungsi?

Berapa banyak cara memanggil fungsi JavaScript?