Question

i have seen this code:

Function.prototype.bind = function (bind) {
    var self = this;
    return function () {
        var args = Array.prototype.slice.call(arguments);
        return self.apply(bind || null, args);
    };
};

in some implementation on javascript and used for handle EventListener

element.addEventListener('mousedown', this.mykeydownhandler.bind(this), false);

can explain me this functionality

Answer 1

That’s just a homebrew implementation of the standard Function.bind function:

Creates a new function that, when called, itself calls this function in the context of the provided this value, with a given sequence of arguments preceding any provided when the new function was called.

That should be wrapped with some sort feature detection so that it only gets used for browsers with a behind-the-times JavaScript engine.

The problem with just saying this:

element.addEventListener('mousedown', this.mykeydownhandler, false);

Is that this.mykeydownhandler is an unbound function and the value of this inside that function will be determined when it is called. So, if mykeydownhandler depends on what this is then you won’t have the right context when the event is triggered. When you say this:

element.addEventListener('mousedown', this.mykeydownhandler.bind(this), false);

using either the native bind or the homebrew replacement in your question, the this in the addEventListener call will be the same as this inside mykeydownhandler.