我不明白原型的这部分javascript

时间:2011-10-07 08:01:25

标签: javascript cakephp-1.3 prototypejs

我目前正在使用带有prototype.js的cakephp处理谷歌地图api V3。我有一个名为TravelMapprManager的javascript类,它有4个具有18个函数的类变量。

var TravelMapprManager = Class.create( {

  // id of container
    map_container : '',

  /* the current map */
    map : null,

  /* geocoding location */
    geocoder : null,

   /* user entered locations */
     user_journey : new Array(),

  //many other functions [.....]

initialize : function( map_container ) {

    this.map_container = map_container;

    // start the map
    Event.observe( window, 'load', this.displayMap.bind(this) );

    // observe the map buttons
    Event.observe( document, 'dom:loaded', this.initObservers.bind(this) );

},

   /*
    * Save the location entered
    */
findLocation : function() {

    location_name = $( 'LocationName' ).value;


    if ( location_name == '' ) {
        alert( "Please enter a location name." );
        return;            
    }

    // we only allow a maximum number of locations
    if ( this.user_journey.length >= 20 ) {
        alert( "Sorry! We have reached the maximum number of locations." );
        return;
    }

    // Do geocoding, find the longitude and latitude of the location
    if ( this.geocoder ) {

        var current_o = this;

        this.geocoder.getLatLng(
            location_name,
            function( point ) {

                if ( !point ) {
                    alert( location_name + " not found" );
                } else {

                    // store the location
                    current_o.storeLocation( location_name, point );

                    // center the location on the map and add push pin marker
                    current_o.map.setCenter( point, 13 );
                    var marker = new GMarker( point );
                    current_o.map.addOverlay( marker );
                }
            }
            );
        }
    }
})

var current_o = this;在函数findLocation中的含义是什么?

2 个答案:

答案 0 :(得分:4)

函数this内的

findLocation与内部函数中的this关键字不同:

var current_o = this; //<-- Store reference to the `this` keyword inside the func
...
this.geocoder.getLatLng(
        location_name,
        function( point ) { //<------------ 
....

通过将this关键字存储在临时变量中,内部函数还可以访问函数thisfindLocation的属性。

<小时/> 一个简单的例子。此代码将事件侦听器添加到下一个输入元素,同时保持对前一个元素的引用:

var a = document.getElementsByTagName("input");
a[0].onclick = function(){
    var firstElement = this; //First `this`
    a[1].onclick= function(){
        firstElement.onclick = function(){}; //Reset
        this.onclick = function(){alert("This is different!")}; //Second `this`
    }
}

事件侦听器中的this关键字引用它们绑定的元素。在示例中,第一个this引用元素input[0],而第二个this引用input[1]。如果不将第一个this存储在临时变量(firstElement)中,则无法引用之前的this(不直接引用第一个元素) document.getElements..)。

答案 1 :(得分:2)

它将this绑定到局部变量,以便可以在传递给getLatLng的匿名函数内使用该对象。这是必要的,因为this的指示对象可能在该函数内部有所不同 - 这取决于它在getLatLng内的调用方式。