I can't change constructor in callback function

Question

Here I cannot change the long and lat values ​​in the constructor in the setcurrentposition function. When I call this in this function, it returns undefined. How can I change the values ​​in the constructor within that function? When I want to set lan long values ​​in the constructor in my showPosition method, this method does not show the constructor. How can I set this? When I press this to console it comes undefined

const geojson = {
  'type': 'FeatureCollection',
  'features': [{
      'type': 'Feature',
      'properties': {
        'message': 'Foo',
        'iconSize': [60, 60]
      },
      'geometry': {
        'type': 'Point',
        'coordinates': [-66.324462, -16.024695]
      }
    },
    {
      'type': 'Feature',
      'properties': {
        'message': 'Bar',
        'iconSize': [50, 50]
      },
      'geometry': {
        'type': 'Point',
        'coordinates': [-61.21582, -15.971891]
      }
    },
    {
      'type': 'Feature',
      'properties': {
        'message': 'Baz',
        'iconSize': [40, 40]
      },
      'geometry': {
        'type': 'Point',
        'coordinates': [-63.292236, -18.281518]
      }
    }
  ]
};

class MapboxClass {

  constructor({
    token = token,
    long = long,
    lat = lat,
    mapCanvas = mapCanvas,
    mapStyle = mapStyle,
    geojson = geojson,


  } = {}) {
    this.mapCanvas = mapCanvas
    this.token = token;
    this.long = long;
    this.lat = lat;
    this.geojson = geojson
    this.mapStyle = mapStyle
  }

  currentLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(this.setCurrentPosition, this.showError)
    }
  }
  setCurrentPosition(position) {
    this.lat = position.coords.latitude;
    this.long = position.coords.longitude;
  }
  showError(error) {
    switch (error.code) {
      case error.PERMISSION_DENIED:
        x.innerHTML = "User denied the request for Geolocation."
        break;
      case error.POSITION_UNAVAILABLE:
        x.innerHTML = "Location information is unavailable."
        break;
      case error.TIMEOUT:
        x.innerHTML = "The request to get user location timed out."
        break;
      case error.UNKNOWN_ERROR:
        x.innerHTML = "An unknown error occurred."
        break;
    }
  }
  // Method

  createMap() {
    mapboxgl.accessToken = this.token
    const mapCanvas = new mapboxgl.Map({
      container: 'map',
      style: this.mapStyle,
      center: [27.144623192174567, 38.428404055417225],
      zoom: 6
    });

    this.mapCanvas = mapCanvas
  }
  addMarkersToMap() {
    for (const marker of this.geojson.features) {
      // Create a DOM element for each marker.
      const el = document.createElement('div');
      const width = marker.properties.iconSize[0];
      const height = marker.properties.iconSize[1];
      el.className = 'marker';
      el.style.backgroundImage = `url(https://placekitten.com/g/${width}/${height}/)`;
      el.style.width = `${width}px`;
      el.style.height = `${height}px`;
      el.style.backgroundSize = 'cover';
      el.style.backgroundPosition = 'center';

      // Add markers to the map.
      new mapboxgl.Marker(el)
        .setLngLat(marker.geometry.coordinates)
        .addTo(this.mapCanvas);

      el.addEventListener('click', () => {
        window.alert(marker.properties.message);
      });
    }
  }

}

const mapp = new MapboxClass({
  token: "pk.eyJ1IjoiemdubXVzdGFmYSIsImEiOiJja2ZmZzF1ZzgwZWhxMnlvM2V4cWh0c3ZrIn0.5U4S5f2PwICD0MainYx_OQ",
  mapStyle: 'mapbox://styles/mapbox/streets-v11',
  mapCanvas: '',
  lat: 'x',
  long: 'x',
  geojson: {
    'features': [{
        'type': 'Feature',
        'properties': {
          'message': 'Foo',
          'iconSize': [60, 60]
        },
        'geometry': {
          'type': 'Point',
          'coordinates': [27.13652687626378, 38.41263764981549]
        }
      },
      {
        'type': 'Feature',
        'properties': {
          'message': 'Bar',
          'iconSize': [50, 50]
        },
        'geometry': {
          'type': 'Point',
          'coordinates': [27.13652687626378, 39.41263764981549]
        }
      },
      {
        'type': 'Feature',
        'properties': {
          'message': 'Baz',
          'iconSize': [40, 40]
        },
        'geometry': {
          'type': 'Point',
          'coordinates': [29.13652687626378, 38.41263764981549]
        }
      }
    ]
  }
});
mapp.createMap();
mapp.addMarkersToMap();

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

.marker {
  display: block;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Add custom icons with Markers</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <style>
    .marker {
      display: block;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      padding: 0;
    }
  </style>


  <div id="map"></div>
  <div id="demo"></div>
</body>

</html>