Js如何避免通过命名空间访问类成员

js how to avoid accessing class members via the namespace

本文关键字:访问 成员 命名空间 何避免 Js      更新时间:2023-09-26

我正在努力改进我的Javascript编码风格,并且一直在阅读它对命名空间的东西很好。

然而,我似乎不能在任何地方使用"this"关键字,我想-相反,我只能通过命名空间(在这种情况下"oldMap")从匿名函数中访问我的类属性。这意味着我不能在不更改代码的情况下更改名称空间id—这看起来可能是错误的。

这是我构建的类-它实际上似乎可以正常工作。(对不起,很长)。

任何关于我所做的对/错的建议/提示,我都感激不尽。由于

var oldMap = {
    map : null,
    center : {lat:50, lng:20, zoom:3}, 
    drawn : false,
    data : {},
    divId : "oldMap",
    url : "php/getMapData.php",
    infowindow : new google.maps.InfoWindow({ 
        size: new google.maps.Size(150,50)
    }),
    init : function () {
        if (!this.drawn){
            $.getJSON(
                this.url,
                function(d){
                    if(d){
                        $.extend(oldMap.data,d);
                        var latlng = new google.maps.LatLng(oldMap.center.lat, oldMap.center.lng);
                        var myOptions = {
                            zoom: oldMap.center.zoom,
                            center: latlng,
                            mapTypeId: google.maps.MapTypeId.TERRAIN
                        };
                        // create the map
                        map = new google.maps.Map(document.getElementById("oldMap"),myOptions);
                        // create the legend
                        var legendDiv = document.createElement('DIV');
                        legendDiv.innerHTML = '<div id="legend"><img src="images/markers/legend-blur.png"></div>';
                        map.controls[google.maps.ControlPosition.TOP_LEFT].push(legendDiv);
                        google.maps.event.addListener(map, 'click', function() {
                            infowindow.close();
                        });
                        // Set the info window html template
                        var infoWindowTemplate = "<div id='balloon'>{{#url2}}<img src='{{url2}}' />{{/url2}}<h2>{{project_name}}</h2><p><b>Amount</b> &euro; {{cost}}</p><p><b>Country</b> {{country}}</p><p><b>Year</b> {{year}}</p><p><b>Project Type</b> {{project_type}}</p><p>{{description}}</p>{{#url}}<p><a target='_blank' href='{{url}}'>More info</a></p>{{/url}}</div>"
                        // loop through the projects
                        for(var m in oldMap.data) {
                            // if the project has a marker type defined
                            if (oldMap.data[m].marker) {
                                // point
                                var point = new google.maps.LatLng(oldMap.data[m].lat, oldMap.data[m].longtd); 
                                // create HTML for info window
                                var infoHtml = Mustache.to_html(infoWindowTemplate, oldMap.data[m]);
                                // icon
                                var icon = new google.maps.MarkerImage(
                                    "images/markers/33px/" + oldMap.data[m].marker + ".png",
                                    new google.maps.Size(33,33)
                                );
                                // create a marker for this project
                                var marker = oldMap.createMarker(point,infoHtml,icon);
                            }
                        }
                        oldMap.drawn = true;
                    }
                }
            )
        }
    },

    createMarker : function (latlng, html, icon) {
        // create the marker
        var marker = new google.maps.Marker({
            position: latlng,
            icon: icon,
            map: map,
            zIndex: Math.round(latlng.lat()*-100000)<<5
        });
        // open info window when marker clicked
        google.maps.event.addListener(marker, 'click', function() {
            oldMap.infowindow.setContent(html); 
            oldMap.infowindow.open(map,marker);
        });
    }
};

直接作用于对象的函数的第一行应该是…

function () {
    var that = this;
    ...
}

然后,在您的内部函数中,将对this的引用与that交换。

这是因为内部函数的this指向window

如果你正在使用jQuery,看看proxy()方法:

http://api.jquery.com/jQuery.proxy/

这个方法是专门设计来强制this的作用域到一个特定的对象。我个人更喜欢PrototypeJS bind()的语法:

http://api.prototypejs.org/language/Function/prototype/bind/

…但是,尽管我更喜欢PrototypeJS而不是jQuery,但似乎战斗已经打过了,而且已经输了。