Kehilangan Konteks dalam JavaScript

Misalkan kita memiliki fungsi di dalam fungsi. Mari kita sebut fungsi terluar sebagai parent, dan fungsi dalamnya sebagai child:

javascriptfunction parent() {
  function child() {
    
  }
}

Dari pelajaran sebelumnya Anda tahu bahwa jika suatu variabel ditetapkan di fungsi terluar - variabel tersebut akan dapat diakses di fungsi dalam:

javascriptfunction parent() {
  let str = 'abcde';
  
  function child() {
    console.log(str); // akan menampilkan 'abcde'
  }
  child(); // memanggil fungsi dalam
}

parent(); // memanggil fungsi terluar

Namun, ada nuansanya: fungsi dalam memiliki akses ke semua variabel fungsi terluar, tetapi tidak memiliki akses ke this. Artinya: jika fungsi terluar terikat ke suatu elemen DOM, maka this di dalamnya akan merujuk ke elemen tersebut, tetapi this dari fungsi dalam - tidak akan!

Lalu, pada apa this dari fungsi dalam akan merujuk? Jawabannya: itu akan sama dengan undefined (dalam mode ketat), karena fungsi tidak terikat ke apa pun.

Mari kita buktikan secara praktis. Misalkan kita memiliki sebuah input:

html<input id="elem" value="text">

Mari kita ikat fungsi parent ke input ini, yang akan dipanggil ketika input kehilangan fokus:

javascript"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

// Akan dipanggil saat kehilangan fokus:
function parent() {
  // akan ada kode tertentu di sini
  
  function child() {
    // akan ada kode tertentu di sini
  }
  child(); // memanggil fungsi child
}

Mari kita tampilkan isi dari this ke konsol di dua tempat: di dalam fungsi parent dan di dalam fungsi child:

javascript"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

function parent() {
  console.log(this); // akan menampilkan referensi ke input kita
  
  function child() {
    console.log(this); // akan menampilkan undefined
  }
  child();
}

Jalankan kode ini, hilangkan fokus pada input dan lihat di konsol - Anda akan melihat bahwa console.log pertama akan menampilkan referensi ke input kita, sedangkan yang kedua - hanya undefined. Situasi seperti ini, ketika this dengan cara yang tidak terduka bagi kita tidak menunjuk pada apa yang kita butuhkan, disebut kehilangan konteks.

javascript"use strict";

let elem = document.querySelector('#elem');
elem.addEventListener('blur', parent);

function parent() {
  console.log(this.value); // apa yang akan ditampilkan?
  
  function child() {
    console.log(this.value); // apa yang akan ditampilkan?
  }
  child();
}