Javascript "this" 值在函数中未定义

Question

我正在尝试访问设置在“window”级别的变量（我相信）。我可以在所有函数中引用它们，但是当我尝试在事件侦听器函数中引用它时，这些值是未定义的。在下面的代码中，lat 和 lng 值未定义。

<script>
        let map;
        let lat;
        let lng;
        let location_name;
        let travel_radius;
        let circleObject;

        const source = document.getElementById('travel-radius-value');
        function inputHandler(e) {
        console.log('old travel_radius: ' + this.travel_radius);
          this.travel_radius = e.target.value;
          console.log('updated travel_radius: ' + this.travel_radius);
          let lat = this.lat; //<-UNDEFINED
          let lng = this.lng; //<-UNDEFINED
          circleObject.setMap(null);
          circleObject = new google.maps.Circle({
                strokeColor: "#FF0000",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#FF0000",
                fillColor: "#FF0000",
                fillOpacity: 0.35,
                map,
                center: {lat, lng},
                radius: this.travel_radius*1000,
          });
        }
        source.addEventListener('input', inputHandler);

更新：新代码。 lat 和 lng 仍未定义

<script>

        let map;
        let lat;
        let lng;
        let location_name;
        let travel_radius;
        let circleObject;

        const source = document.getElementById('travel-radius-value');
        function inputHandler(e) {
        console.log('old travel_radius: ' + this.travel_radius);
          this.travel_radius = e.target.value;
          console.log('updated travel_radius: ' + this.travel_radius);
          circleObject.setMap(null);
          circleObject = new google.maps.Circle({
                strokeColor: "#FF0000",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#FF0000",
                fillColor: "#FF0000",
                fillOpacity: 0.35,
                map,
                center: {lat, lng},
                radius: this.travel_radius*1000,
          });
        }
        source.addEventListener('input', inputHandler);

Answer 1

value of this 通常是调用方法的对象。在这种情况下，它是事件侦听器绑定到的元素。

使用 this.something 访问任何对象上的属性。

lat 和 lng 根本不是属性。它们是变量。您不能使用this访问它们。

通常你会只是使用lat和lng来访问它们，但在这种情况下你已经声明了其他变量（在函数内部）同名。这会导致局部变量覆盖更广泛范围内的局部变量，从而无法访问它们。

因此您还需要重命名两组变量之一。

另请注意，虽然 this.lat 和 this.lng 是 undefined（因为这些属性首先不存在于元素上），但变量 lat 和lng （在更广泛的范围内）是也 undefined 因为你初始化它们而不给它们赋值。

Javascript "this" 值在函数中未定义

Javascript "this" value is undefined in function

javascript

dom-events