[JS]thisのややこしさに終止符を打つ。

はじめに

JavaSctiptに苦手意識がついてしまった原因が何を隠そう「this」です。初心者のうちは特に理解できずに苦しみました。しかし、重要な概念であるため、これをおざなりにしてはいけないと思い、学習してなんとか理解することが出来ましたので、自分と同じ境遇の人に共有します。。

thisとは

thisとは、呼び出し元のオブジェクトへの参照を保持するキーワードのです。
thisの参照先は、同じ関数でも呼び出し方法が違えば、thisは異なるオブジェクトを参照します。
もう少し詳しく言うと、関数(function)を呼んだ時の.の前についているオブジェクトを指しているということです。(.が省略された場合はグローバルオブジェクトになります。)

// 関数testを定義
function test() {
    console.log(this)
}

test() // => Window {frames: Window, postMessage: ƒ, ...}

// オブジェクトを定義
const animal = {
  name: 'dog',
  introduce: function() {
    console.log('The animal is ' + this.name); // ここでのthisは「animal」を指す
  }
}
animal.introduce();  // The animal is dog と出力

bind

bindとは、強制的にあるオブジェクトと結びつけるものです。
第一引数には結びつけたいオブジェクトを指定し、第二引数以降は渡したい実引数を指定する。

// thisをコンソールに出力する関数testを定義
function test() {
    console.log(this)
}

let obj = { name: "obj" }
let check = test.bind(obj) // testをobjに結びつける

test() // Window {frames: Window, postMessage: ƒ, ...}
check() // => {name: "obj"}

callとapply

callやapplyを使って関数を呼び出すとオブジェクトの指定と同時に関数を実行することが出来る。
第一引数には結びつけたいオブジェクトを指定し、第二引数以降は渡したい実引数を指定する。

// thisをコンソールに出力する関数testを定義
function test() {
    console.log(this)
}

let obj = { name: "obj" }
test() // Window {frames: Window, postMessage: ƒ, ...}
test.call(obj) // => {name: "obj"}

アロー関数

アロー関数とはES6から使用できる、無名関数を省略化して記述する記法のことです。

// 無名関数の場合
const greet = {
  hello: function() {
    console.log('hello');
  }
}

// アロー関数の場合
const greet = {
  hello: () => {
    console.log('hello');
  }
}

greet.hello(); // 'hello'

無名関数とアロー関数の違い

下記の表を見たら分かる通り、アロー関数では使えない機能があります。省略記法といっても全く同じように使えるわけでは無いことを理解しておく必要があります・

	無名関数	アロー関数
this	○	×
arguments	○	×
new	○	×
prototype	○	×

終わりに

少しはthisに対する苦手意識は薄れましたでしょうか？
苦手だと思っているものはなかなか頭が働きませんが、一つ踏み出せれば理解できる日が来ると思うので、共に頑張りましょう！

参考

JavaScript の this を理解する多分一番分かりやすい説明

【JavaScript】thisを弄ぼう