質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

2670閲覧

javascriptにおけるthisの参照

MasakazuFukami

総合スコア1869

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2015/01/07 10:40

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

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

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

lang

1var resizeToiphone = { 2 wWidth : document.documentElement.clientWidth, 3 wHeight : document.documentElement.clientHeight, 4 iWidth : 320, 5 iHeight : 568, 6 ratio : { 7 w : this.iWidth/this.wWidth, 8 h : this.iHeight/this.wHeight 9 } 10}

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

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

lang

1var a={ 2 b : { 3 c: this 4 } 5} 6console.log(a.b.c);//window

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

lang

1resizeToiphone=(new function (){ 2 this.wWidth=document.documentElement.clientWidth; 3 this.wHeight=document.documentElement.clientHeight; 4 this.iWidth=320; 5 this.iHeight=568; 6 this.ratio={ 7 w : this.iWidth/this.wWidth, 8 h : this.iHeight/this.wHeight 9 } 10 return; 11}()); 12 13console.log(resizeToiphone.ratio.w);//0.23721275018532245

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

lang

1resizeToiphone=(function () { 2 function resizeToiphone(){ 3 resizeToiphone.prototype.wWidth = document.documentElement.clientWidth; 4 resizeToiphone.prototype.wHeight = document.documentElement.clientHeight; 5 resizeToiphone.prototype.iWidth = 320; 6 resizeToiphone.prototype.iHeight = 568; 7 resizeToiphone.prototype.ratio = { 8 w: this.iWidth / this.wWidth, 9 h: this.iHeight / this.wHeight 10 } 11 }; 12 return new resizeToiphone(); 13}()); 14 15console.log(resizeToiphone.ratio.w); //0.23721275018532245

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

lang

1resizeToiphone=(new function resizeToiphone(){ 2 resizeToiphone.prototype.wWidth=document.documentElement.clientWidth; 3 resizeToiphone.prototype.wHeight=document.documentElement.clientHeight; 4 resizeToiphone.prototype.iWidth=320; 5 resizeToiphone.prototype.iHeight=568; 6 resizeToiphone.prototype.ratio={ 7 w : this.iWidth/this.wWidth, 8 h : this.iHeight/this.wHeight 9 } 10}()); 11console.log(resizeToiphone.ratio.w);//0.23721275018532245

投稿2015/01/07 12:32

Cf_cwd

総合スコア730

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2015/01/15 16:06

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Cf_cwd

2015/01/16 06:28

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"); ```
guest

0

ベストアンサー

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

lang

1var resizeToiphone = { 2 wWidth : document.documentElement.clientWidth, 3 wHeight : document.documentElement.clientHeight, 4 iWidth : 320, 5 iHeight : 568, 6 ratio : {} 7} 8 9resizeToiphone.ratio = { 10 w : resizeToiphone.iWidth/resizeToiphone.wWidth, 11 h : resizeToiphone.iHeight/resizeToiphone.wHeight 12}; 13console.log(resizeToiphone.ratio.w);

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

lang

1var resizeToiphone = { 2 wWidth : document.documentElement.clientWidth, 3 wHeight : document.documentElement.clientHeight, 4 iWidth : 320, 5 iHeight : 568, 6 ratio : function () { 7 return { 8 w : this.iWidth/this.wWidth, 9 h : this.iHeight/this.wHeight 10 }; 11 } 12}; 13console.log(resizeToiphone.ratio().w);

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

投稿2015/01/07 11:17

pikonori

総合スコア82

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MasakazuFukami

2015/01/07 12:15

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問