Memanggil (Call) Fungsi JavaScript

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Catur Kurnia Sari October 24, 2020

Section Artikel

1 Penggunaan Kembali Metode
2 Semua Fungsi adalah Metode
3 Keyword this
4 Metode call() JavaScript
5 Metode call() dengan Argumen

Penggunaan Kembali Metode

Dengan metode call(), kita bisa menulis metode yang bisa digunakan pada objek yang berbeda.

Semua Fungsi adalah Metode

Dalam JavaScript, semua fungsi adalah metode objek.

Jika suatu fungsi bukan metode dari objek JavaScript, itu adalah fungsi dari objek global (lihat bab sebelumnya).

Contoh di bawah ini membuat objek dengan 3 properti, firstName, lastName, fullName.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Function</h2>

<p> Contoh ini membuat objek dengan 3 properti (firstName, lastName, fullName). </p>
<p> Properti fullName adalah sebuah metode: </p>

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

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

</body>
</html>

Keyword this

Dalam definisi fungsi, this mengacu pada “pemilik” fungsi.

Dalam contoh di atas, this adalah objek person yang “memiliki” fungsi fullName.

Dengan kata lain, this.firstName berarti properti firstName dari objek this.

Metode call() JavaScript

Metode call() adalah metode JavaScript yang telah ditentukan sebelumnya.

Dapat digunakan untuk memanggil metode dengan objek pemilik sebagai argumen (parameter).

Dengan menggunakan call(), sebuah objek bisa menggunakan metode yang dimiliki oleh objek lain.

Contoh ini menunjukan cara memanggil metode fullName person yang digunakan person1.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Function</h2>
<p>Contoh ini memanggil metode fullName person yang digunakan person1.</p>

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

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

</body>
</html>

Contoh ini memanggil metode fullName person, yang digunakan di person2.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>Contoh ini memanggil metode fullName person, yang digunakan di person2.</p>

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

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

</body>
</html>

Metode call() dengan Argumen

Metode call() bisa menerima argumen.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Function</h2>
<p>Contoh ini memanggil metode fullName person yang digunakan person1.
</p>

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

<script>
var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
var person2 = {
  firstName:"Mary",
  lastName: "Doe"
}
var x = person.fullName.call(person1, "Oslo", "Norway"); 
document.getElementById("demo").innerHTML = x; 
</script>

</body>
</html>

javascript