Fatal编程技术网
  • javascript/
  • javascript函数参数奇怪的行为**什么'；这是什么

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

javascript

javascript函数参数奇怪的行为**什么'；这是什么,javascript,Javascript,我最初发布的一张图片显示，当函数exe时，campusId参数为1 一旦进入功能块，[campusId]就未定义 有人看到这个问题吗 定义了CampusModel 完整代码行： function updateView(campusId) { var latlng = CampusModel[campusId].latlng; var canvas = "campus-map"; var zoom = 12; google.m

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

一旦进入功能块，[campusId]就未定义

有人看到这个问题吗

定义了CampusModel

完整代码行：

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));

...
}


MVC示例
/*模型*/
var CampusModel={
1:  {
名称：'校园'，
地址：'某处'，
拉丁语：{lat:41.1693913，lng:-127.8672693}
},
2:  {
名称：“b校区”，
地址：'somewhere 2'，
拉丁语：{lat:19.2833298，lng:-124.1152499}
},
};
/*控制器*/
函数initView（）{
var选择器=document.getElementById（'campuses-dropdown'）；
变量选项=“[选择一个校园]”；
for（CampusModel中的变量campusId）{
选项+=''；
选项+=CampusModel[campusId]。名称；
选项+=''；
}
selector.innerHTML=选项；
selector.onchange=function（）{updateView（this.value）；}；
}
//辅助函数
//初始化谷歌地图。
函数mapInitialize（缩放、画布、缩放）{
var mapCanvas=document.getElementById（画布）；
变量选项={
中心：拉特林，
缩放：缩放，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var campusMap=new google.maps.Map（mapCanvas，选项）；
var marker=new google.maps.marker({
位置：latlng，
地图：campusMap，
标题：“BCIT”
});
}
函数更新视图（campusId）{
var latlng=CampusModel[campusId]。latlng；
var canvas=“校园地图”；
var=12；
google.maps.event.AddDomainListener（窗口“加载”，地图初始化（latlng，canvas，zoom））；
google.maps.event.addDomListener（窗口，“调整大小”，函数（）{
var center=campusMap.getCenter（）；
google.maps.event.trigger（campusMap，“resize”）；
campusMap.setCenter（中心）；
});
}
selector.onchange=function（）{updateView（this.value）；}

在原始代码中，“this”指的是什么？我以为它指向了选择器。但也许不是

仍然是这个.value将正确的参数传递给函数

根本原因是什么

因为您使用
campusId
作为参数定义了函数，函数中的值将是
未定义的
，除非在调用函数时实际传递了某个值

编辑-既然您已经发布了所有代码，那么问题就显而易见了。您将“updateView”函数绑定为事件处理程序，并期望（错误地）调用时
this
将引用“selector”对象。您需要的是一个类似于
.bind（）
的解决方案：

这取决于实际调用函数时在何处传递campusId……重要的是如何调用“updateView（）”。另外，maps API调用在我看来非常可疑，
mapInitialize（）
做什么？您正在那里调用函数，因此，除非返回要用作回调的函数，否则编写的函数将不起作用。您可以向我们展示调用updateView的代码吗？请参阅@J.Doe，该图像不显示每个人都希望看到的代码。在调用“updateView”的地方发布代码。并在此处发布代码-不要在其他地方发布带有链接的屏幕截图。正如您所看到的，调用函数时会插入参数。但在区块内，它立即变得不明确。@J.Doe？？我绝对看不见。您需要发布调用“updateView”函数的代码。那么，左下角的变量子窗口显示campusId位于1右侧？嗯。“这”在初始代码中指的是什么？窗户？因为当我不绑定console.log（this.value）时，它仍然显示正确的选项值。@J.Doe yes抱歉，这是一个错误；我已经更新了它，我认为它应该是
.bind（selector）
而不是
.bind（this）
<!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); }.bind(selector);