Javascriptオブジェクトは、宣言されていないにもかかわらず関数内でしか使用できません。

Question

This code from Google Mapsドキュメントページは私にとって非常に謎です。スニペット内の関数はオブジェクトgoogleを参照していますが、すべてがうまく機能しています。

オブジェクトgoogleはグローバル関数で使用されているため、グローバルスコープに存在することが予想されます。それ以外の方法を知らない（つまり、宣言していない、つまり渡されていません）をパラメータとして

たとえば、私は

function() { 
    // do some calc 
    anotherFunction(resultOfCalc) 
    ... 
} 

のようなコードを見れば、私はanotherFunctionは、少なくとも親スコープで利用可能であることを前提としています - そうでない場合はグローバルなもの。

Here is the JSFiddle for the Google code。私はそれが

VM573:66 Uncaught ReferenceError: google is not defined 
    at VM573:66 

しかし、なぜに印刷されたコンソールにラインconsole.log("Google obj:", google);

を追加しました注意してください？コードの次の行は

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 10, 
    center: {lat: -33.9, lng: 151.2} 
    }); 

    setMarkers(map); 
} 

であるとgoogleの使用についてのcompaintはありません。

私はこの独特な動作を理解するのを手伝ってください。

Answer 1

この問題は、スクリプトはasync defer

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> 

がロードされていますそして、スクリプトがロードされる前にconsole.logと呼んでいます：

console.log("Google obj:", google);("Google obj:", google); 

スクリプトが読み込まれると、Googleはグローバル変数として設定されます。

あなたの機能は、スクリプト内のクエリ文字列callback=initMapので問題はありませんsrc属性は、googleオブジェクトがこの時点でグローバル変数として設定されていることを意味してロードするときに、あなたの関数を呼び出すためにGoogleに指示します。

実際、初めてフィディルドを実行するとエラーが発生します。しかし、その後の実行では、スクリプトがブラウザによってキャッシュされ、console.logが呼び出される前にロードする機会があるため、エラーは発生しません。ブラウザは、可能 場合は、非同期的にスクリプトを実行する必要があることを示すために、このブール属性を設定

Answer 2

ライブラリスクリプトがgoogleの準備ができたときにコールバックを呼び出すのJSONP技術を使用してロードされます。

<script async defer src="https://maps.googleapis.com/maps/api/js?key=…&callback=initMap"> 
</script>

Answer 3

非同期

。この属性は、src属性が存在しない場合には使用しないでください（つまり、 ）。インラインスクリプトの場合）、この場合は になりますが、影響はありません。

このブール属性に設定されてasync=false

延期

を設定同期実行の オンにする（つまり、スクリプトは、彼ら がロードされた順序で実行）して動的に挿入されたスクリプトは、デフォルトでは非同期に実行スクリプトに が実行された後に、DOMContentLoadedを呼び出す前に、文書が解析された後に、 が実行されることをブラウザに示します。この属性は、 属性が存在しない場合（インラインスクリプトの場合）は使用しないでください。この場合、 は無効です。動的に挿入された スクリプトで同様の効果を得るには、代わりにasync=falseを使用します。スクリプトタグに見ることができるよう

あなたはdefer持っているとasyncは、それがページを解析している間、ページの残りの部分とは非同期に実行されるように、このスクリプトを作り、あなたがconsole.log(google)を実行し、それが未定義だときには、このスクリプトことを意味します読み込みはまだ完了していません。 callbackパラメータは、スクリプトが

<script async defer src="https://maps.googleapis.com/maps/api/js?key=…&callback=myCustomFunction"> 
</script> 

ときにそのファイルが、それは_HereがあるJSFiddle ..._ある