ふと思ったのでthisの検証をしてみた

(この記事はQiitaで僕が書いたものを移行した記事です。記事中のコメントはQiitaの該当記事を参照ください) *

var outerMethod = function() {
    return this.name;
};
var obj = {
    name: 'hoge',
    outerMethod: outerMethod
};

global.name = 'fuga';
console.log(outerMethod());
console.log(obj.outerMethod());

こういうコード(nodeで実行することを前提とする)の出力はどうなるのかなと。結果は

fuga
hoge

となります。これは少し気をつけていないとバグを生み出しそうですね。やはりthisは害悪(言い過ぎ)。

追記:

ただし、

var outerMethod = function() {
    function innerMethod() {
        return this.name;
    };
    return innerMethod();
};

とすると出力が

fuga
fuga

になります。ホント害悪とかいうレベルじゃないぞこれ…

追記の追記

var outerMethod = function() {
    var that = this;
    function innerMethod() {
        return that.name;
    };
    return innerMethod();
};

これが多分一番安全なthisの使い方だと思います。

ちなみに

アロー関数使うと多少混乱を防げます。

var outerMethod = function() {
    var innerMethod = () => {
        return this.name;
    };
    return innerMethod();
};

…逆に混乱しますかね?