为什么这段 JS 代码不能在旧设备上运行？

Question

I'm trying to build a simple MagicMirror in-browser weather app based on openweathermap API.

Knowing very little about coding, it proves a bit hard. I have this code, that someone corrected for me, but it won't run on older devices. Here's the sandbox link .

class Weather {
    constructor(data) {
      this.data = data;
      this.temp = Math.round(data.main.temp);
      this.feels_like = Math.round(data.main.feels_like);
      this.description = data.weather[0].description;
      this.city = data.name;
      this.country = data.sys.country;
      this.wind = Math.round(data.wind.speed);
      this.humidity = data.main.humidity;
    }
  
    geticonClass() {
      let prefix = this.data.weather[0].icon.endsWith("d")
        ? 'wi-owm-day-'
        : 'wi-owm-night-';
      return `${prefix}${this.data.weather[0].id}`;
    }
  }
  
  function fetchWeather() {
    navigator.geolocation.getCurrentPosition(
      async (position) => {
        let url = new URL("https://api.openweathermap.org/data/2.5/weather");
        url.searchParams.set("lat", position.coords.latitude);
        url.searchParams.set("lon", position.coords.longitude);
        url.searchParams.set("lang", "pl");
        url.searchParams.set("appid", "fb7164d50e0faf1f058561b7903f03b9");
        url.searchParams.set("units", "metric");
  
        const response = await fetch(url);
        const weatherJSON = await response.json();
        updateDOM(new Weather(weatherJSON));
      },
      (error) => {
        console.error("Unable to get geolocation, Unsuported maybe?");
      }
    );
  }
  
  function updateDOM(weather) {
    const iconElement = document.querySelector(".today-weather-icon i");
    const tempElement = document.querySelector(".temperature-value p");
    const tempFeelElement = document.querySelector(".temperature-feel p");
    const descElement = document.querySelector(".temperature-description p");
    const locationElement = document.querySelector(".location p");
    const windElement = document.querySelector(".wind p");
    const humidElement = document.querySelector(".humid p");

    iconElement.classList.add(weather.geticonClass());
    tempElement.innerHTML = `${weather.temp}°<span>C</span>`;
    tempFeelElement.innerHTML = `Odczuwalna: ${weather.feels_like}°<span>C</span>`;
    descElement.innerHTML = weather.description;
    locationElement.innerHTML = `${weather.city}, ${weather.country}`;
    windElement.innerHTML = ` ${weather.wind} km/h`;
    humidElement.innerHTML = ` ${weather.humidity}`;
  }
  
  fetchWeather();
  setInterval(fetchWeather, 1800000);
  updateDOM();
  setInterval(updateDOM, 1820000);

Here's a previous version of the code with navigator.geolocation that worked.

Answer 1

You are using modern ES6 syntax for example class Weather that's why. If you want to learn more about how you can convert it to pre ES6 syntax so it works on older devices too check this article ES6 Class vs Object.prototyoe `