Question

我见过这段代码：

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

在javascript上的一些实现中用于处理EventListener

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

可以解释我这个功能

Answer 1

这只是标准Function.bind函数的自制实现：

创建一个新函数，在调用时，它本身在提供的this值的上下文中调用此函数，并在调用新函数时提供任何前面提供的给定参数序列。

这应该包含一些排序功能检测，以便它仅用于具有落后JavaScript引擎的浏览器。

问题只是这样说：

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

this.mykeydownhandler是否为未绑定函数，并且在调用该函数时将确定该函数内的this的值。因此，如果mykeydownhandler取决于this是什么，则在触发事件时您将无法获得正确的上下文。当你这样说：

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

在您的问题中使用原生bind或自制的替代品，this来电中的addEventListener将与this内的mykeydownhandler相同

Answer 2

基本上，它确保在所有浏览器中正确设置事件处理函数中的this关键字。有些浏览器似乎没有做对。

我通过使用闭包和更可靠的变量来避免this问题，但这是实现相同结果的另一种方法。

在EventListeners上使用function.prototype.bind（）

2 个答案: