Carpe Diem

備忘録。https://github.com/jun06t

JavaScript の this

JavaScriptのthisは軽く見てるとあとで非常に困るのでちゃんと勉強してみました。 とりあえず4通りあります。 コンストラクタ内のthis ②メソッドで使うthis ③関数呼び出しで使うthis ④apply、callのthis この内②、③が非常にこんがらがります。逆にこれさえおさえておけばあとは怖いものなしです。 コンストラクタ内のthis var value = 0; function MyClass() {     var value = 5;     this.value = 10;     this.increment = function() {         value++;  // 6         this.value++;  // 11     }; }; var obj = new MyClass(); console.log(obj.value);  // 10 obj.increment(); console.log(obj.value);  // 11 ポイントは new していることです。new した場合はコンストラクタ内の this は生成したオブジェクトを指します。 メソッド呼び出しのthis var value = 0; var obj = {     value: 1,     show: function() {       console.log(this.value);     } } obj.show(); // 1 ポイントは obj というオブジェクトのメソッドとして使っていることです。この場合thisはオブジェクトobjを指します。 ①、②はともに this に対応した obj というオブジェクトがくっついています。 こういった使用方法の場合は、Javaなどと同じオブジェクト自身がthisとなります。 ③関数呼び出しの場合 分かりやすい例は var value = 0; function show() {     var value = 1;     console.log(this.value); } show();  // 0 です。関数呼び出しのように、単体での使用の場合、関数内にvalueがあっても、thisはグローバルオブジェクトを指します。 ややこしい例としては var value = 0 var obj = {     value: 1,     show: function() {       console.log(this.value); // 1       function show() {         console.log(this.value); // 0       }       show();     } }; obj.show(); です。最初の方はメソッドなので、objオブジェクトのプロパティのvalueを参照します。 しかし後半の方は関数呼び出しなので、グローバルオブジェクトを見ます。 ④apply、callのthis これはapply、callの使い方を学べばむしろ分かりやすいです。 var value = 0; var obj = {     value: 1,     show: function() {       console.log(this.value);     } }; var hoge = {     value: 2 }; obj.show(); // 1 obj.show.apply(hoge); // 2 obj.show.call(hoge); // 2 apply、call の場合は、引数に渡したオブジェクト hoge が this となります。 apply、call の使い方をあまり知らなくても、先ほどのようにこんがらがることはないと思います。 以上です。 ソース: JavaScriptの「this」は「4つ」だけ! JavaScriptのthisの覚え方