openlayers 库源代码中 bind 的混淆用法

Question

我正在查看 openlayers javascript 库的源代码。在 source/CartoDB.js 的文件中，我发现有如下内容：

class CartoDB extends XYZ {
  constructor () {}
  initializeMap_() {
    ...
    const client = new XMLHttpRequest();
    client.addEventListener('load', this.handleInitResponse_.bind(this, paramHash));
    client.addEventListener('error', this.handleInitError_.bind(this));
    client.open('POST', mapUrl);
    client.setRequestHeader('Content-type', 'application/json');
    client.send(JSON.stringify(this.config_));
  }

  handleInitResponse_(paramHash, event) {
    ...
  }

  handleInitError_(event) {
    ...
  } 
}

我清理代码并删除与我的问题无关的代码。
我的困惑点是以下两行：

client.addEventListener('load', this.handleInitResponse_.bind(this, paramHash));
client.addEventListener('error', this.handleInitError_.bind(this));

我认为this.handleInitResponse_.bind(this, paramHash)正好等于this.handleInitResponse_，this.handleInitError_.bind(this)正好等于this.handleInitError_。而这两个方法只是在 CartoDB class 中定义的。

那为什么要这样处理呢？

Answer 1

与这两种情况相当

var myObject = {
    readyState: "myObject",
    errorHandler: function() { console.log(this.readyState) },
    initialize: function() {
       var xhr = new XMLHttpRequest();
       xhr.addEventListener('error',this.errorHandler);
       xhr.open("GET", "http://invalid.com/invalid.dat", true);
       xhr.send();
    }
}
myObject.initialize(); // logs "4"

var myObject = {
    readyState: "myObject",
    errorHandler: function() { console.log(this.readyState) },
    initialize: function() {
       var xhr = new XMLHttpRequest();
       xhr.addEventListener('error',this.errorHandler.bind(this));
       xhr.open("GET", "http://invalid.com/invalid.dat", true);
       xhr.send();
    }
}
myObject.initialize(); // logs "myObject"

openlayers 库源代码中 bind 的混淆用法

confusing usage of bind in openlayers library source code

bind

openlayers-5