javascript - 如何正确定义javascript原型(prototype)绑定(bind)？

Question

你能帮我把这个函数绑定(bind)到 WatcherTable 对象本身吗？ 绑定(bind)真的很令人兴奋

WatcherTable.prototype.setRowData= function(rowData) {
  var mockServer = new MockServer();
  mockServer.init(rowData);

  var viewportDatasource = new ViewportDatasource(mockServer);
  this.table.api.setViewportDatasource(viewportDatasource);

  setTimeout(function () {
    this.table.api.sizeColumnsToFit();
  }, 100);
};

我已经尝试这样做了:

WatcherTable.prototype.setRowData= function(function(rowData) {     
  var mockServer = new MockServer();
  mockServer.init(rowData);

  var viewportDatasource = new ViewportDatasource(mockServer);
  this.table.api.setViewportDatasource(viewportDatasource);

  setTimeout(function () {
    this.table.api.sizeColumnsToFit();
  }, 100);
}).bind(this);

但它显然不起作用(我认为这段代码没有任何意义)。

我怎样才能正确地做到这一点？

谢谢

Answer 1

内部 setTimeout(function(){...}) this 不再链接到 WatcherTable 实例。 Here您可以阅读有关此 行为的信息。

你可以像这样预先将它保存在 prototype.setRowData() 中

WatcherTable.prototype.setRowData = function(rowData) {

  var thisObj = this;//saving this

  var mockServer = new MockServer();
  mockServer.init(rowData);

  var viewportDatasource = new ViewportDatasource(mockServer);
  this.table.api.setViewportDatasource(viewportDatasource);

  setTimeout(function () {
    thisObj.table.api.sizeColumnsToFit();//using thisObj
  }, 100);

};

或者你可以使用ES6 arrow function像这样在 setTimeout() 里面

WatcherTable.prototype.setRowData = function(rowData) {

  var mockServer = new MockServer();
  mockServer.init(rowData);

  var viewportDatasource = new ViewportDatasource(mockServer);
  this.table.api.setViewportDatasource(viewportDatasource);

  setTimeout(() => {//arrow functions do not affect on 'this'
    this.table.api.sizeColumnsToFit();
  }, 100);

};