Przedłużanie zestawu głośnomówiącego

Question

Próbuję utworzyć opakowanie o numerze Handsontable, aby zapewnić dodatkowe funkcje. Próbowałem wykonać następujące czynności i chociaż konstruktor działa, funkcja loadData wydaje się nie być przesłonięta. Jakakolwiek rada?

Testowałem to w Chrome 45.0.2454.101m.

"use strict"; 

class CustomHandsontable extends Handsontable { 

    constructor(container, options) { 
     console.log("in constructor"); 
     super(container, options); 
    } 

    loadData(data) { 
     console.log("load data"); 
     super.loadData(data); 
    } 
} 

EDIT: Po przeczytaniu, że Chrome nie jest jeszcze w pełni wspierać ECMA6, próbowałem następujące, ale nie dość dowiedzieć się, jak wywołać metodę rodzic loaddata.

function CustomHandsontable (container, options) { 
    console.log("constructor"); 

    this.loadData = function(data) { 
     console.log("loadData"); 
     // TODO how do you call the parent load data function? 
    } 
}; 

CustomHandsontable.prototype = Object.create(Handsontable.prototype); 
CustomHandsontable.prototype.constructor = CustomHandsontable; 

EDIT: Po @ZekeDroids wskazówka korzystania Babel, pojawia się następujący komunikat o błędzie, gdy jej próbuje wywołać funkcję super klasy loaddata:

Uncaught TypeError: Cannot read property 'call' of undefined 

Babel code:

"use strict"; 

var _createClass = (function() { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 

var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; 

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 

var Hot = (function (_Handsontable) { 
    _inherits(Hot, _Handsontable); 

    function Hot(localOptions, container, options) { 
     _classCallCheck(this, Hot); 

     console.log("in constructor"); 
     _get(Object.getPrototypeOf(Hot.prototype), "constructor", this).call(this, container, options); 
    } 

    _createClass(Hot, [{ 
     key: "loadData", 
     value: function loadData(data) { 
      console.log("load data"); 
      _get(Object.getPrototypeOf(Hot.prototype), "loadData", this).call(this, data); 
     } 
    }]); 

    return Hot; 
})(Handsontable); 

Answer 1

Odbieranie moje własne pytanie ...

Nie byłem w stanie uzyskać spadku t o pracujesz, ale znalazłeś rozwiązanie wykorzystujące kompozycję:

function Hot(container, options, customOptions) { 
    var _instance = this; 

    // create a hot instance 
    var hot = new Handsontable(container, options); 
    hot._hotContainer = this; 

    // 
    // put any custom stuff here... 
    // 

    // 
    // since inheritance doesn't quite work, the following are all pass-through 
    // functions to cover the fact that composition is being used 
    // 

    this.loadData = function(data) { 
     hot.loadData.apply(this, arguments); 
    } 
    this.render = function() { 
     hot.render.apply(this, arguments); 
    } 
    this.getDataAtRow = function() { 
     return hot.getDataAtRow.apply(this, arguments); 
    } 
    this.countCols = function() { 
     return hot.countCols.apply(this, arguments); 
    } 
    this.sort = function() { 
     hot.sort.apply(this, arguments); 
    } 
};