javascript - 将 "this"传递给在类中实例化的类

Question

我是 JavaScript 新手，我正在尝试创建一个 MapManager 类来实例化其他一些管理器，这些管理器将管理 Google map 的不同方面；例如标记、不同的 View 等。

我遇到的问题是，当我尝试将“this”作为参数传递给 MapManager 正在实例化的其他类时，它仅传递 MapManager 的空实例(JavaScript 控制台显示“MapManager { }”) “并且在调用 MapManager 类内部声明的函数时出现错误。)

var MapManager = function(map) {

    var markerManager = new MarkerManager(this);
    var viewManager = new ViewManager(this);

    var getMarkerManager = function() {
        return markerManager;
    }

    var getViewManager = function() {
        return viewManager;
    }

    var getMap = function() {
         return map;
    } 

    return {
        getMarkerManager: getMarkerManager,
        getViewManager: getViewManager,
        getMap: getMap
    }

}

var MarkerManager = function(mapManager) {

    var map = mapManager.getMap();
    var markers = {};

    var createMarker = function(id, latitude, longitude) {

        var marker = new google.maps.Marker({
        position: new google.maps.LatLng(latitude, longitude),
        map: map,
        animation: google.maps.Animation.DROP
        });

        marker.set("id", id);
        markers[id] = marker;

        var listener = new google.maps.event.addListener(marker, "click", function () {
             mapManager.getViewManager().setZoomToClient(id);
        };
    };

    return {
        createMarker: createMarker
    };
}

var ViewManager = function(mapManager) {

    var map = mapManager.getMap();
    var setBoundView = function() {
    var bounds = new google.maps.LatLngBounds();
    var markers = mapManager.getMarkerManager.getMarkers();
    for(id in markers) {
    bounds.extend(markers[id].getPosition());
    }
    map.fitBounds(bounds);
    };

    return {
    setBoundView: setBoundView
    };
}

我无法在 JavaScript 中传递“this”进行依赖注入(inject)吗？如果您能够比较 JavaScript 中的“this”与其他语言中的差异，那么了解我熟悉 PHP、Java 和 Python 可能会很有用。

Answer 1

您遇到的问题是您在构造函数中使用的 this 实际上并不是您最终构建的东西。您正在使用一种特定的 Javascript 模式(您可能已经读过该模式是实现“私有(private)”成员的好方法)，当您尝试使用该语言的某些功能时，该模式会导致奇怪的事情发生。 [0]

在构造函数执行期间，this 实际上指向 MapManager 的一个实例。但是，由于您从构造函数返回一个对象，因此对 MapManager 实例的外部引用是对返回对象的引用，这与 this 是您在构造函数中引用的。

有几种方法可以解决这个问题:

1. 如果您只是从构造函数中删除 return { ... }; 并将您在该对象中所做的赋值替换为例如 this.functionName = functionName; ，你应该没问题。

2. 如果您想以更标准的 JavaScript 方式执行此操作，可以将 map 放在 this 上，并将您的方法放在 MapManager.prototype 上。 This SO question解释了如何执行此操作，以及有关这两个选项之间差异的更多信息。

此外，如果您对一个可以更轻松地定义经典 OO 类的轻量级库感兴趣，我建议您查看 Classy 。

[0] 我对这种模式有些固执己见:我认为它是邪恶的、卑鄙的、 splinter 的，永远不应该使用。它以特别令人沮丧的方式破坏了语言的基本方面(例如原型(prototype)链)。