JS基礎ーthisの指す先

thisとは

this は function を呼んだ時の呼び出し元オブジェクトを指している

例(自分自身の性別取得したい)

function getGender() {
    return this.gender;
}

var ma = {
    name: 'ma',
    gender: 'male',
    myGender: getGender
};

ma.myGender(); // 'male', 予想通り
getGender(); // undefined

this はどこに指しているのか

ma.myGender();

使ってるthisは、maというオブジェクトを指しているが

getGender();

使ってるthisは、windowというglobal variableを指している

なぜ指す先が変った

一言うと、呼び出し元にthisは左右されるからです
ma.myGender()の呼び出し元：ma
getGender()の呼び出し元：window

解決策

thisをキャッチする

var ma = {
    name: 'ma',
    gender: 'male',
    myGender: function() {
    var that = this;
        function getGender() {
            return that.gender;
        }
    }
};
ma.myGender(); // 'male'

apply()とcall()

apply()とcall()でthis の指す先がコントロールできる、例えば、

function getGender() {
    return this.gender;
}

var ma = {
    name: 'ma',
    gender: 'male',
    myGender: getGender
};

ma.myGender(); // 'male'
getGender.apply(ma,[]); // 'male'
getGender.call(ma); // 'male'

applyの第一引数は、thisの指す先、第二引数がgetGender()のパラメータ配列(今回は[])
applyの第一引数は、thisの指す先、第二引数がgetGender()のパラメータ(今回はなし)

アロー関数

var ma = {
    name: 'ma',
    gender: 'male',
    myGender: function() {
        var fn = () => this.gender;  // thisの指す先がmaオブジェクト
        return fn();
    }
};
ma.myGender(); // 'male'

アロー関数を使うと、

var that = this;

という書き方がはいらなくなる

まとめ

関数呼び出し側のオブジェクトが this になる
個人的にアロー関数でキャプチャされたときの this を保持する方法が一番見た目綺麗だと思う