Kehilangan Konteks dalam JavaScript

Katakan kita mempunyai fungsi dalam fungsi. Mari kita namakan fungsi luaran sebagai parent, dan fungsi dalaman sebagai child:

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

Dari pelajaran sebelumnya, anda tahu bahawa jika mana-mana pembolehubah ditetapkan dalam fungsi luaran - ia akan boleh diakses dalam fungsi dalaman:

javascriptfunction parent() {
  let str = 'abcde';
  
  function child() {
    console.log(str); // akan memaparkan 'abcde'
  }
  child(); // panggil fungsi dalaman
}

parent(); // panggil fungsi luaran

Walau bagaimanapun, terdapat satu nuansa: fungsi dalaman mempunyai akses kepada semua pembolehubah fungsi luar, tetapi tidak mempunyai akses kepada this. Maksudnya: jika fungsi luaran terikat kepada beberapa elemen DOM, maka this di dalamnya akan menunjuk kepada elemen tersebut, tetapi this fungsi dalaman - tidak akan!

Jadi, kepada apakah this fungsi dalaman akan menunjuk? Jawapannya: ia akan sama dengan undefined (dalam mod ketat), kerana fungsi tidak terikat kepada apa-apa.

Mari kita uji secara praktikal. Katakan kita mempunyai satu input:

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

Mari kita ikat fungsi parent kepada input ini, yang akan dipanggil apabila input kehilangan fokus:

javascript"use strict";

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

// Akan dipanggil apabila kehilangan fokus:
function parent() {
  // akan ada beberapa kod di sini
  
  function child() {
    // akan ada beberapa kod di sini
  }
  child(); // panggil fungsi anak
}

Mari kita paparkan kandungan 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 memaparkan rujukan kepada input kami
  
  function child() {
    console.log(this); // akan memaparkan undefined
  }
  child();
}

Jalankan kod ini, hilangkan fokus pada input dan lihat pada konsol - anda akan melihat bahawa console.log pertama akan memaparkan rujukan kepada input kami, manakala yang kedua - hanya undefined. Keadaan sedemikian, di mana this secara tidak dijangka menunjuk bukan kepada apa yang kita perlukan, dipanggil kehilangan konteks.

javascript"use strict";

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

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