thisとは・・・
thisについて学んでいきます。
記述する内容はメソッドでの呼び出しについてです。
メソッドの中の「this」
・・・同じオブジェクト内の他のプロパティを使いたい時に「this」を活用できます。
サンプルで一つオブジェクト用意します。
const cat = {
name: 'タマ',
color: 'grey',
cry() {
console.log('にゃー');
}
}
cat.cry();
// にゃー
「this」を使うことによってオブジェクトの他のデータにアクセスできるようになります。それが下記の通りです。
const cat = {
name: 'タマ',
color: 'grey',
cry() {
console.log(this.name);
}
}
cat.cry();
// タマ
「name」の値が出力されています。
「this」の値は「this」を使っている関数がどのように呼ばれたかに依存します。
ナニイッテンノーってなるかと思います。（笑）
ここで「this」を確認してみます。
function sample () {
console.log(this);
}
// ブラウザ上で呼び出すと……
sample();
// // => Window
{window: Window, self: Window, document: document,
name: '', location: Location, …}
「this」 はグローバルオブジェクト、ブラウザでは Window オブジェクトというものになります。
※「Window」といものは簡単に説明すると、ブラウザのページのJavaScriptの中に必ず存在するものになります。JavaScriptで作ったあらゆるものが入っているトップレベルのものと思ってください。
猫のサンプルを修正し、確認してみます。
const cat = {
name: 'タマ',
color: 'grey',
cry() {
console.log(this);
console.log(`${this.name}がにゃーと泣きました`);
}
}
// { name: 'タマ', color: 'grey', breed: 'アメリカンショートヘア', cry: ƒ }
// タマがにゃーと泣きました
これまでのことを踏まえると今回の場合、「this」 は 「cat」 になります。
今の所覚えやすいのは、” . ”の左側にあるものが「this」になっていることです。
thisは、使う場面によってその中身が変わる便利な変数です。しかし、thisがどこを参照しているのかを理解して使わないと何を意味するのか分からなくなり、思わぬ挙動を起こすこともあるかもしれません。
徐々に慣れていきましょう。自分も頑張ります。
