How to use the base/utils.extend function in base

this.xScale = null;
    this.yScale = null;
    this.sScale = null;
    this.cScale = null;

    this.xAxis = axisSmart();
    this.yAxis = axisSmart();


    this.cached = {};
    this.xyMaxMinMean = {};
    this.isCanvasPreviouslyExpanded = false;
    this.draggingNow = null;

    // default UI settings
    this.ui = utils.extend({
      whenHovering: {},
      labels: {}
    }, this.ui["vzb-tool-" + this.name]);

    this.ui.whenHovering = utils.extend({
      showProjectionLineX: true,
      showProjectionLineY: true,
      higlightValueX: true,
      higlightValueY: true
    }, this.ui.whenHovering);

    this.ui.labels = utils.extend({
      autoResolveCollisions: false,
      dragging: true
    }, this.ui.labels);

_this.ready();
        }

        if(!_this._splash) {

          if((['change:time:start', 'change:time:end']).indexOf(evt) !== -1) {
            _this.changeLimits();
          }
          _this._optionClasses();
          //only set handle position if change is external
          if(!_this.model.time.dragging) _this._setHandle(_this.model.time.playing);
        }
      }
    };

    this.ui = utils.extend({
      show_limits: false,
      show_value: false,
      show_value_when_drag_play: true,
      show_button: true,
      class_axis_aligned: false
    }, config.ui, this.ui);

    // Same constructor as the superclass
    this._super(config, context);

    //defaults
    this.width = 0;
    this.height = 0;

    this.getValueWidth = utils.memoize(this.getValueWidth);
    this._setTime = utils.throttle(this._setTime, 50);

init(config, context) {
    const _this = this;

    this.name = "singlehandleslider";

    const options = utils.extend({}, OPTIONS);
    this.options = utils.extend(options, this.options || {});
    const profiles = utils.extend({}, PROFILES);
    this.profiles = utils.extend(profiles, this.profiles || {});

    //this.template = this.template || require("./brushslider.html");

    this.slider_properties = config.properties || {};
    const roundDigits = this.slider_properties.roundDigits;
    if (roundDigits || roundDigits == 0) {
      this.options.ROUND_DIGITS = roundDigits;
    }
    if (this.slider_properties.domain) {
      this.options.EXTENT_MIN = this.slider_properties.domain[0];
      this.options.EXTENT_MAX = this.slider_properties.domain[1];
    }

    this._super(config, context);

init(config, context) {

    this.name = "bubblesize";

    const options = utils.extend({}, OPTIONS);
    this.options = utils.extend(options, this.options || {});
    const profiles = utils.extend({}, PROFILES);
    this.profiles = utils.extend(profiles, this.profiles || {});

    this.model_expects = [{
      name: "submodel",
      type: "size"
    }, {
      name: "locale",
      type: "locale"
    }];

    const _this = this;

    this.changeHandler = this.changeHandler.bind(this);
    this.readyHandler = this.readyHandler.bind(this);

    this.model_binds = {
      "change:submodel.domainMin": this.changeHandler,

init(config, context) {
    const _this = this;

    this.name = "singlehandleslider";

    const options = utils.extend({}, OPTIONS);
    this.options = utils.extend(options, this.options || {});
    const profiles = utils.extend({}, PROFILES);
    this.profiles = utils.extend(profiles, this.profiles || {});

    //this.template = this.template || require("./brushslider.html");

    this.slider_properties = config.properties || {};
    const roundDigits = this.slider_properties.roundDigits;
    if (roundDigits || roundDigits == 0) {
      this.options.ROUND_DIGITS = roundDigits;
    }
    if (this.slider_properties.domain) {
      this.options.EXTENT_MIN = this.slider_properties.domain[0];
      this.options.EXTENT_MAX = this.slider_properties.domain[1];
    }

    this._super(config, context);
  },

loadTemplate() {
    const tmpl = this.template;
    let data = this.template_data;
    const _this = this;
    let rendered = "";
    if (!this.placeholder) {
      return;
    }
    //todo: improve t function getter + generalize this
    data = utils.extend(data, {
      t: this.getTranslationFunction(true)
    });
    if (this.template) {
      try {
        rendered = templateFunc(tmpl, data);
      } catch (e) {
        utils.error("Templating error for component: '" + this.name +
          "' - Check if template name is unique and correct. E.g.: 'bubblechart'");

        utils.removeClass(this.placeholder, class_loading_data);
        utils.addClass(this.placeholder, class_error);
        this.setError({
          type: "template"
        });
      }
    }

init: function(values, parent, bind) {

    this._type = "time";
    //default values for time model
    var defaults = utils.deepClone(this._defaults);
    values = utils.extend(defaults, values);

    //same constructor
    this._super(values, parent, bind);

    var _this = this;
    this._playing_now = false;

    //bing play method to model change
    this.on({
      "change:playing": function() {
        if(_this.playing === true) {
          _this._startPlaying();
        } else {
          _this._stopPlaying();
        }
      },

constructor: function ( parentComponent, kfEditor, target, options ) {

                this.kfEditor = kfEditor;
                this.target = target;

                this.zoom = 1;
                this.step = 0.05;

                this.options = Utils.extend( {}, DEFAULT_OPTIONS, options );

                this.initEvent();

            },

utils.forEach(this._components_config, component_config => {

      component_config.model = component_config.model || {};

      if (!component_config.component) {
        utils.error("Error loading component: name not provided");
        return;
      }

      comp = (utils.isString(component_config.component)) ? Component.get(component_config.component) : component_config.component;

      if (!comp) return;

      config = utils.extend(component_config, {
        name: component_config.component,
        ui: _this._uiMapping(component_config.placeholder, component_config.ui)
      });
      //instantiate new subcomponent
      const subcomp = new comp(config, _this);
      _this.components.push(subcomp);
    });
  },

loadDataAvailability() {
    const conceptsQuery = {
      select: {
        key: ["key", "value"],
        value: []
      },
      from: "concepts.schema"
    };
    const entitiesQuery = utils.extend({}, conceptsQuery, { from: "entities.schema" });
    const datapointsQuery = utils.extend({}, conceptsQuery, { from: "datapoints.schema" });

    return Promise.all([
      this.load(conceptsQuery),
      this.load(entitiesQuery),
      this.load(datapointsQuery)
    ])
      .then(this.handleDataAvailabilityResponse.bind(this))
      .catch(error => this.handleLoadError(error, {}));
  },