Cara menggunakan $THIS pada JavaScript

Contoh:

Table of Contents Show

Apa itu this?
this pada Method
this digunakan sendiri
This dalam sebuah Fungsi (Default)
this pada Fungsi (Strict)
this in Event Handlers
Object Method Binding
Pengikatan Fungsi Eksplisit
Apa fungsi this pada JavaScript?
Apa fungsi dari BIND?
Apa itu binding di JavaScript?
Apa tanda yang dapat digunakan untuk membuat objek di JavaScript?

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Keyword <i>this</i></h2>

<p>Pada contoh ini, <b>this</b> mewakili object <b>person</b>.</p>
<p>Karena object person memiliki method fullName.</p>

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

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

Section Artikel

1 Apa itu this?
2 this pada Method
3 this digunakan sendiri
4 This dalam sebuah Fungsi (Default)
5 this pada Fungsi (Strict)
6 this in Event Handlers
7 Object Method Binding
8 Pengikatan Fungsi Eksplisit

Apa itu this?

Pada JavaScript kata kunci this merujuk pada object yang dimiliknya.

this memiliki nilai yang berbeda tergantung di mana itu digunakan:

Dalam suatu method, this mengacu pada object pemilik.

Jika sendiri, this mengacu pada object global.

Dalam suatu fungsi, this mengacu pada object global.

Dalam suatu fungsi, dalam mode strict, this tidak ditentukan.

Dalam sebuah event, this mengacu pada elemen yang menerima event tersebut.

Method seperti call(), dan apply() bisa merujuk this ke object apa pun.

this pada Method

Dalam method, this mengacu pada pemilik method.

Dalam contoh di bagian atas halaman ini, this mengacu pada object person.

Object person adalah pemilik method fullName.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Keyword <i>this</i></h2>

<p>Pada contoh ini, <b>this</b> mewakili object <b>person</b>.</p>
<p>Karena object person memiliki method fullName.</p>

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

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

this digunakan sendiri

Saat digunakan sendiri, pemiliknya adalah object Global, jadi this mengacu pada object Global.

Di jendela browser, object Global adalah [Object Window]:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Keyword <i>this</i></h2>

<p>Pada Contoh ini, <b>this</b> merujuk pada window Object:</p>

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

<script>
var x = this;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Dalam mode strict, ketika digunakan sendiri, this juga mengacu pada object Global [object Window]:

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Keyword <i>this</i></h2>

<p>Pada Contoh ini, <b>this</b> merujuk pada window Object:</p>
<p id="demo"></p>

<script>
"use strict";
var x = this;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

This dalam sebuah Fungsi (Default)

Dalam fungsi JavaScript, pemilik fungsi adalah pengikat default untuk this.

Jadi, dalam sebuah fungsi, this mengacu pada object Global [object Window].

Contoh

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript <i>this</i> Keyword</h2>

<p> Dalam contoh ini, <b>this</b> mewakili object yang "memiliki" myFunction: </p>
<p id="demo"></p>

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

</body>
</html>

this pada Fungsi (Strict)

Mode strict JavaScript tidak mengizinkan pengikatan default.

Jadi, saat digunakan dalam suatu fungsi, dalam mode strict, this tidak ditentukan.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript <i>this</i> Keyword</h2>

<p> Dalam sebuah fungsi, secara default, <b>this</b> merujuk ke object Global. </p>
<p> Dalam mode strict, <b> ini </b> <b>tidak ditentukan</b>, karena mode stirct tidak mengizinkan pengikatan default: </p>

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

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

</body>
</html>

this in Event Handlers

Dalam event handler pada HTML, this mengacu pada elemen HTML yang menerima event:

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Keyword <i>this</i></h2>

<button onclick="this.style.display='none'">Click untuk menghapuku!</button>

</body>
</html>

Object Method Binding

Dalam contoh berikut, this adalah object person (Object person adalah “pemilik” fungsi):

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript <i>this</i> Keyword</h2>

<p>Dalam contoh berikut, this adalah object person (Object person adalah "pemilik" fungsi).</p>

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

<script>
// Create an object:
var person = {
  firstName  : "John",
  lastName   : "Doe",
  id     : 5566,
  myFunction : function() {
    return this;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.myFunction();
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript <i>this</i> Keyword</h2>

 <p>Pada contoh berikut <b>this</b> mewakili object <b>person</b>.</p>
<p>Because the person object "owns" the fullName method.</p>

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

<script>
// Create an object:
var person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

Dengan kata lain: this.firstName berarti properti firstName dari object (person) this.

Pengikatan Fungsi Eksplisit

Method call() dan apply() adalah method JavaScript yang ditentukan sebelumnya.

Keduanya dapat digunakan untuk memanggil method object dengan object lain sebagai argumen.

Dalam contoh di bawah ini, saat memanggil person1.fullName dengan person2 sebagai argumen,this akan merujuk ke person2, meskipun itu adalah method person1.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Keyword <i>this</i></h2>
<p>Dalam contoh ini <strong>this</strong> akan merujuk ke person2, meskipun itu adalah method person1.</p>

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

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

</body>
</html>

Apa fungsi this pada JavaScript?

this digunakan di dalam sebuah fungsi dan mengandung nilai dari objek yang memanggil fungsi tersebut. Kita perlu menggunakan this untuk mengakses metode dan properti dari objek yang memanggil fungsi tersebut, terlebih lagi jika kita tidak selalu tahu nama yang digunakan oleh objek tersebut.