2016-09-07 9 views
7

私はJavaScriptを初めて使い、いくつかのOOPの基礎とシミュレートされた "クラス"を頭に入れようとしています。

このスクリプトの最後の行を実行すると、farmオブジェクトを参照するように、行番号4のthisオブジェクトポインタが呼び出されるようにします(2行目と3行目と同じように)。"this"変数を変更する機能

残念ながら、私はthisオブジェクトポインタがdocumentを指していると推測します。

var Building = function(cost){ 
    this.cost = cost; 
    this.printCost = function(){ 
     document.getElementById(this).innerHTML = this.cost; 
    } 
} 

var farm = new Building (50); 

farm.printCost(); 

-

<html> 
<body> 
<p id="farm"> 
</p> 
</body> 
</html> 

この関数は右のオブジェクトを使用して取得する方法はありますか?私の理解に誤りがある場合は、私に知らせてください。

私はまだjQueryに慣れていないので、コアJavaScriptシンタックスを守ることができたら、私はそれを感謝します!

JSFiddle:https://jsfiddle.net/7n2of9k7/

+4

'getElementByIdを(これは)」に関係なく、 –

+1

が理由だけで機能するために文字列として' farm'を渡さない仕事はありませんでしょうか? – Li357

+0

単に文字列として渡します: '... = function(cost、element)'ここで、elementは挿入する要素です。 – Li357

答えて

4

上でそれを使用し、文字列は不可能であるとして、インスタンスの変数名を取得する必要があります。私はまた、あなたがなぜこれを行うのかは、実際には実用的ではないので、実際にはわかりません。それは正しく挿入ので、これは今ちょうど関数にIDを渡し

var Building = function(cost, element){ 
 
    this.cost = cost; 
 
    this.printCost = function(){ 
 
     document.getElementById(element).innerHTML = this.cost; 
 
    } 
 
} 
 

 
var farm = new Building(50, 'farm'); 
 

 
farm.printCost();
<p id="farm"> 
 
</p>

:私はちょうどあなたが文字列としてに挿入したい要素に渡します。これをprintCostに渡すこともできます。

+0

ああ、ありがとう!これは完全に動作し、私のために多くの混乱をクリアしました!私は_too_をかなり自動化しようとしていたと思う。 – Rilke

-4

あなたは変数にこれを割り当て、私の知る限りでは、あなたの匿名

function 
    var Building = function(cost){ 
    this.cost = cost; 
    var currentObj = this; 
    this.printCost = function(){ 
     document.getElementById(this).innerHTML = currentObj.cost; 
    } 
} 

var farm = new Building (50); 

farm.printCost(); 
+2

これは完全に無効です。変数宣言の前に関数キーワードがあるのはなぜですか? 'var Building = function(cost){...}'は完全に有効です。 – Li357

2

は、コンストラクタ関数のメソッド内「THIS」は常にあなたのケース。あなたはmethod.ChangeあなたprintCost方法にgetElementById()内の全オブジェクトのインスタンスを渡しているこの==ファームで、そのコンストラクタ関数のインスタンスを示していますと一致するオブジェクトインスタンスの名前を取得します。。オブジェクトの範囲内で定義されたすべての変数を持つウィンドウオブジェクトを反復処理する必要があります。 オブジェクトは、変数 "farm"の名前と一致するウィンドウオブジェクトから変数名を取得することになります。その後、getElementById()で使用してください。 check this answer for more detail

this.printCost = function(){ 
    for(var prop in window){ 
     if(window[prop]==this){ 
      document.getElementById(prop).innerHTML = this.cost; 
     } 
    } 

} 
+0

私はそれがofcourseのインスタンスを作成した後のことを意味します。それは何をしているのですか? –

+0

これは動作していないようです:https://jsfiddle.net/u2nxxg6d/ – Li357

+0

は私のためにfirefox、chromeなどで動作します –

関連する問題