Javascriptでメソッド実行時のthisの振る舞いについて
文責：遠藤 理平 （2016年9月25日）
カテゴリ：TIPS 集(107)
次のプログラムを実行した場合、コンソールに出力される値は何でしょうか？
1 2 3 4 5 6 7 | //クラス「A」を宣言var A = function(){}A.prototype.f = function(){ console.log(this); //thisをチェック}var a = new A();a.f(); |
「this」はメソッドが呼び出された元となるオブジェクトを指すので、 上記のプログラムの場合にはAクラスのオブジェクトとなります。
次のプログラムを実行した場合、コンソールに出力される値は何でしょうか？
1 2 3 4 5 6 7 8 9 10 11 | //クラス「B」を宣言var B = function(){}B.prototype.f1 = function(){ console.log(this); //thisをチェック}B.prototype.f2 = function(){ var f1 = this.f1; //メソッドの参照をローカル変数にコピー f1();}var b = new B();b.f2(); |
上記のプログラムでは、メソッド内で利用するメソッドの参照をローカル変数へコピー後、実行しています。 この場合、メソッドそのものはローカル変数が呼び出された元となり、 「this」は「Window」オブジェクトを指すことになります。 メソッド内で他のメソッドを実行する場合にメソッド名を短くすることを目的として、上記のような実装を行うことがあります。 「this」の振る舞いには気をつける必要がありますね。
どのような呼び出され方をしても「this」を固定したい場合には「bind」メソッドを用いて「this」を固定します。
1 | var f1 = this.f1.bind( this ); |
