jsのthisを勉強

なぜ？

• thisが何を指すかがわかるとコードが読める
• console.logすれば分かるけど、いちいち仕込むのは面倒

備考

• 設問の用語がわからなければ調べてください

準備

• git cloneしてhttp://[yours].8122.jp/study/index.htmlにアクセスできるようにして下さい

設問１（メソッド呼び出し）

• Appに空のオブジェクトを代入して下さい
• Appオブジェクトにプロパティxを用意して0を代入して下さい
• AppオブジェクトにプロパティshowXを用意してxをconsole.logで表示するメソッドを代入して下さい
• AppオブジェクトのshowXを呼び出して下さい
• AppオブジェクトのshowXを上記とは違う呼び出し方で呼び出して下さい

設問２（関数呼び出し）

• グローバルスコープにshowX変数を用意してAppオブジェクトのshowXプロパティを代入してください
• グローバルスコープのshowXを呼び出して下さい
• 設問１との結果と比べて、違った場合は同じ結果になるようにして下さい。ただし、メソッドは変更しないで下さい

設問３（コンストラクタ呼び出し）

• Cart関数を作ってください、中身はconsole.log(this);として下さい
• Cartをコンストラクタ呼び出しで呼び出して下さい
• 関数呼び出しして下さい
• thisはそれぞれ何を指してますか？

設問４（apply, call呼び出し）

• App.showXをapplyで呼び出して下さい、ただし結果が1となるようにして下さい
• App.showXをcallで呼び出して下さい、ただし結果が2となるようにして下さい
• App.showXメソッドを再定義してapplyとcallの違いを示して下さい

設問５（まとめ）

• つまりthisは何によって変わるでしょうか？
• 以下のthis.xはそれぞれ何を指すでしょうか？実行せずに答えて下さい

fn0();
function fn0() {
  var obj = {
    x: 1,
    fn1: function() {
      console.log(this.x);
      fn2();
      function fn2() {
        var x = 2;
        console.log(this.x);
      }
    }
  };
  obj.fn1();
}

設問６（理解度チェック）

• items配列を用意して下さい
• sizeプロパティ、priceプロパティを持つオブジェクトを２つitemsに入れて下さい
• 値はそれぞれ"L", 126, "2LW", 252として下さい
• jQueryのeachを使って各オブジェクトのsizeを表示して下さい、ただしコールバック関数の引数は空にして下さい
• jQueryのeachを使って各オブジェクトのpriceを表示して下さい、ただしコールバック関数の引数は空にして下さい
• コールバック関数内のthisは何を指してますか？なぜそれを指すかjquery.jsコードの行番号を示して下さい
• thisを使わずにsize, priceを表示して下さい