扩展讲义

Question

我正在尝试在Handsontable周围创建一个包装器，以提供一些额外的功能。我尝试过以下操作，虽然构造函数工作，但loadData函数似乎没有被覆盖。有什么建议吗？

我在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);
    }
}

编辑：在看到Chrome还没有完全支持ECMA6之后，我尝试了以下内容，但无法弄清楚如何调用父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;

编辑：在@ZekeDroids提示使用Babel后，我在尝试调用超类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

回答我自己的问题......

我无法继承工作，但确实找到了使用组合的解决方案：

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);
    }
};