以下のコードの 'marker'インスタンスと 'infoWindow'インスタンスは何が起こっていますか？

Question

私はjavascriptのnoobですが、私はJavaに最も精通しています。インスタンスが代わりに代わり

var infoWindow = new google.maps.InfoWindow({ 
        content:props.content 

       }); 

の

var marker = new google.maps.Marker({ 
      position:props.coords, 
      map:map, 
      //icon:props.iconImage 
      }); 

と

var infoWindow = new InfoWindow({ 
        content:props.content 

       }); 

の

var marker = new Marker({ 
       position:props.coords, 
       map:map, 
       //icon:props.iconImage 
       }); 

のように書かれていない理由を私は理解していないことはここですフルコード

function addMarker(props){ 
      var marker = new google.maps.Marker({ 
      position:props.coords, 
      map:map, 
      //icon:props.iconImage 
      }); 

      // Check for customicon 
      if(props.iconImage){ 
       // Set icon image 
       marker.setIcon(props.iconImage); 
      } 

      // Check content 
      if(props.content){ 
       var infoWindow = new google.maps.InfoWindow({ 
        content:props.content 

       }); 

       marker.addListener('click', function(){ 
        infoWindow.open(map, marker); 
       }); 
      } 

     } 

私はAPIを使用しているため、この方法が当てはまりますが、なぜこのようにする必要があるのか​​をよりよく理解したいと思います。

Answer 1

ファイル内にimportのJavaクラスとしてMarkerとInfoWindowを使用したいとします。まあ、importというJavascriptのようなものはありません（実際には存在しますが、現時点ではブラウザ環境には存在しません）。

とにかく、Javascriptではすべてがオブジェクトです。 JavascriptオブジェクトはJavaのマップと考えることができます。これらは基本的にキー値構造です。

どこか、使用しているGoogleマップライブラリのコード内に、googleというオブジェクトが定義されています。マップにはオブジェクトという名前のキーが含まれています。このオブジェクトには、MarkerやInfoWindowなど、Googleマップライブラリの定義が含まれています。

それは実際にこのようになります。あなたはそのドット表記法を必要とする理由

var gooogle = { 
    maps: { 
    Marker: /* definition of Marker */, 
    InfoWindow: /* definition of InfoWindow */, 
    // ... 
    }  
} 

だこと。 googleオブジェクトのサブサブキーに実際にアクセスしています。これはインポートしたライブラリによって宣言されています。