Question

function updateView(campusId) {

        var latlng = CampusModel[campusId].latlng;

        var canvas = "campus-map";

        var zoom = 12;

        google.maps.event.addDomListener(window, 'load', mapInitialize(latlng, canvas, zoom));

...
}

我最初发布了一张图片，显示当函数exe时，campusId参数为1。

在功能块内，[campusId]未定义。

有人在这里看到问题吗？

定义了CampusModel。

完整代码行：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>MVC Example</title>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script>

    /* MODEL */
    var CampusModel = {
        1:  {
                name: 'a Campus',
                address: 'somewhere',
                lating: { lat: 41.1693913, lng: -127.8672693 }
            },
        2:  {
                name: 'b Campus',
                address: 'somewhere2',
                lating: { lat: 19.2833298, lng: -124.1152499 }
            },
    };

    /* CONTROLLER */
    function initView() {
        var selector = document.getElementById('campuses-dropdown');
        var options = '<option>[ Select a Campus ]</option>';
        for (var campusId in CampusModel) {
            options += '<option value="' + campusId + '">';
            options += CampusModel[campusId].name;
            options += '</option>';
        }
        selector.innerHTML = options;
        selector.onchange = function() { updateView(this.value); };
    }

    </script>

    <script>
    //Helper functions

    // Initialize google map.
    function mapInitialize(latlng, canvas, zoom){

        var mapCanvas = document.getElementById(canvas);

        var options = {
          center: latlng,
          zoom: zoom,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var campusMap = new google.maps.Map(mapCanvas, options);

        var marker = new google.maps.Marker({
            position: latlng,
            map: campusMap,
            title: 'BCIT'
        });


        }

    function updateView(campusId) {

        var latlng = CampusModel[campusId].latlng;

        var canvas = "campus-map";

        var zoom = 12;

        google.maps.event.addDomListener(window, 'load', mapInitialize(latlng, canvas, zoom));

        google.maps.event.addDomListener(window, "resize", function() { 

            var center = campusMap.getCenter();
            google.maps.event.trigger(campusMap, "resize");
            campusMap.setCenter(center); 

            });

    }

    </script>

</head>

<body onload="initView()">

    <!-- VIEW -->
    <div>
        <select id="campuses-dropdown"></select>
    </div>
    <div id="campus-map">

    </div>

</body>

</html>

selector.onchange = function（）{updateView（this.value）; };

原始代码中“this”指的是哪里？我以为是指向选择器。但也许不是吗？

仍然this.value将正确的参数传递给函数。

基本原因是什么

Answer 1

因为您已使用campusId作为参数定义了函数，所以函数内部的值将为undefined，除非您在调用函数时实际传递某个值

编辑 - 现在您已经发布了所有代码，问题显而易见。您将“updateView”函数绑定为事件处理程序，并期望（错误地）this在调用时引用“selector”对象。您需要的是与.bind()：

相似的解决方案

    selector.onchange = function() { updateView(this.value); }.bind(selector);

javascript函数参数奇怪的行为**这是什么

1 个答案: