如何通过JS-Dart interop从JavaScript访问“this”

Question

我需要从Dart函数访问JavaScript对象的this。我通过Dart JS interop向JavaScript对象添加了一个新方法。我需要从Dart中定义的方法访问JavaScript对象上的属性。

Answer 1

Callback构造函数可以从JavaScript传递this。根据回调的API文档：

new Callback.many(Function f, {bool withThis: false})
new Callback.once(Function f, {bool withThis: false})

这里有一个例子：

飞镖代码：

import 'dart:html';
import 'package:js/js.dart' as js;
void main() {
  var greeter = js.context['greeter'];
  var msg = greeter['greet']('Bob');
  greeter['doCoolStuff'] = new js.Callback.many(doCoolStuff, withThis: true);
}
doCoolStuff(jsThis) {
  print(jsThis['msg']);
}

请注意，在创建回调时使用了withThis: true。JavaScript中的this作为回调函数的第一个参数传入。在这种情况下，我将其命名为jsThis。

JavaScript代码：

function Greeter() {
  this.msg = 'hello';
  var that = this;
  document.getElementById('clickme').addEventListener('click', function() {
    that.doCoolStuff();
  });
}
Greeter.prototype.greet = function(name) {
  return this.msg + ' ' + name;
}
var greeter = new Greeter();
document.getElementById('clickme').addEventListener('click', function() {
  greeter.doCoolStuff(); // comes from Dart land
});