【javascript】thatの使い方。またはthisとの違いについて

javascriptでたまにみるvar that = this;というかたちのコード。

現役でjavascriptを触っていながら何に使われるのかさっぱり分からなかったので

気になって調べてみた。

すると海外の記事でこのようなものが見つかりました。

https://www.it-swarm-ja.tech/ja/javascript/%27var-that-this%27%E3%81%A8%E3%81%AF%E4%BD%95%E3%81%A7%E3%81%99%E3%81%8B%E3%80%82-javascript%E3%81%A7%E6%84%8F%E5%91%B3%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F/972162308/

どうやら、関数の中で新しく関数を作りスコープで囲む処理をしていると

thisが何回も変更されてしまいthis.〇〇にアクセスできなくなってしまうみたいです。

それを防止するためにスコープの前でvar that = this;と紐付けておくことで

関数の中の値にアクセスが出来るようになるということでした。

少し前に紹介したQRCodeScannerのプラグインのコードを

書いている時もthatが出現しましたが、このコードでもfunction(result){}と

スコープで囲っており、通常のthis.receive()ではthisが何回も書き換えられるためthis.stateが

使えなくなる仕組みになっています。

thisの状態を保持するため関数の一番最初でconst that = this;をしています。

</pre>
const that = this;
window.cordova.plugins.barcodeScanner.scan(
function (result) {
if(!result.cancelled){
that.receive(result.text);
}
},
function (error) {
alert("Scanning failed: " + error);
},
);}
<pre>

このように、関数の中で更に関数(スコープで囲むような処理)を書きたい場合はthatを使うことで

thisの値を正しく使うことができます。