javascript - 自定义js函数 'Cannot read property ' zoom'of undefined'

Question

在遵循 tuts+ 上的谷歌地图教程后，我决定构建一些自定义函数。 Link

在“controlZoom”函数中，我试图设置一些自定义控件，但是我无法访问“this.gMap”:

    controlZoom:function(){
        var plusZoom = document.getElementsByClassName('icon-plus-sign')[0],
            minusZoom = document.getElementsByClassName('icon-minus-sign')[0],
            count = this.gMap.getZoom();
        plusZoom.addEventListener('click', function() {
            this.gMap.zoom(count++);
        });
        minusZoom.addEventListener('click', function() {
            this.gMap.zoom(count--);
        });
    }

我可以访问以下内容:

console.log(count);

但不在“点击”事件中。

我在这里调用自定义函数:link

当我尝试点击时，控制台出现以下错误:

'无法读取未定义的属性'zoom'

Answer 1

事件监听器中的“this”可能是被单击的加号/减号按钮。您可以使用“self”变量来解决此问题:

controlZoom:function(){
    var self = this;
    var plusZoom = document.getElementsByClassName('icon-plus-sign')[0],
        minusZoom = document.getElementsByClassName('icon-minus-sign')[0],
        count = this.gMap.getZoom();
    plusZoom.addEventListener('click', function() {
        self.gMap.zoom(count++);
    });
    minusZoom.addEventListener('click', function() {
        self.gMap.zoom(count--);
    });
}

或使用.bind:

controlZoom:function(){
    var plusZoom = document.getElementsByClassName('icon-plus-sign')[0],
        minusZoom = document.getElementsByClassName('icon-minus-sign')[0],
        count = this.gMap.getZoom();
    plusZoom.addEventListener('click', function() {
        this.gMap.zoom(count++);
    }.bind(this));
    minusZoom.addEventListener('click', function() {
        this.gMap.zoom(count--);
    }.bind(this));
}

这些修复假定 controlZoom 中的“this”是具有 gMap 的对象!我认为是的，因为您说 this.gMap.getZoom() 行返回了正确的计数。所以我的两个建议应该都有效，但如果没有，请尝试通过添加

进行调试

console.debug(this)

检查“这”是否符合您的预期。

---

关于使用++的注意事项

++ 是一个运算符，count++ 会递增计数并返回。但是传递给函数的值将是计数递增之前的值。您可以通过以下控制台 session 说服自己:

var n = 0

function report(p) { console.log(p) }

report(n++)
0

你用 n++ 调用 'report' 函数，你会认为这可能会导致它打印出 '1'。事实上，它实际上打印出“0”。这是因为 n 在递增++ 之前被传递到报告中。

在您的情况下，您第一次调用 zoom(count++) 函数时，实际上是使用现有的计数值调用它，然后才递增计数。所以看起来好像需要两次点击才能放大。安全的方法是:

    plusZoom.addEventListener('click', function() {
        count++;
        this.gMap.zoom(count);
    }.bind(this));

然后您将确保在将计数传递给缩放函数之前递增计数。