javascriptにおけるthisの参照

Question

初歩的な質問で申し訳ございません。
javascriptにおけるthisの振る舞いがわかりません。

【やりたいこと】
下のコードでresizeTouphone.ratio.wを正常に出力したい

現在のコードでresizeToiphone.ratio.wを出力するとundefinedになってしまいます。

var resizeToiphone = {
  wWidth  : document.documentElement.clientWidth,
  wHeight : document.documentElement.clientHeight,
  iWidth  : 320,
  iHeight : 568,
  ratio   : {
    w : this.iWidth/this.wWidth,
    h : this.iHeight/this.wHeight
  }
}

こちら何が原因なのでしょうか。
よろしくお願いいたします。

Answer 1

まず何が原因かということなのですがJavaScriptのthisは可変です。Objectや無名関数の中でthis
はwindow（グローバルスコープ）を指します。

var a={
  b : {
    c: this
  }
}
console.log(a.b.c);//window

どうしてもthisを使用したいということであれば以下のようにコンストラクタを使用することで実現できます
まず無名のコンストラクタを使用した場合です。普段thisの乱用はお勧めしませんが……

resizeToiphone=(new function (){
  this.wWidth=document.documentElement.clientWidth;
  this.wHeight=document.documentElement.clientHeight;
  this.iWidth=320;
  this.iHeight=568;
  this.ratio={
      w : this.iWidth/this.wWidth,
      h : this.iHeight/this.wHeight
  }
  return;
}());

console.log(resizeToiphone.ratio.w);//0.23721275018532245

こちらのコードは上のコードとは違う視点から。
即時関数の中でコンストラクタを作成し、return newでコンストラクタをObject化して変数resizeToiphoneへ代入。

resizeToiphone=(function () {
  function resizeToiphone(){
    resizeToiphone.prototype.wWidth = document.documentElement.clientWidth;
    resizeToiphone.prototype.wHeight = document.documentElement.clientHeight;
    resizeToiphone.prototype.iWidth = 320;
    resizeToiphone.prototype.iHeight = 568;
    resizeToiphone.prototype.ratio = {
      w: this.iWidth / this.wWidth,
      h: this.iHeight / this.wHeight
    }
  };
  return new resizeToiphone();
}());

console.log(resizeToiphone.ratio.w); //0.23721275018532245

気持ちの悪いコードですが以下もコンストラクタを使用した例です。
こちらはお勧めしません。（可読性などのほかにも色々問題がありますが何より気持ち悪いという）

resizeToiphone=(new function resizeToiphone(){
  resizeToiphone.prototype.wWidth=document.documentElement.clientWidth;
  resizeToiphone.prototype.wHeight=document.documentElement.clientHeight;
  resizeToiphone.prototype.iWidth=320;
  resizeToiphone.prototype.iHeight=568;
  resizeToiphone.prototype.ratio={
      w : this.iWidth/this.wWidth,
      h : this.iHeight/this.wHeight
  }
}());
console.log(resizeToiphone.ratio.w);//0.23721275018532245

Answer 2

thisというのはその空間内(メソッドやオブジェクト内)の変数を指します
ratio内にiwidthは存在しないので未定義になるわけです
こういう場合の常用手段としてthatを使います

Comments

[Cf_cwd]

ratioを指している訳ではありませんよ。もう一度thisの動作について調べてみることをお勧めします。

```lang-javascript
function OutputManage(){
var that=this;
OutputManage.prototype.console=function (_string){
console.log(_string);
return this;
}
OutputManage.prototype.alert=function (_string){
alert(_string);
return this;
}
OutputManage.prototype.setConsoleLog=function (_element,_string){
_element.addEventListener("click",function (){
//ここからthis(OutputManage)を参照できない
//この場合function(){/**/}.bind(this)か変数thatまたはselfにthisを代入して使う
that.console(_string);
},false);
return this;
}
}

var output=new OutputManage();
output.setConsoleLog(document.body,"test");
```

Answer 3

メソッド内でthisは利用出来るはずです。
this利用しなくても行けそうなので

var resizeToiphone = {
  wWidth  : document.documentElement.clientWidth,
  wHeight : document.documentElement.clientHeight,
  iWidth  : 320,
  iHeight : 568,
  ratio   : {}
}

resizeToiphone.ratio = {
    w : resizeToiphone.iWidth/resizeToiphone.wWidth,
    h : resizeToiphone.iHeight/resizeToiphone.wHeight
};
console.log(resizeToiphone.ratio.w);

このような感じで書くか、
thisを利用して書くのであれば

var resizeToiphone = {
  wWidth  : document.documentElement.clientWidth,
  wHeight : document.documentElement.clientHeight,
  iWidth  : 320,
  iHeight : 568,
  ratio   : function () {
    return {
      w : this.iWidth/this.wWidth,
      h : this.iHeight/this.wHeight
    };
  }
};
console.log(resizeToiphone.ratio().w);

このような感じでも動くと思います。

Comments

[MasakazuFukami]

回答有難うございます！！
メソッド内だとthisが使用できるんですね！！！
参考にさせていただきます！！！！！