2016-05-07 18 views
2

Javascriptでオブジェクトを使用したいので、私はJavascriptのクラス/オブジェクト/プロトタイプについて読んできたので、OOPバックグラウンドから来ています。Javascriptオブジェクト/プロトタイプ。私の理解が間違っています

しかし、私は何かを誤解していると思います。たとえばVB.netで過去のオブジェクトを使用している場合、オブジェクトを作成し、データ・クラスを使用してオブジェクトを作成できました。

しかし、ここではjavascriptのものの土地では、私は、この非同期事に起因する期待していた方法で実行してはいけません。

私は以下のようにプロトタイプを作成し、適切な関数を呼び出しますが、関数はfnishedと言っています(ただし、$ .postからの応答がないため、コードがnull値として続き、コンソールに$ .postセクションの戻りではconsole.log 。だから私のボタンは、それが終了gogetperson機能を実行したときに、まだデータを持っていない

<!DOCTYPE html> 
<html> 
<body> 

    <button onclick="gogetperson()">Hello</button> 
<p id="demo"></p> 

<script> 
    function Person() { 
     this.firstName = '-'; 
     this.surname= '-'; 
     this.alias = 0; 
    } 
    Person.prototype.name = function() { 
     return this.firstName + " " + this.surname 
    }; 

    Person.prototype.getPerson = function(personid) 
    { 
     var query = $.param({personid: personid}); 
     var url = 'custom/person_get.php'; 

     $.post(url, query, function (response) { 
      var obj = $.parseJSON(response); 
      this.firstname= obj['rFirstName']; 
      this.surname = obj['rLastName']; 
      this.alias = obj['rAlias']; 

      console.log(this.firstname); 
     }); 

    }  

    function gogetperson() 
    { 
     var myPerson = new Person(); 
     myPerson.getPerson(1) 

     console.log(myPerson.firstName); 

    } 
</script> 
    <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script> 

</body> 
</html> 

。私が欲しい情報を取得いけない最初の名前私はそれを使用するために私の人のが、遅すぎたため。

を私は間違った方法でプロトタイプを使用しています?

私は、データを取得するときにオブジェクトとしてJavaScriptを使用できるようにしたいです。

まったく間違っていますか?このようにそれを使用したいため

私の理由は、それがPHPのオブジェクトに対するより良い選択と思われました。

PHPオブジェクトを代わりに使用する必要がありますか?

私は最終的にはmysqlデータベースからデータを取得し、簡単にjQueryとJavaScriptで私のWebページを変更したいです。あなたは一つのことが欠けている

+0

$ .postは非同期です。関数gogetperson()でconsole.logを実行すると、まだ$ .postからコールバック関数が得られていません。この行には何も印刷されません。 – Kelvin

+0

いくつかの用語をクリア:Javascriptの「オブジェクト」は、基本的なキー/値ペアのデータ型であり、他の言語では「辞書」または「マップ」と呼ばれています。プロトタイプはクラスに似たアイデンティティーを付与するために* *オブジェクトに追加することができますが、そのアイデンティティはプロトタイプによって決定されるため、古典的な階層継承とは異なり、JSでは実行時にプロトタイプを変更できます。 *変更したプロトタイプ*に、すべてのインスタンスが新しいAPI *に従って動作するようになりました。 –

答えて

2

、それは$.postを使用してHTTP呼び出しで非同期であり、それはブロッキング・コールではありません。 getPerson()メソッドから値を取得するには、結果を得るためにその関数にcallback (or function)を渡す必要がありますが、推奨される方法ではありません。彼らは約束を読んだり使えたりすることができます。 しかし、コールバックを使用すると、次のようなことができます。

Person.prototype.getPerson = function(personid, cb) 
{ 
    var query = $.param({personid: personid}); 
    var url = 'custom/person_get.php'; 

    $.post(url, query, function (response) { 
     var obj = $.parseJSON(response); 
     var person = new Person(); 
     person.firstname= obj['rFirstName']; 
     person.surname = obj['rLastName']; 
     person.alias = obj['rAlias']; 

     console.log(person.firstname); 
     cb(person); 

    }); 

} 

そしてあなたのようなそれを呼び出すことができ、

var myPerson = new Person(); 
function showPersonDetails(person){ 
    console.log(person.name()) 
} 
myPerson.getPerson(1, showPersonDetails); 
+0

わかった。それは動作します。あなたが私の頭の中にまだ持っていない多くの用語に頼らずに、私がここに示している基本的な原則は、データが返されたとき、仕事を運ぶ別の機能にすべてのものを渡すことです。 これはどのように動作するのですか。私の目的のために、それは私が欲しいものを正確に行うべきです。 特にZohaibに感謝したすべての人に感謝します。幸せな日々! –

+0

ええ。そうだけど、約束とjqueryの '$ .when()'関数について読むことをお勧めします。 –

+0

when関数を試してみて、同じ結果を得ました。私はおそらく正しくそれを使用していなかった。 –

関連する問題