Carpe Diem

  Top > スポンサー広告> JavaScript > JavaScript の this  

スポンサーサイト

-- - --/-- [--] - --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScript の this

2013 - 05/27 [Mon] - 10:13

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の覚え方

3番は単に関数はグローバルオブジェクトに属してるからと思えば2番と同じですよ

でもthisのルールはStricModeやArrowFunctionでは変わってきます

Re: タイトルなし

> 3番は単に関数はグローバルオブジェクトに属してるからと思えば2番と同じですよ
>
> でもthisのルールはStricModeやArrowFunctionでは変わってきます

ご助言ありがとうございます。
StricModeやArrowFunctionなど、まだまだ知らないことばかりですので勉強させていただきます。

コメントの投稿





管理者にだけ表示を許可する

 | ホーム | 

プロフィール

Cicatrice

Author:Cicatrice
備忘録

検索フォーム

カテゴリ

最新記事

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。