javascript グローバル変数の参照が出来ない。

Question

前提・実現したいこと

javascriptでデータベースから取得したデータをgrobal変数に格納して、別のjsファイルで読み込む処理を実装しています。
phpでechoした内容をjson.Parseしてローカル変数に格納し、setterを呼んでグローバル変数に格納したいのですが
グローバル変数の内容が変わりません。

phpのselect処理と結果取り出しまでは正しく動作しているので、グローバル変数を正しく参照出来ていないのだと思います。
javascriptでグローバル変数を参照する際は以下のコードでは不十分なのでしょうか、初歩的な質問にはなりますがご回答頂けると幸いです。
よろしくお願いします。

該当のソースコード

var tripMembers = {}; //連想配列

function getTripMembers() { //getter
    return this.tripMembers;
}

function setTripMembers(data) { //setter
  this.tripMembers = data;
}

function getPlanningInfo() {
    selectMember();

    console.log("チェック");
    console.log(getTripMembers());　//出力結果 "{}"; (初期値のまま？）

}


function selectMember() {
    $.ajax({
        type:'POST',
        url: "./dao/tripMemberSELECT.php",
        data:{
          'trip_id':localStorage.getItem("trip_id")
	    },//実際はcookie,sessionから所得する可能性あり
    }).done( (data) => {
        if(data=="ERR") {
            console.log("DBError");
            return "DBError";
        }else {
            console.log(data);
            var trip_mem = JSON.parse(data);　//phpにアクセスし、dataをjsonParseするところまでは正しく動作。
            console.log(trip_mem);
            /*　出力結果
            {"0":{"name":"田中","budget":"50000"},
            "1":{"name":"斎藤","budget":"60000"},
            "2":{"name":"中村","budget":"70000"}}
            */
            setTripMembers(trip_mem);
        }
    })
    // 失敗
    .fail( (data) => {
        console.log(data);
    })
    .always( (data) => {
    });

}

試したこと

　getter、setterの this.tripMembers; を grobalthis.tripMembers; に変えて実行してみましたが、結果は変わりませんでした。
また、window.tripMembers;　でも同様に結果は変わりませんでした。

Comments

[m.ts10806]

本文の誤字訂正願います。 jacascript
プログラムは指示した通りにしか動かないのでこういう誤字が大事故の一歩目になり得ます。

[m.ts10806]

あとPHPとか絡んでいるならタグはあわせたほうがいいです。
本件ですとPHP,Ajax,JSON　あたりはタグに必要ではないでしょうか。

Answer 1

Ajaxは非同期処理です。
非同期であるが故、処理が完了しているかどうか関係なく次の処理に進んでいます。
つまり見た目の処理順番が保証されません。
async/awaitなどを使って処理順番を保証するように組む必要があります。

あと・・
個人的な感想ですが、グローバルに定義しているならsetter,getter意味ないような。

Comments

[pathy]

ご回答ありがとうございます。ご指摘の点も修正させていただきました。

このソースの場合json.parseが完了した後にグローバル変数にデータを格納するようにしないと上手くいかないことがある。という理解でよかったでしょうか。
少し試してみようと思います！

getter、setterは上手くいかなくて少しでも明示的にしようと思って作ったものでした。確かに無意味ですね...

Answer 2

あー、これはJSの難解な仕様の一つである「this解決」が原因でしょうね。

getの関数内でthis.tripMembersを探しに行ってますね。
その結果ちゃんと{}という空のオブジェクトが帰ってきます。
この理由はgetのスコープの関係で、スコープ内に存在しない場合は上のスコープへ値を探しに行きます。
最終的にグローバルスコープに到達することでthis.tripMembersが見つかるので空のオブジェクトが帰ってきます。

setは関数なのでthisそのものは存在しています。
代入演算子を利用したことでsetTripMembersスコープの中にthis.tripMembersというプロパティを生成。
作ったプロパティに引数のdataを代入して保管します。
当然グローバルスコープのthis.tripMembersは手付かずになりますし、get関数はset関数と兄弟の関係にあるので取り出す事は不可能です

別にthis越しに取りに行かんでも、普通に変数としてアクセスすれば、
存在しない変数名の場合は上を探しにいくのでアクセスできますよ。
なのでsetやgetという概念自体が不要です。

var tripMembers = {};

function setTripMembers(data) { //setter
  tripMembers = data;
}

setTripMembers({taro: {name: "taro"}});
console.log(tripMembers); // {taro: {name: "taro"}}

---

このthisというのはJSの仕様の最も難解な箇所の一つで、
まともに扱える人がほとんどいません。

ES6以降のJSではthisを使わずにプログラミングしていける事を目指して、
thisを極力作らないし、使わずに済むような機能や構文が多く採用されています。
なので新しいJSのプログラミングではthisは不要です。

ん？それでもthis使いたい？
thisはJS上で4種類の意味合いに変化するよくわからん実装になってます。
私も説明しきれる程には詳しくないので、Ninjaの極意のような書籍を読んで学習してください。

Comments

[pathy]

ご回答ありがとうございます。
thisについて分かりやすく説明していただき、ざっくりですが何が問題なのか理解することができました。

ご指摘いただいた通り

```JavaScript
var tripMembers = {};

function selectMember() {
/* ajax ~*/
}).done( (data) => {
if(data=="ERR") {
console.log("DBError");
return "DBError";
}else {
var trip_mem = JSON.parse(data);
tripMembers = trip_mem;
console.log(tripMembers); /* ※A 　出力結果
{"0":{"name":"田中","budget":"50000"},
"1":{"name":"斎藤","budget":"60000"},
"2":{"name":"中村","budget":"70000"}}
*/
}
})
/* ~ajax */
}

function getPlanningInfo() {
selectMember();　//この中でtripMembersにデータを入れる。

console.log(tripMembers);　/*※ B 出力結果 "{}" */

}

```

と、thisとgetter,setterを省きアクセスしてみたのですが、ajax通信を行っている selectMembers()の中では値が変わったのですが、関数の外にでると tripMembersの値は初期値のままとなってしまいました。

これはselectMembers()の中ではtripMembersがvarで宣言していないのにも関わらずローカル変数として扱われてしまっているということでしょうか。

[Lhankor_Mhy]

「window.tripMembers;　でも同様に結果は変わりませんでした」とあるとおり、この問題に関する限りは直接的な原因ではないと思います。

なお、低評価するかどうか迷いましたが、質問者は遠からず同様の問題に直面するだろうと思いますので、低評価しませんでした。

[miyabi-sun]

あー、こっからはmtsさんの内容ですね。
JavaScriptは非同期のイベント駆動です。

$.ajaxを発火する時に、doneの所で色々と無名関数を作って対応したと思いますが、
イベント登録置き場に発火条件と、完了時にやりたい内容を関数として包んで渡しているだけです。

つまり書いた箇所で実行していません。
登録したら「条件満たしたら実行するわ、ではさよなら」と終わっています。

なので後続の処理があるなら全て同じ関数内で書けという話ですし、
この辺がコールバック地獄と呼ばれるJSでのプログラミングの大変な所になります。
色々解決策はあるのでコールバック地獄でググって調べてみてください。

[pathy]

ありがとうございます、試しにasync:false;にしたら期待通りの結果を受け取ることができました。
このままでも問題ない箇所ではあるのですが、やはりすこし気になるためコールバックについて勉強して行きたいと思います。

[m.ts10806]

async:false;は根本的な解決策ではないですしね。
ブラウザのアクション含めて全て止めてしまうのであくまでデバッグでしか使ってません。（初期値がtrueなのはフリーズするためで非同期のメリットなくなりますからね）