如何通过按钮在Javascript中调用方法（使用此方法）？

Question

在javascript中，从按钮调用函数很容易：

b.onclick = f;

也可以通过按钮调用方法：

Myclass.prototype.m = function() {
    var t = this;
    b.onclick = t.f;
}

但是我们想通过一个按钮通过另一个函数来调用类的方法。 有什么方法可以在不传入原始对象的情况下执行此操作？

这是无效的代码。 这是在按钮的上下文中解释的。

<!DOCTYPE html>
<html>
<body>
</body>
<script>
function A() {}
A.prototype.e = function() {
  console.log("bar");
}

A.prototype.f = function() {
  console.log("foo!");
  this.e();
}

A.prototype.g = function() {
  var b = document.createElement("button");
  b.innerHTML = "say foo!";
  b.onclick = this.f;
  document.getElementsByTagName("body")[0].appendChild(b);
}

var a = new A();
a.g();

</script>
</html>

Answer 1

由于流程中断，您应该绑定以下内容

<!DOCTYPE html>
<html>
<body>
</body>
<script>
function A() {}
A.prototype.e = function() {
  console.log("bar");
}

A.prototype.f = function() {
  console.log("foo!");
  this.e();
}

A.prototype.g = function() {
  var b = document.createElement("button");
  b.innerHTML = "say foo!";
  b.onclick = this.f.bind(this)
  document.getElementsByTagName("body")[0].appendChild(b);
}

var a = new A();
a.g();

</script>
</html>

Answer 2

使用Function.prototype.bind将this关键字的上下文更改为您a实例

<!DOCTYPE html>
<html>
<body>
</body>
<script>
function A() {}
A.prototype.e = function() {
  console.log("bar");
}

A.prototype.f = function() {
  console.log("foo!");
  this.e();
}

A.prototype.g = function() {
  var b = document.createElement("button");
  b.innerHTML = "say foo!";
  b.onclick = this.f.bind(this);
  document.getElementsByTagName("body")[0].appendChild(b);
}

var a = new A();
a.g();

</script>
</html>

如何通过按钮在Javascript中调用方法（使用此方法）？

问题描述

2 个解决方案

解决方案1
1 2015-08-18 18:50:38

解决方案2
1 已采纳 2015-08-18 19:06:32

如何通过按钮在Javascript中调用方法（使用此方法）？

问题描述

2 个解决方案

解决方案1 1 2015-08-18 18:50:38

解决方案2 1 已采纳 2015-08-18 19:06:32

解决方案1
1 2015-08-18 18:50:38

解决方案2
1 已采纳 2015-08-18 19:06:32