JavaScript prototype functions overriding

Question

I am using open source Able Player from Github The UI is very basic and I was wondering the best way to extend the player and override functions like

AblePlayer.prototype.getSvgData = function(button) {...
AblePlayer.prototype.setButtonImages = function() {...

So that I can use my own icons etc.

without motifying the original ableplayer.js

Answer 1

It is best to extend AblePlayer with prototypical inheritance best practices according to MDN

(function(){
    const AblePlayer = window.AblePlayer;

    function MyAblePlayer(...args) {
        AblePlayer.call(this, ...args);
    }

    MyAblePlayer.prototype = Object.create(AblePlayer.prototype);
    MyAblePlayer.prototype.constructor = MyAblePlayer;

    /* @override method*/
    MyAblePlayer.prototype.getSvgData = function (...args) {
        // if you need to call super do:
        const superResult = AblePlayer.prototype.getSvgData.call(this, ...args);

        // add your code here

        return superResult; // or return some other result
    }

    // Copy static properties
    Object.assign(MyAblePlayer, AblePlayer)

    // Finally override global reference
    window.AblePlayer = MyAblePlayer;
})();