How to use the heyui/src/utils/utils.extend function in heyui

constructor(reference, options) {
    options = utils.extend({}, DEFAULT_OPTIONS, options);
    this.reference = reference;

    this.options = options;

    const triggerEvents = typeof options.trigger === 'string' ? options.trigger.split(' ').filter((trigger) => {
      return ['click', 'hover', 'focus', 'manual', 'contextMenu'].indexOf(trigger) !== -1;
    }) : [];

    this.isOpen = false;

    this.arrowSelector = options.arrowSelector;
    this.innerSelector = options.innerSelector;
    this.triggerEvents = [];
    if (options.content.nodeType === 1) {
      options.content.style.display = 'none';
    }

data() {
    let param = {};
    param = utils.extend({}, config.getOption('menu'), this.option);
    return {
      param,
      status: {
        selected: null,
        opened: []
      }
    };
  },
  computed: {

type() {
      this.options = utils.extend({}, options.datetimeOptions, this.option);
      this.view = startView[this.type];
    }
  },

param() {
      if (this.config) {
        return utils.extend({},
          config.getOption('tree.default'),
          config.getOption(`tree.configs.${this.config}`),
          this.option
        );
      } else {
        return utils.extend({}, config.getOption('tree.default'), this.option);
      }
    },
    showCls() {

validField(prop) {
      if (!prop || !this.validator || !this.model) {
        return {
          valid: true
        };
      }
      let returnResult = this.validator.validField(prop, this.model, {
        next: (result) => {
          utils.extend(true, this.messages, result);
        }
      });
      utils.extend(true, this.messages, returnResult);
      return utils.extend({}, this.messages[prop]);
    },
    validFieldJs(prop, next) {

function Modal(originalParam) {
  let cls = prefixCls;
  let param = utils.extend({ hasMask: true, closeOnMask: true, buttons: ['cancel'] }, Default, originalParam, true);

  if (originalParam.hasDivider || Default.hasDivider) {
    param.className += ` h-modal-has-divider`;
  }

  if (param.fullScreen) {
    param.className += ` h-modal-full-screen`;
  }

  if (param.middle) {
    param.className += ` h-modal-container-center`;
  }

  if (param.transparent) {
    param.className += ` h-modal-transparent`;
  }

param() {
      if (this.config) {
        return utils.extend({}, config.getOption('category.default'), config.getOption(
          `category.configs.${this.config}`), this.option);
      } else {
        return utils.extend({}, config.getOption('category.default'), this.option);
      }
    },
    categoryCls() {

renderMessage(returnResult) {
      let isSuccess = true;
      for (let r in returnResult) {
        if (!returnResult[r].valid) {
          isSuccess = false;
          break;
        }
      }
      utils.extend(true, this.messages, returnResult);
      let result = {
        result: isSuccess,
        messages: utils.toArray(this.messages, 'prop').filter(item => !item.valid)
      };
      return result;
    },
    tipError(result) {

param() {
      if (this.config) {
        return utils.extend({}, config.getOption('category.default'), config.getOption(
          `category.configs.${this.config}`), this.option);
      } else {
        return utils.extend({}, config.getOption('category.default'), this.option);
      }
    },
    categoryCls() {

param() {
      if (this.config) {
        return utils.extend({}, config.getOption('cascader.default'), config.getOption(
          `cascader.configs.${this.config}`), this.option);
      } else {
        return utils.extend({}, config.getOption('cascader.default'), this.option);
      }
    },
    cascaderCls() {