Javascript

Permintaan (Invoking) Fungsi JavaScript: Cara Membuat dan Codenya

Kode di dalam fungsi JavaScript akan dieksekusi ketika “sesuatu” memanggilnya.

Invoking Fungsi JavaScript

Kode di dalam suatu fungsi tidak dijalankan ketika fungsi tersebut didefinisikan.

Namun kode di dalam sebuah fungsi dijalankan ketika fungsi tersebut dipanggil.

Istilah “call functioni” lebih biasa digunakan daripada “invoking function”.

Ini juga umum untuk mengatakan “call upon a function”, “start a function”, atau “execute a function”.

Dalam tutorial ini, kita akan menggunakan invoke, karena fungsi JavaScript bisa dijalankan tanpa dipanggil.

Memanggil Fungsi sebagai Fungsi

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Function</h2>

<p> Fungsi global (myFunction) mengembalikan produk dari argumen (a, b): </p>
<p id="demo"></p>

<script>
function myFunction(a, b) {
  return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2); 
</script>

</body>
</html>

Fungsi di atas bukan milik objek apa pun. Tapi di JavaScript selalu ada objek global default.

Dalam HTML, objek global default adalah halaman HTML itu sendiri, jadi fungsi di atas “milik” halaman HTML.

Dalam browser objek halaman adalah jendela browser. Fungsi di atas secara otomatis menjadi fungsi jendela.

myFunction() dan window.myFunction() memiliki fungsi yang sama.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Function</h2>

<p> Fungsi global secara otomatis menjadi metode jendela. Memanggil myFunction () sama dengan memanggil window.myFunction (). </p>

<p id="demo"></p>

<script>
function myFunction(a, b) {
  return a * b;
}
document.getElementById("demo").innerHTML = window.myFunction(10, 2); 
</script>

</body>
</html>

Ini adalah cara umum untuk menjalankan fungsi JavaScript, tetapi bukan implementasi yang sangat baik.
Variabel global, metode, atau fungsi dapat dengan mudah membuat konflik penamaan dan bug di objek global.

Keyword this

Dalam JavaScript, yang disebut this, adalah objek yang “memiliki” kode saat ini.

Nilai this, bila digunakan dalam suatu fungsi, adalah objek yang “memiliki” fungsi tersebut.

Perhatikan bahwa this bukan variabel. this adalah kata kunci dan tidak dapat mengubah nilainya.

Object Global

Ketika suatu fungsi dipanggil tanpa objek pemilik, nilainya menjadi objek global.

Di browser web, objek global adalah jendela browser.

Contoh ini mengembalikan objek jendela sebagai nilai ini:

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Function</h2>

<p> Dalam HTML, nilai <b> this </b>, dalam fungsi global, adalah objek jendela. </p>
<p id="demo"></p>

<script>
var x = myFunction();
function myFunction() {
  return this;
}
document.getElementById("demo").innerHTML = x; 
</script>

</body>
</html>

Memanggil suatu fungsi sebagai fungsi global, menyebabkan nilai this menjadi objek global.
Menggunakan objek jendela sebagai variabel dapat dengan mudah merusak program.

Memanggil Function sebagai Method

Dalam JavaScript, Anda dapat mendefinisikan fungsi sebagai metode objek.

Contoh berikut membuat objek (myObject), dengan dua properti (firstName dan lastName), dan metode (fullName).

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p> myObject.fullName () akan mengembalikan John Doe: </p>
<p id="demo"></p>

<script>
var myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
document.getElementById("demo").innerHTML = myObject.fullName(); 
</script>

</body>
</html>

Metode fullName adalah sebuah fungsi. Fungsi milik objek. myObject adalah pemilik fungsinya.

Yang disebut this, adalah objek yang “memiliki” kode JavaScript. Dalam hal ini nilai this adalah myObject.

Ujilah! Ubah metode fullName untuk mengembalikan nilai ini.

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p> Nilai <b> this </b>, dalam metode objek, adalah objek pemilik. </p>
<p id="demo"></p>

<script>
var myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function() {
    return this;
  }
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>

</body>
</html>

Memanggil fungsi sebagai metode objek, menyebabkan nilai this menjadi objek itu sendiri.

Memanggil Fungsi dengan Konstruktor

Jika pemanggilan fungsi diawali dengan kata kunci new, maka itu adalah pemanggilan konstruktor.

Sepertinya terlihat kita membuat fungsi baru, tetapi karena fungsi JavaScript adalah objek, sebenarnya yang dibuat adalah objek baru.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Function</h2>

<p> Dalam contoh ini, myFunction adalah konstruktor fungsi: </p>
<p id="demo"></p>

<script>
function myFunction(arg1, arg2) {
  this.firstName = arg1;
  this.lastName  = arg2;
}

var x = new myFunction("John","Doe")
document.getElementById("demo").innerHTML = x.firstName; 
</script>

</body>
</html>

Sebuah pemanggilan konstruktor akan membuat objek baru. Objek baru mewarisi properti dan metode dari konstruktornya.

Kata kunci this dalam konstruktor tidak memiliki nilai.
Nilai this akan menjadi objek baru yang dibuat saat fungsi tersebut dipanggil.


Catur Kurnia Sari

Share
Tags: fungsiInvokingjavascript